Must first make fun of webpack5.x, step on the pit to step on the cry, a small summary, not respect ~

1. webpack-dev-serverUnable to start project

Solution: Note the webpack-dev-server version

// package.json
{
  "scripts": {
    // webpack-dev-server 4.x
    "serve": "webpack-dev-server --config webpack.dev.js"

    // webpack-dev-server 5.x
    "serve": "webpack server --config webpack.dev.js"}}Copy the code

2. An error occurs after the project is started

Error: getaddrinfo ENOTFOUND localhost at GetAddrInfoReqWrap.onlookup [as oncomplete]

Solution: Enable 127.0.0.1 for the local host

3. devtool

webpack/devtool

module.exports = {
  // webpack 4.x
  devtool: 'cheap-eval-module-source-map'.// webpack 5.x
  devtool: 'eval-cheap-module-source-map'
}
Copy the code

4. Openhot: trueBut hot updates don’t work

The solution needs to be compatible with WebPack 5.x

webpack-dev-server/issues2758

module.exports = {
  target: 'web'.// WebPack5.x is added to the hot update
}
Copy the code

One more issue to note: If you use the mini-CSs-extract-plugin (which introduces styles as links instead of style tag injection), hot updates to styles are not valid.

Solution: You need to determine the development mode to use style injection form, otherwise use link reference form

// webpack.common.js

// Whether developer mode
constdevMode = process.env.NODE_ENV ! = ='production'
module.exports = {
  module: {
    rules: [{test: /\.css$/,
        exclude: /node_modules/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader'] {},test: /\.less$/,
        exclude: /node_modules/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader'.'less-loader'
        ] / / less}}},]Copy the code

5. The correct HTML – webpack – the plugin

DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.

Solution: Compatible with WebPack 5.x

webpack/issues11997

yarn add html-webpack-plugin@next --dev
Copy the code

6. Usehtml-webpack-pluginAn error

ERROR in Conflict: Multiple assets emit different content to the same filename index.html

Note: The index.html file will be generated after using html-webpack-plugin, and an error will be reported

Solution:

① Remove the public/index.html file

② Place the files in public/index.html under SRC and change the template path to SRC /index.html

③ Use the templateContent attribute to define your own HTML template

// webpack.common.js
const { templateContent } = require('./template')

module.exports = {
  plugins: [
    // Webpack 5.x reported a duplicate file error resolution
    new HtmlWebpackPlugin({
      url: '/'.title: 'My Webpack'.filename: 'index.html'
      // template: './public/index.html', // Method 1: remove the file
      // template: './ SRC /index.html', // Method 2: Put the template file in another path
      templateContent: ({ htmlWebpackPlugin }) = > templateContent(htmlWebpackPlugin), // Method 3 writes itself using the templateContent attribute})],}Copy the code
// template/index.js
// html-webpack-plugin belongs to the template file in the form of the templateContent property
function templateContent (htmlWebpackPlugin) {
  return ` <! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta <link rel="icon" href="${htmlWebpackPlugin.options.url}favicon.ico">
        <title>${htmlWebpackPlugin.options.title}</title>
      </head>
      <body>
        <noscript>
          <strong>We're sorry but ${htmlWebpackPlugin.options.title}doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <! -- built files will be auto injected --> </body> </html>`
}

module.exports = { templateContent }
Copy the code

7. Usewebpack-mergeAn error

TypeError: merge is not a function

Webpack-merge provides the ability to merge arrays and merge objects to create new objects

Solution: Compatible with WebPack 5.x

// webpack 4.x
const merge = require('webpack-merge')

// webpack 5.x
const { merge } = require('webpack-merge')

// Then you can merge
const common = require('./webpack.common')

module.exports = merge(common, {
  ... / / configuration
}
Copy the code

Use 8.copy-webpack-pluginAn error

ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.

Solution: Compatible with WebPack 5.x

 module.exports = {
  plugins: [
    // webpack 4.x 
    new CopyWebpackPlugin(['public'])

    // webpack 5.x
    new CopyWebpackPlugin({
      patterns: [{from: 'public'.to: 'public'}]}]}Copy the code

Use 9.optimize-css-assets-webpack-pluginThere will be the following warning, but does not affect packaging

[DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hook.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)(Use node --trace-deprecation ... to show where the warning was created)

Fixed: webpack 5.x issue, you can consider changing the plugin (officially deprecated)

optimize-css-assets-webpack-plugin/issues134

yarn add css-assets-webpack-plugin --dev
Copy the code

Installed 10.imagemin-webpack-pluginDependency failed, promptautoreconf: command not found

Solution:

MacOS without BREW installed should be installed first

Brew official can see the install command.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Copy the code

Once installed, use BREW to install autoreconf

brew install autoconf automake libtool
Copy the code

Then you can continue with the installation