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"]     }   } }

这样就大功告成了。