vue-cli#webpack3.0 升级到webpack4.6
全局下载安装webpack-cli
npm i webpack-cli -g
再当前项目中安装下面包
npm i webpack-cli@2.0.15 webpack@4.6.0 css-loader@0.28.11 extract-text-webpack-plugin@4.0.0-beta.0 file-loader@1.1.11 html-webpack-plugin@3.2.0 optimize-css-assets-webpack-plugin@4.0.0 url-loader@1.0.1 vue-loader@15.0.3 vue-style-loader@4.1.3 vue-template-compiler@2.5.16 webpack-bundle-analyzer@2.11.1 webpack-dev-middleware@3.1.3 webpack-dev-server@3.1.3 webpack-hot-middleware@2.22.1 compression-webpack-plugin@1.1.11 -D
这个时候通过npm run dev可能会出现下面错误
如果出现上面的错误,则通过npm安装下面包(主要是针对开通了eslint的情况需要更新eslint版本)
npm i eslint@4.19.1 eslint-config-standard@11.0.0 eslint-friendly-formatter@4.0.1 eslint-loader@2.0.0 eslint-plugin-import@2.11.0 eslint-plugin-node@6.0.1 eslint-plugin-promise@3.7.0 eslint-plugin-standard@3.1.0 eslint-plugin-vue@4.5.0 -D
再次运行可能会出现下面错误
如果出现上面的错误,则需要在webppack中配置(vue-loader 15版本需要):
// webpack.config.js const { VueLoaderPlugin } = require('vue-loader') module.exports = { // ... plugins: [ new VueLoaderPlugin() ] }
下面开始就是关于webpack的一些配置了
需要对开发环境加上
mode: 'development'
需要对生产环境加上
mode: 'production'
将开发环境下面的两个插件去掉,因为webpack默认设置了
new webpack.NamedModulesPlugin() new webpack.NoEmitOnErrorsPlugin()
将生产环境下面的commonschunkplugin插件配置全部去掉
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks (module) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules') ) === 0 ) } }), new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', minChunks: Infinity }), new webpack.optimize.CommonsChunkPlugin({ name: 'app', async: 'vendor-async', children: true, minChunks: 3 }),
然后加上下面的配置
optimization: { runtimeChunk: { name: 'manifest' }, splitChunks: { cacheGroups: { vendor: { test: /[\/]node_modules[\/]/, name: 'vendor', chunks: 'all' }, 'async-vendors': { test: /[\/]node_modules[\/]/, minChunks: 2, chunks: 'async', name: 'async-vendors' } } } }
npm run build如果出现下面的错误
则需要将下面的配置
new ExtractTextPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css'), allChunks: true }),
改成
new ExtractTextPlugin({ filename: utils.assetsPath('css/[name].[md5:contenthash].css'), allChunks: true }),
如果项目中原来使用了lodash,而且通过lodash-webpack-plugin进行按需加载的话,可能会出现下面的问题
如果出现了话,就将在webpack中下面配置的options整个去掉
{ test: /.js$/, loader: 'babel-loader', options: { plugins: ['lodash'], presets: [['env', { modules: false, targets: { node: 4 } }]] }, exclude: /node_modules/, include: [resolve('src'), resolve('test')] },
然后在.babelrc中的plugins中增加lodash
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime", "lodash"], "env": { "test": { "presets": ["env", "stage-2"], "plugins": ["transform-vue-jsx", "istanbul"] } } }
这样就大功告成了。