初始化一些文件和依賴

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

npm init

• 1

這時(shí)候會(huì)出現(xiàn)一個(gè)pack.json文件。

npm i webpack vue vue-loader

• 1

這時(shí)候警告如下：?
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下添加代碼如下：?
因?yàn)橹挥性谶@里配置了，才能運(yùn)行內(nèi)部的webpack

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

• 1

此時(shí)在端口運(yùn)行npm run build

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

webpack-cli

• 1

安裝好之后報(bào)錯(cuò)如下：

1、The ‘mode’ option has not been set,?
webpack4里面需要聲明mode來(lái)判斷是生產(chǎn)環(huán)境還是開(kāi)發(fā)環(huán)境?
詳見(jiàn)官網(wǎng)：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.?
這個(gè)報(bào)錯(cuò)說(shuō)明需要配置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

此時(shí)繼續(xù)npm run build?
報(bào)錯(cuò)如下：

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

此時(shí)發(fā)現(xiàn)還有報(bào)錯(cuò)，原因很簡(jiǎn)單，沒(méi)有安裝style-loader.

npm i style-loader

• 1

這時(shí)候就可以正常的 run build 了。

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

新建文件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

此時(shí)，就基本完成基本配置了。

devServer的使用

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

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

• 1

webpack.config.js里面進(jìn)行一些判斷，確定是生產(chǎn)環(huán)境還是開(kāi)發(fā)環(huán)境：?
如何判斷呢？安裝一個(gè)cross-env 的包

npm i cross-env

• 1

修改package.js內(nèi)容如下：

"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定義一個(gè)變量：

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

• 1

如果這個(gè)變量為真，則做如下操作：

if (isDev) {config.devtool = '#cheap-module-eval-source-map',config.devServer = { port: 8000, host: '0.0.0.0', overlay: { errors: true//熱加載 hot: true},//下面是不刷新更新內(nèi)容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

這時(shí)候還需要一個(gè)html來(lái)展示，

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

到這里，基本配置就已經(jīng)完成了。

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}//選項(xiàng)的作用使用來(lái)提高效率的。},'stylus-loader']},

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

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

test:/\.styl$/,

• 1

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

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

• 1

這樣就可以了。

正式打包的時(shí)候，如何分離css文件

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

• 1

webpack4升級(jí)后，使用這個(gè)會(huì)有很多坑，如下：

開(kāi)發(fā)環(huán)境的rules不變：

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

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

如果是生產(chǎn)環(huán)境：

else {config.output.filename = '[nams].[chunkhash:8].js'// 生產(chǎn)環(huán)境必須是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')// 根據(jù)內(nèi)容得到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')// 根據(jù)內(nèi)容得到hash值)

• 1
• 2
• 3
• 4
• 5

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

到這里最終編譯成功~

單獨(dú)打包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 原文發(fā)布時(shí)間：
原文作者：simoonQian
本文來(lái)源CSDN博客如需轉(zhuǎn)載請(qǐng)緊急聯(lián)系作者

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。