初始化一些文件和依賴

新建一個testwebpack的文件夾。?
然后在該文件夾下：

npm init

• 1

這時候會出現一個pack.json文件。

npm i webpack vue vue-loader

• 1

這時候警告如下：?
npm WARN vue-loader@15.2.4 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself.?
npm WARN vue-loader@15.2.4 requires a peer of vue-template-compiler@^2.0.0 but none is installed. You must install peer dependencies yourself.

需要安裝css-loader 和vue-template-compiler。

npm i css-loader vue-template-compiler

• 1

新建文件夾：

• src > app.vue(根文件)

<template><div id="app">{{text}}</div> </template><script> export default {name: 'App',data () {return {text: 'this is test'}} } </script><style scoped>#app {color: red;} </style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

• src > index.js (主入口)

import Vue from 'vue' import App from './app.vue' const root = document.createElement('div') document.body.appendChild(root)new Vue({render: (h) => h(App) }).$mount(root)

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

新建webpack.config.js

const path = require('path')module.exports = {entry: path.join(__dirname, 'src/main.js'),output: {filename: 'bundle.js',path: path.join(__dirname, 'dist')} }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

package.js > script下添加代碼如下：?
因為只有在這里配置了，才能運行內部的webpack

"build": "webpack --config webpack.config.js"

• 1

此時在端口運行npm run build

提示如下：?
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages?
webpack4需要依賴webpack-cli

webpack-cli

• 1

安裝好之后報錯如下：

1、The ‘mode’ option has not been set,?
webpack4里面需要聲明mode來判斷是生產環境還是開發環境?
詳見官網：https://webpack.js.org/concepts/mode/?
修改build：

"build": "webpack --mode=production --config webpack.config.js"

• 1

2、You may need an appropriate loader to handle this file type.?
這個報錯說明需要配置loader?
配置必要的loader：

module: {rules: [{test: /\.vue$/,loader: 'vue-loader'},{test: /\.css$/,use: ['style-loader','css-loader']}]},

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

此時繼續npm run build?
報錯如下：

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

提示webpack4配置需要包含VueLoaderPlugin

const VueLoaderPlugin = require('vue-loader/lib/plugin')

• 1

然后在輸出里面配置plugins：

plugins: [new VueLoaderPlugin() ]

• 1
• 2
• 3

此時發現還有報錯，原因很簡單，沒有安裝style-loader.

npm i style-loader

• 1

這時候就可以正常的 run build 了。

配置圖片資源的打包、css預處理器等

新建文件src>assets>image&&src>assets>styles

然后配置loader：

,{test: /\.(jpg|jpeg|svg|png|gif)$/,use: {loader: 'url-loader',options: {limit: 1024,filename: '[name].[ext]'}}},{test: /\.styl$/,use: ['style-loader','css-loader','stylus-loader']}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

安裝loader：

npm i stylus stylus-loader url-loader file-loader

• 1

此時，就基本完成基本配置了。

devServer的使用

package.js倆面的script配置如下：

"dev": "webpack-dev-server --mode=development --config webpack.config.js"

• 1

webpack.config.js里面進行一些判斷，確定是生產環境還是開發環境：?
如何判斷呢？安裝一個cross-env 的包

npm i cross-env

• 1

修改package.js內容如下：

"build": "cross-env NODE_ENV=production webpack --mode=production --config webpack.config.js", "dev": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config webpack.config.js"

• 1
• 2

然后在weback.config.js定義一個變量：

const isDev = process.env.NODE_ENV === 'development'

• 1

如果這個變量為真，則做如下操作：

if (isDev) {config.devtool = '#cheap-module-eval-source-map',config.devServer = { port: 8000, host: '0.0.0.0', overlay: { errors: true//熱加載 hot: true},//下面是不刷新更新內容config.plugins.push(new webpack.HotModuleReplacementPlugin(),,new webpack.NoEmitOnErrorsPlugin()) }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

這時候還需要一個html來展示，

const HTMLPlugin = require('html-webpack-plugin')

• 1

plugins: [new webpack.DefinePlugin({'process.env': {NODE_ENV: isDev ? '"development"' : '"production"'}}),new VueLoaderPlugin(),new HTMLPlugin()],

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

到這里，基本配置就已經完成了。

postCss、babel-loader使用

npm i postcss autoprefixer babel-loader babel-core

• 1

postcss: 后處理css的作用

aotuprefixer

const autoorefixer = require('autoprefixer')module.exports = {plugins: [autoprefixer()] }

• 1
• 2
• 3
• 4
• 5
• 6
• 7

2.vue中使用jsx

npm i babel-env babel-plugin-transform-vue-jsx

• 1

rules添加如下：

{test: /\.jsx$/,loader: 'babel-loader'},

• 1
• 2
• 3
• 4

{test:/\.styl$/,use: ['style-loader','css-loader',{loader: 'postcss-loader',options: {sourceMap: true}//選項的作用使用來提高效率的。},'stylus-loader']},

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

這里我遇到一個坑，最后在官方文檔找到了。

test:/\.styl$/,

• 1

使用上面的配置無法解析vue中的stylus，需要向下面這樣配置：

test:/\.styl(us)?$/,

• 1

這樣就可以了。

正式打包的時候，如何分離css文件

npm install --save-dev extract-text-webpack-plugin

• 1

webpack4升級后，使用這個會有很多坑，如下：

開發環境的rules不變：

if (isDev) {config.module.rules.push({test: /\.styl(us)?$/,use: ['style-loader','css-loader',{loader: 'postcss-loader',options: {sourceMap: true,}},'stylus-loader']})// 開發環境就這樣就可以了

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

如果是生產環境：

else {config.output.filename = '[nams].[chunkhash:8].js'// 生產環境必須是chunkhashconfig.module.rules.push({test: /\.styl(us)?$/,use: ExtractTextPlugin.extract({fallback: "style-loader",use: ['css-loader',{loader: 'postcss-loader',options: {sourceMap: true,}},'stylus-loader']})})config.plugins.push(// new ExtractTextPlugin("styles.[ontentHash:8].css")new ExtractTextPlugin('styles.[hash:8].css')// 根據內容得到hash值) }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

坑1：?
webpack4不支持extract-text-webpack-plugin3.0版本，需要使用4.0-beat版本：

npm i extract-text-webpack-plugin@next

• 1

坑2：

config.plugins.push(// new ExtractTextPlugin("styles.[ontentHash:8].css")new ExtractTextPlugin('styles.[hash:8].css')// 根據內容得到hash值)

• 1
• 2
• 3
• 4
• 5

這里不能使用style.[contentHash:8].css

到這里最終編譯成功~

單獨打包vue代碼

config.entry = {app: path.join(__dirname, 'src/index.js'),vendor: ['vue']}

• 1
• 2
• 3
• 4

config.optimization = {splitChunks: {cacheGroups: {commons: {chunks: 'initial',minChunks: 2,maxInitialRequests: 5,minSize: 0},vendor: {test: /node_modules/,chunks: 'initial',name: 'vendor',priority: 10,enforce: true}}},runtimeChunk: true 原文發布時間：
原文作者：simoonQian
本文來源CSDN博客如需轉載請緊急聯系作者

總結

以上是生活随笔為你收集整理的webpack4配置vue环境和一些小坑。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。