I install

Install the latest version of webpack4

npm install --save-dev webpack@4

Install new dependency webpack cli

In webpack 3, webpack itself and its CLI are in the same package, and webpack 4 manages the two separately.

npm install --save-dev webpack-cli

 

II function

Perform local packaging and run operations

npm run build:dll
npm run start

Remember to add mode

It is used to tell webpack to use the built-in optimization of the corresponding environment

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

Errors encountered:

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

UglifyjsPlugin is used to compress js files

UglifyJsPlugin in webpack4 has been abolished, and a new plug-in uglifyjs webpack plugin needs to be installed for replacement. See the official document

Install uglifyjs webpack plugin

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

Change webpack dll. config. js || webpack. prod.config. js

remove

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

add to

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

Note: for more configurations of uglifyjs webpack plugin, please refer to the detailed configuration

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

Commons chunkplugin is mainly used to extract third-party libraries and public modules

Commons chunkplugin has been removed and replaced with splitChunks. See the official document

Change.webpack base. config. js

remove

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

add to

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

Note: for more configurations of splitChunks, please refer to the detailed configuration

3.compilation.mainTemplate.applyPluginsWaterfall is not a function

Update HTML webpack plugin to the latest version

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

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

The final solution is to use mini CSS extract plugin instead.

I record the process of updating this. The first half of the following can be skipped directly.

1. Update extract webpack plugin to the latest version

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

Continue to report errors

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

In previous versions, we used extract text webpack plugin to extract CSS files, but in webpack 4 In X, you should use mini CSS extract plugin to extract CSS into a separate file

Change as follows

This is based on 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')
    })
}

Based on 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')
    })
}

rule configuration of css and mini css extract plugin

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 is used to find equal or similar modules to avoid duplicate modules in the final generated file

It has been abolished and can be deleted. See the official website

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

This is a memory overflow. You need to add a space -- Max in the startup command_ 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. Finally, there is a big pit

Offline plugin plug-in to configure service worker. The error report of this plug-in is the same as that of UglifyJsPlugin above.

Just update to the latest version.

The process of stepping on the pit is recorded below.

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

As a result, I deleted all the codes related to UglifyJsPlugin and uglifyjs webpack plugin several times, and then still reported an error.

I thought it was a cache problem. I restarted vscode, restarted the terminal, and tried to restart the computer again, but still reported an error.

Finally, comment the code line by line and run the packaging operation. It is found that it is the problem of the offline plugin plug-in.

Problem: offline-plugin5 Versions before 0 will have webpack optimize. Uglifyjsplugin operation, the latest one should be handled.

Refer to for details

Finally, update the offline plugin to the latest version

npm install offline-plugin --save-dev

Guangzhou brand design companyhttps://www.houdianzi.com PPT template downloadhttps://redbox.wode007.com

3, Packaging of new TypeScript

install

npm install --save-dev typescript ts-loader

Add tsconfig JSON file

It can be added automatically by ts initialization command

tsc --init

You can also add files manually.

The configuration details are as follows. For details, please refer to tsconfig JSON configuration details

{
  "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"]
}

Configure webpack to handle TypeScript. Main change points:

1. Add rule
2. Add the file suffix to be processed, ' ts','. tsx 'et al

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

Test file testtsloader tsx

It is used to check whether the configuration is successful. You can import the corresponding page to test. Measured 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>
    )
  }
}