Десять пит-рекордов Webpack 5.x

Webpack

Сначала я должен пожаловаться на webpack5.x.Я буду плакать, когда наступлю на яму.Маленькое резюме не является уважением~

1. webpack-dev-serverНе удалось запустить проект

Решение: обратите вниманиеwebpack-dev-serverВерсия

// 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"
  }
}

2. Сообщается об ошибке после запуска проекта

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

Решение: необходимо включить 127.0.0.1 локального хоста.

3. devtool

webpack/devtool

module.exports = {
  // webpack 4.x
  devtool: 'cheap-eval-module-source-map',

  // webpack 5.x
  devtool: 'eval-cheap-module-source-map'
}

4. Включитеhot: trueНо горячее обновление не работает

Устранить необходимость совместимости с webpack5.x

webpack-dev-server/issues2758

module.exports = {
  target: 'web', // webpack5.x 加上之后热更新才有效果
}

Также есть проблема, на которую следует обратить внимание: если вы используетеmini-css-extract-pluginплагины (вводить стили в виде ссылки вместо внедрения тега стиля), горячее обновление стилей работать не будет.

Решение: Необходимо судить о форме внедрения стиля в режиме разработки, в противном случае используйтеlinkформа цитирования

// webpack.common.js

// 是否开发者模式
const devMode = 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
      },
    ]
  }
}

5. ошибка html-webpack-плагина

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

Решение: должна быть совместима с webpack5.x

webpack/issues11997

yarn add html-webpack-plugin@next --dev

6. Используйтеhtml-webpack-pluginсообщить об ошибке

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

Инструкции: использоватьhtml-webpack-pluginПосле этого будет сгенерирован файл index.html, и в это время будет сообщено об ошибке

решить:

① Удалите файл public/index.html.

② Поместите файлы в public/index.html в src и повторно укажите путь к шаблону как src/index.html.

③ Используйте свойство templateContent, чтобы определить свой собственный HTML-шаблон.

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

module.exports = {
  plugins: [
    // webpack 5.x 报 有重复文件错误解决方法
    new HtmlWebpackPlugin({
      url: './',
      title: 'My Webpack',
      filename: 'index.html'
      // template: './public/index.html', // 方法1： 去掉此文件
      // template: './src/index.html', // 方法2：可将模板文件放入其他路径
      templateContent: ({ htmlWebpackPlugin }) => templateContent(htmlWebpackPlugin), // 方法3 使用 templateContent 属性自己写
    }),
  ],
}

// template/index.js
// html-webpack-plugin 属于templateContent 属性形式的模板文件
function templateContent (htmlWebpackPlugin) {
  return `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <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 }

7. Используйтеwebpack-mergeсообщить об ошибке

TypeError: merge is not a function

webpack-mergeпри условииmergeФункция для объединения массивов и объединения объектов для создания новых объектов

Решение: Совместимость с webpack5.x

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

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

// 接下来可以进行合并
const common = require('./webpack.common')

module.exports = merge(common, {
  ... // 配置们
}

8. Используйтеcopy-webpack-pluginсообщить об ошибке

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

Решение: Совместимость с webpack5.x

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

    // webpack 5.x
    new CopyWebpackPlugin({
      patterns: [
        { from: 'public', to: 'public' }
      ]
    })
  ]
}

9. Используйтеoptimize-css-assets-webpack-pluginБудет следующее предупреждение, но оно не повлияет на упаковку

[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)

Решение: для проблемы с webpack 5.x вы можете рассмотреть возможность замены плагина (официальный план состоит в том, чтобы объявить его устаревшим).

optimize-css-assets-webpack-plugin/issues134

yarn add css-assets-webpack-plugin --dev

10. Установкаimagemin-webpack-pluginОшибка зависимости, подсказкаautoreconf: command not found

решить:

Если в macOS не установлен brew, его необходимо сначала установить (вне стены)

официальное пивоВы можете увидеть команду установки [установка очень медленная, вам нужно терпеливо ждать...]

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

После установки используйте brew для установки autoreconf

brew install autoconf automake libtool

Затем вы можете продолжить установку

Если что-то не так с текстом, прошу поправить и покритиковать~
Категории