vue-webpack模板升級到webpack4

時間 2019-11-30

標籤 vue webpack 模板升級 webpack4 简体版

原文原文鏈接

本文僅簡單記錄下基於vue-webpack模板升級到webpack4的過程css

快速部署

　　Vue CLI 的包名稱由 vue-cli 改爲了 @vue/clihtml

# 全局安裝 vue-cli
$ npm install --global @vue/cli
# 建立一個基於 webpack 模板的新項目
$ vue init webpack my-project

升級

　　升級的操做很簡單，先刪除，再安裝便可(淘寶鏡像)。但要注意webpack4版本中 webpack 與 webpack-cli 已分離爲兩個模塊，須要都安裝，建議本地安裝便可。vue

升級webpack主要部件（PS：node版本 >= 8.9.4）

npm uninstall -D webpack webpack-bundle-analyzer webpack-dev-server webpack-merge
npm install -D webpack webpack-cli webpack-bundle-analyzer webpack-dev-server webpack-merge

升級webpack相關插件node

npm uninstall -D copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader  friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin
npm install -D copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader  friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin

升級vue-loader，替換webpack相關插件webpack

npm uninstall -D vue-loader extract-text-webpack-plugin
npm install -D vue-loader mini-css-extract-plugin

配置

　　下面的配置文件都是在build文件下：git

utils.js

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

webpack.base.conf.js

const { VueLoaderPlugin } = require('vue-loader')
...
plugins: [
    // vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
    new VueLoaderPlugin()
],

// webpack4新增了一個mode配置選擇，用來表示配置模式的選擇狀況
module.exports = {
    mode: process.env.NODE_ENV,
...

webpack.prop.conf.js

// 將ExtractTextPlugin替換爲MiniCssExtraPlugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
// const ExtractTextPlugin = require('extract-text-webpack-plugin')

...
// new ExtractTextPlugin({
new MiniCssExtractPlugin({
    filename: utils.assetsPath('css/[name].[contenthash].css'),
    allChunks: true,
}),
...

// 刪除UglifyJsPlugin配置項
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
...
new UglifyJsPlugin({
    uglifyOptions: {
        compress: {
            warnings: false
        }
    },
    sourceMap: config.build.productionSourceMap,
    parallel: true
})

// 刪除CommonsChunkPlugin配置項 && 添加optimization配置項  
// new webpack.optimize.CommonsChunkPlugin({
//   name: 'vendor',
//   minChunks (module) {
//     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
// }),

// 與plugins同級
optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    },
    runtimeChunk: { name: 'runtime' }
},