vue-cli#webpack3.0升级到webpack4.6

一、全局下载安装webpack-cli

二、当前项目中安装下列依赖

npm i [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] -D

注意:这个时候启动项目可能会出爱心纳下面错误
vue-cli#webpack3.0升级到webpack4.6_第1张图片

解决方法:

npm i [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] -D

  • 再次运行可能会出现下面错误
    vue-cli#webpack3.0升级到webpack4.6_第2张图片

    解决方法:

// 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如果出现下面的错误
vue-cli#webpack3.0升级到webpack4.6_第3张图片

\

则需要将下面的配置
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进行按需加载的话,可能会出现下面的问题
vue-cli#webpack3.0升级到webpack4.6_第4张图片
如果出现了话,就将在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"]
    }
  }
}
这样就大功告成了。

你可能感兴趣的:(vue-cli#webpack3.0升级到webpack4.6)