vue-webpack4升级

vue-webpack3x - > webpack4x

• 先在原来的项目里升级所有的依赖包

npm update

• 相比webpack3x webpack4x需要多安装一个webpack-cli

npm install webpack-cli

• 原来删除的extract-text-webpack-plugin使用mini-css-extract-plugin替代

// 使用yarn

yarn remove extract-text-webpack-plugin

yarn add --dev mini-css-extract-plugin

// webpack3x

const ExtractTextPlugin = require('extract-text-webpack-plugin');
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    allback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}
// 改为
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
if (options.extract) {
  return [MiniCssExtractPlugin.loader].concat(loaders)
} else {
  return ['vue-style-loader'].concat(loaders)
}

// webpack.prod.conf.js
const ExtractTextPlugin = require('extract-text-webpack-plugin');
new ExtractTextPlugin({
  filename: utils.assetsPath('css/[contenthash].css')
})
// 改为
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
new MiniCssExtractPlugin({
  filename: utils.assetsPath('css/[contenthash].css')
})

• webpack.base.conf.js

// 在入口之前 添加 新版webpack强制要求添加，不添加也可以执行，会有警告
module.exports = {
  mode: process.env.NODE_ENV, // development || production || none
  ...
}

• 针对找不到eslint的报错

// 在webpack.dev.conf.js 和 webpack.prod.conf.js 中的plugins下 添加（只是单纯的添加） 如下配置
new webpack.LoaderOptionsPlugin({ options: {} })

• 由于新版webpack不支持CommonsChunkPlugin所以需要把相关配置进行换换

new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        // 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',
  chunks: ['vendor']
})

// 把上面的删除了  --- 然后在 plugins 的同级 添加

optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        }
      }
    }
}

// 后面的这个配置如果配置有误会提示 ERROR in chunk 【你的多页面模块名】 [entry] 报错

• 安装插件

// 针对代码压缩报错

yarn add --dev uglifyjs-webpack-plugin

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false
  },
  sourceMap: true
})

// 改为

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

new UglifyJsPlugin({
  uglifyOptions: {
    compress: {
      warnings: false
    }
    },
    sourceMap: true
})

参考资料：

webpack中文网：https ://www.webpackjs.com/
npm官网：https：//www.npmjs.com/ 查看新安装的包的使用方法
其他博客：...