webpack3 升級 webpack4踩坑記錄

一.安裝

安裝webpack4最新版本

npm install --save-dev webpack@4

安裝新增依賴 webpack-cli

這個在webpack3中，webpack本身和它的CLI是在同一個包中，webpack4中將兩個分開管理。

npm install --save-dev webpack-cli

 

二.運行

執行本地打包以及運行操作

npm run build:dll npm run start

記得添加mode

用來告知 webpack 使用相應環境的內置優化

module.exports = { mode: 'production' //或者 'development' };

其中遇到的報錯：

1.Error:webpack.optimize.UglifyjsPlugin has been removed,pleaseuseconfig.optimization.minimizeinstead.

UglifyjsPlugin是用來對js文件進行壓縮

webpack4中UglifyJsPlugin被廢除，需要安裝新的插件uglifyjs-webpack-plugin進行替換，見官方文檔

安裝uglifyjs-webpack-plugin

npm install uglifyjs-webpack-plugin --save-dev

更改 webpack.dll.config.js || webpack.prod.config.js

去除

-  new webpack.optimize.UglifyJsPlugin({ - compress: { - warnings: false - }, - mangle: { - safari10: true, - }, - output: { - comments: false, - ascii_only: true, - }, - sourceMap: false, - comments: false - }),

添加

const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); ... optimization: { //與entry同級 minimizer: [ new UglifyJsPlugin({ uglifyOptions: { compress: false, mangle: true, output: { comments: false, }, }, sourceMap: false, }) ] }, 

注意：uglifyjs-webpack-plugin更多的配置請參考詳細配置

2.Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

CommonsChunkPlugin 主要是用來提取第三方庫和公共模塊

CommonsChunkPlugin 已被移除，用splitChunks替代，見官方文檔

更改webpack.base.config.js

去除

// new webpack.optimize.CommonsChunkPlugin({ // children: true, // async: true, // minChunks: 2, // }),

添加

optimization: { splitChunks: { chunks: 'async', minChunks: 2, }, },

注意：splitChunks更多的配置請參考詳細配置

3.compilation.mainTemplate.applyPluginsWaterfall is not a function

更新html-webpack-plugin到最新版本

npm install html-webpack-plugin@latest --save-dev

4.Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

這個最后解決方式是用mini-css-extract-plugin替代。

我記錄下自己更新這個的過程，以下前半部分可以直接跳過。

1. 更新extract-webpack-plugin到最新版本

npm install --save-dev extract-text-webpack-plugin@4.0.0-beta.0

繼續報錯

Path variable [contenthash] not implemented in this context: static/css/style.[contenthash].css

在之前版本中我們使用extract-text-webpack-plugin來提取CSS文件，不過在webpack 4.x中則應該使用mini-css-extract-plugin來提取CSS到單獨文件中

更改如下

這是基於webpack 3.0

const utils = require('./utils') const ExtractTextPlugin = require('extract-text-webpack-plugin') module.exports = { //... new ExtractTextPlugin({ filename: utils.assetsPath('css/[name].[contenthash:7].css') }) }

基於webpack 4.0

const utils = require('./utils') const MiniCssExtractPlugin = require('mini-css-extract-plugin') module.exports = { //... new MiniCssExtractPlugin({ filename: utils.assetsPath('css/[name].[contenthash:7].css') }) }

css 以及 mini-css-extract-plugin 的 rule配置

module: { rules: [ { test: /\.(css|less)$/, use: [ { loader: MiniCssExtractPlugin.loader, }, { loader: 'css-loader', options: { modules: true, importLoaders: 1, localIdentName: '[local]' } }, { loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // react doesn't support IE8 anyway ], flexbox: 'no-2009', }), ], } }, { loader: 'less-loader', options: { modifyvars: theme } } ] }, ], },

5.TypeError: webpack.optimize.DedupePlugin is not a constructor

DedupePlugin是用來查找相等或近似的模塊，避免在最終生成的文件中出現重復的模塊

已經被廢除，刪除即可，見官網

6.FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of...

這個是內存溢出了，需要在啟動命令中加一個空間 --max_old_space_size=4096

"scripts": { "start": "better-npm-run start", }, "betterScripts": { "start": { "command": "node --max_old_space_size=4096 build/server.js", "env": { "NODE_ENV": "development", "DEPLOY_ENV": "", "PUBLIC_URL": "", "PORT": "8082" } }, }

7.最后還有一個大坑

offline-plugin插件，配置service worker。這個插件的報錯同以上UglifyJsPlugin的報錯。

只需要更新到最新版本即可。

以下記錄踩坑過程。

Error:webpack.optimize.UglifyJsPlugin has been removed,pleaseuseconfig.optimization.minimizeinstead.

因此導致我，刪了好幾次UglifyJsPlugin以及uglifyjs-webpack-plugin相關的所有代碼，然后依然報錯。

又以為是緩存問題，我重啟了vscode，重啟了終端，電腦也嘗試重啟一遍，依然報錯。

最后逐行注釋代碼，運行打包操作，發現是offline-plugin插件的問題。

問題所在：offline-plugin5.0以前的版本會帶有webpack.optimize.UglifyJsPlugin操作，最新的應該做了些處理。

詳情參考

最后處理方式，更新offline-plugin到最新的版本

npm install offline-plugin --save-dev

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

三、新增TypeScript的打包

安裝

npm install --save-dev typescript ts-loader

添加tsconfig.json文件

可以利用ts初始化命令自動添加

tsc --init

也可以手動新增文件。

其中配置詳情如下，具體查閱tsconfig.json配置詳情

{
  "compilerOptions": { "outDir": "./dist/", "noImplicitAny": true, "module": "commonjs", "target": "es5", "jsx": "react", "allowJs": true, "moduleResolution": "node", "esModuleInterop": true, "experimentalDecorators": true, "noUnusedParameters": true, "noUnusedLocals": true, }, "module": "ESNext", "exclude": ["node_modules"] }

配置 webpack 處理 TypeScript, 主要更改點：

1. 添加rule
2. 添加需要處理的文件后綴，'.ts'、'.tsx'等

rules: [
  {
    test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ } ] resolve: { extensions: [ '.tsx', '.ts', '.js' ] },

測試文件TestTsLoader.tsx

用來檢測是否配置成功，導入相應頁面即可測試。實測ok

import * as React from "react" interface TsProps { name: string company: string } export default class TestTsLoader extends React.Component<TsProps, {}> { render() { return ( <h1> Hello, I am {this.props.name}, I in {this.props.company} now! </h1> ) } }