vue-cli项目升webpack4

发表于

相关依赖升级

将下面的依赖升级到对应版本

1
2
3
4
5
6
7
8
"vue-loader": "^15.3.0",
"webpack": "^4.5.0",
   "webpack-bundle-analyzer": "^2.9.0",
   "webpack-cli": "^3.2.0",
   "webpack-dev-server": "^3.1.4",
   "webpack-merge": "^4.1.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
 "html-webpack-plugin": "^3.2.0"

升级后vue-loader会报错, 在webpack.base.conf.js 添加:

1
2
3
4
5
6
7
8
9
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    ***
    plugins: [
        new VueLoaderPlugin()
    ],
    ***
}

开发环境

在webpack.dev.conf.js中添加 mode ： ‘production’ 

1
2
3
4
5
****
const devWebpackConfig = merge(baseWebpackConfig, {
  mode : 'development',
  ****
})

生成环境

在webpack.prod.conf.js中添加

  • mode: ‘production’,

    1
    2
    3
    4
    5
    ****
    const devWebpackConfig = merge(baseWebpackConfig, {
      mode : 'production',
      ****
    })

  • 用optimization代替原来的webpack.optimize.CommonsChunkPlugin 、 uglifyjs-webpack-plugin 、 webpack.optimize.ModuleConcatenationPlugin

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            chunks: 'initial',
            name: 'vendors',
          },
          'async-vendors': {
            test: /[\\/]node_modules[\\/]/,
            minChunks: 2,
            chunks: 'async',
            name: 'async-vendors'
          }
        }
      },
      runtimeChunk: {name: 'runtime'}
    },

  • 添加clean-webpack-plugin清楚编译后的文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    const webpackConfig = merge(baseWebpackConfig, {
      ***
      plugins: [
        new CleanWebpackPlugin('dist/static', {
          root: path.resolve(__dirname, '../'),
        }),
    	***
    	]
      ***
    })

  • 把contenthash改成hash

    ​

  • 修改utils.js

    在 ExtractTextPlugin.extract中添加publicPath, 以保证css里面里面的图片可以正常访问

    1
    2
    3
    4
    5
    6
    7
    ***
       return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader',
            publicPath:'../../'
          })
    ***

    ​