webpack文档： https://www.webpackjs.com/concepts/
vue-loader文档：https://vue-loader.vuejs.org/guide/extract-css.html#webpack-4
安装webpack
在全局安装webpack后还需要安装一个webpack-cli
cnpm install -g webpack webpack-cli
再通过cd 文件夹切换到你自己的工程目录下再进行安装webpack和webpack-cli。安装方式同上。
webpack 4 引入了 mode 用来设置开发环境，同时也可以简化配置项，不同的 mode 会携带不同的默认配置，在webpack.dev.conf.js和webpack.prod.conf.js中增加mode属性：
// 在webpack.dev.conf.js中
const devWebpackConfig = merge(baseWebpackConfig, {
mode: 'development',
.....
}
// 在webpack.prod.conf.js中
const devWebpackConfig = merge(baseWebpackConfig, {
mode: 'production',
.....
}
错误提示和处理方式
dev环境中的错误
运行npm run dev提示错误
错误一
需要更新
webpack-dev-server,运行命令
cnpm install --save-dev webpack-dev-server@latest安装最新的包。
错误二
更新
html-webpack-plugin运行命令
cnpm install --save-dev html-webpack-plugin@latest
错误三
更新eslint和eslint-loader到最新版，运行命令
cnpm install --save-dev eslint@latest eslint-loader@latest
错误四
错误五
更新vue-loader，并对配置文件进行修改，
在webpack.dev.conf.js和webpack.prod.conf.js中作如下调整
// 在头部引入
const { VueLoaderPlugin } = require('vue-loader')
....
plugins: [
new VueLoaderPlugin(),
....
]
错误六
在路由入口文件中配置异步组件的时候，运行提示import出现问题，修改eslint配置文件.eslintrc.js
将parser: 'babel-eslint'从parserOptions中移动到同级目录下修改为:
root: true,
parser: 'babel-eslint',
parserOptions: {
'ecmaVersion': 6,
'sourceType': 'module'
},
eslint文档：http://eslint.cn/docs/user-guide/configuring
build环境中的错误
运行npm run build提示错误
更新插件copy-webpack-plugin
因为个人项目比较老，在升级中，还提示了file文件错误和resolve-cwd错误，个人通过更新了file-loader和resolve-from后提示错误解决。
css文件配置
如果在运行中出现css文件编译报错的话，你可以直接升级extract-text-webpack-plugin到4.0.0-beta.0版就可以解决，但由于webpack4推荐使用mini-css-extract-plugin。所以就决定将extract-text-webpack-plugin更改为mini-css-extract-plugin。
用法：https://www.npmjs.com/package/mini-css-extract-plugin
配置文件修改，先修改utils.js文件如下：
// const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
if (options.extract) {
// return ExtractTextPlugin.extract({
// use: loaders,
// fallback: 'vue-style-loader'
// })
return [MiniCssExtractPlugin.loader].concat(loaders)
} else {
return ['vue-style-loader'].concat(loaders)
}
...
在对webpack.prod.conf.js做调整：
// const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
....
// 将原先的ExtractTextPlugin 修改为MiniCssExtractPlugin
new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].[chunkhash:8].css')
})
....
optimization替换CommonsChunkPlugin
webpack4中去除了CommonsChunkPlugin，使用optimization.splitChunks和optimization.runtimeChunk替换。删除有CommonsChunkPlugin的代码块，在plugins同级下新增如下代码
optimization: {
/*minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: config.build.productionSourceMap
})
],*/
splitChunks: {
chunks: 'all',
minSize: 30000,
minChunks: 1,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
priority: 10
},
manifest: {
test: /[\\/]src[\\/]/,
minSize: 0,
minChunks: 2,
priority: 9
}
}
}
}
各项配置：
- chunks: all, async, initial 三选一, 插件作用的chunks范围（我一般都选择all，其他两个没用过，不是很清楚）
- minSize： 最小尺寸
- minChunks：在组件中引入的次数
- maxAsyncRequests： 最大异步请求chunks
- maxInitialRequests: 最大初始化chunks
- name： split 的 chunks name
- automaticNameDelimiter： 如果不指定name，自动生成name的分隔符（‘runtime~[name]’）
- cacheGroups: 字面意思缓存组（用于将项目中相同的引入打包到一起）
8.1: test 限制范围，可以是正则，匹配文件夹或文件
8.1: name 生成文件名(不写的话以‘runtime~[name]’的形式生成文件)
8.3: priority 优先级，多个分组冲突时决定把代码放在哪块
clean-webpack-plugin
可以用于清除文件目录下的文件
安装： cnpm install --save-dev clean-webpack-plugin
在webpack.prod.conf.js中的plugins新增如下代码：
// 清除打包后的dist目录
new CleanWebpackPlugin(
['dist'], // 匹配指定的文件或文件夹
{
root: __dirname, // 根目录
verbose: true, // 打印日志
dry: false // 删除文件
}
)
以上纯属个人观点，如有出错，请指正，谢谢m(__)m
参考文章：
关于splitChunks的介绍：
https://blog.csdn.net/qq_35534823/article/details/79406995
https://www.jianshu.com/p/3066d96aec8b