所用vue-cli版本为2.9.3, 非最新的3.0+版本, 包管理工具为yarn现在vue cli 3.x版本已经稳定, 推荐使用 @vue/cli 3.x版本
初始化项目
vue init webpack my-project
cd my-project
yarn install
脚手架项目webpack版本为3.6.0
升级webpack等devdependencies
yarn upgrade webpack@4.6.0
yarn add webpack-dev-server webpack-cli -D
光升级这写是不够的, 此时运行项目会报一些奇奇怪怪的错误, 比如TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function
查看错误信息上下文,
/workspace/my-project/node_modules/html-webpack-plugin/lib/compiler.js:81
var outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {
TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function
应该是相关插件版本不对, 比如这个错误就是html-webpack-plugin
未升级版本导致
继续升级相关plugin
需要升级的相关plugin如下:
html-webpakc-plugin
vue-loader
其他未涉及的, 也尽可能升级到新的版本.
修改webpack等相关配置文件
指定webpack.dev.conf.j和webpack.prod.conf.js 的mode 为development
和production
, 否则会有警告信息⚠️The 'mode' option has not been set, webpack will fallback to 'production' for this value.
此时项目已经能在dev-server下顺利运行.
删除多余配置项: webpack.DefinePlugin
已不再需要, 在开发模式下, process.env.NODE_ENV 自动被设置为'development', 生成模式下则是production
其他环境变量推荐使用cross-env
在命令里设置, 如果需要也可以保留.
cross-env cross-env NODE_ENV=test yarn test
其他插件修改:NoEmitOnErrorsPlugin
废弃,使用optimization.noEmitOnErrors
替代,在生产环境中默认开启ModuleConcatenationPlugin
废弃,使用optimization.concatenateModules
替代,在生产环境默认开启该插件。NamedModulesPlugin
废弃,使用optimization.namedModules
替代,在生产环境默认开启。uglifyjs-webpack-plugin
升级到了v1.0版本, 默认开启缓存和并行功能。CommonsChunkPlugin
被删除
在配置文件中删除废弃的插件, 至此, 开发模式改造完毕
生产模式改造
应为CommonsChunkPlugin
被删除, 改为内置的api, 首先删除webpack.prod.conf.js
相关配置(CommonsChunkPlugin和UglifyJsPlugin), 新增项optimization,
optimization: {
runtimeChunk: {
name: 'manifest'
},
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: config.build.productionSourceMap,
uglifyOptions: {
warnings: false
}
}),
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
],
splitChunks:{
chunks: 'async',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
name: false,
cacheGroups: {
vendor: {
name: 'vendor',
chunks: 'initial',
priority: -10,
reuseExistingChunk: false,
test: /node_modules\/(.*)\.js/
},
styles: {
name: 'styles',
test: /\.(scss|css)$/,
chunks: 'all',
minChunks: 1,
reuseExistingChunk: true,
enforce: true
}
}
}
}
extract-text-webpack-plugin
已不再被推荐使用, webpack4 推荐使用新的插件mini-css-extract-plugin
yarn add mini-css-extract-plugin -D
修改配置文件
// const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
plugins: [
...
// new ExtractTextPlugin({
// filename: utils.assetsPath('css/[name].[contenthash].css'),
// allChunks: true,
// }),
new MiniCssExtractPlugin({
filename: 'css/app.[name].css',
chunkFilename: 'css/app.[contenthash:12].css' // use contenthash *
}),
]
再修改build/utils文件中extract css的设置
// 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'
// })
// MiniCssExtractPlugin.loader,
return [MiniCssExtractPlugin.loader].concat(loaders)
} else {
return ['vue-style-loader'].concat(loaders)
}
yarn build
已经能够正常打包, 经过测试, 打包5万行代码的一个项目, webpack4比3快20s左右
经过修改的demo项目github地址
补充: 如果打包的时候出现
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
在webpack中增加配置即可
performance: {
hints: false
}
tips
新版的webpack devserver 如果不指定host, 只能通过localhost访问, 通过ip不能访问, 修改方法很简单, 指明host为 '0.0.0.0'就可以
...
host: '0.0.0.0', // can be overwritten by process.env.HOST
port: 8080
...
问题
如果build或者dev时候出现, html-webpack-plugin报错的情况, 请升级该插件, 相关issue
yarn add html-webpack-plugin@next -D
如果报chunksSortMode相关的错误, 请删除chunksSortMode: 'dependency'
之后再尝试build
还是建议升级html-webpack-plugin@next