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/ 檢視新安裝的包的使用方法
其他部落格：...