webpack3 升級 webpack4踩坑記錄

時間 2019-11-08

標籤 webpack3 webpack 升級 webpack4 記錄简体版

原文原文鏈接

本篇不包含全部坑，暫時只記錄本身踩到的部分坑

一.安裝

安裝webpack4最新版本javascript

npm install --save-dev webpack@4

安裝新增依賴 webpack-cli css

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

npm install --save-dev webpack-cli

二.運行

執行本地打包以及運行操做java

npm run build:dll
npm run start

記得添加modenode

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

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

其中遇到的報錯：webpack

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

UglifyJsPlugin是用來對js文件進行壓縮git

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

安裝uglifyjs-webpack-pluginweb

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替代。

我記錄下本身更新這個的過程，如下前半部分能夠直接跳過。

更新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

3、新增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, 主要更改點：

添加rule
添加須要處理的文件後綴，'.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>
    )
  }
}

參考資料