Начало работы с плагином mini-css-extract-plugin

Webpack

предисловие

До webpack 4.0 мы извлекали стили css из js-файлов в отдельные css-файлы с помощью плагина extract-text-webpack-plugin. Плюсы и минусы плагина extract-text-webpack-plugin:

image.png
Для более подробного ознакомления см. ход:Webpack.doc — это China.org/plugins/ext…

После webpack 4.0 официально рекомендуется использовать плагин mini-css-extract-plugin для упаковки CSS-файлов (извлечение CSS-кода из CSS-файлов в отдельные файлы, сжатие CSS-кодов и т. д.).

инструкции

Поместите все файлы конфигурации в корневой каталог проекта и запуститеpackage.jsonкоманда в . Конечно, для базовой настройки входа и выхода веб-пакета необходимо обратиться к официальной документации веб-сайта для завершения настройки.

Чтобы быть ближе к реальному сценарию приложения, на этот раз используются три файла конфигурации, чтобы объяснить их конфигурации и меры предосторожности соответственно.

webpack.common.js (общий файл конфигурации)

  • Конфигурация, совместно используемая средой разработки и производственной средой, с помощьюwebpack-mergeПлагины можно объединять со средами разработки или производства, тем самым уменьшая дублирование конфигурации.
  • Представлены переменные среды Node.process.env.NODE_ENV, вы можете динамически изменять конфигурацию в соответствии с входящими параметрами среды, подробности см. в коде.
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,  // 可以打包后缀为sass/scss/css的文件
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // 这里可以指定一个 publicPath
              // 默认使用 webpackOptions.output中的publicPath
              // publicPath的配置，和plugins中设置的filename和chunkFilename的名字有关
              // 如果打包后，background属性中的图片显示不出来，请检查publicPath的配置是否有误
              publicPath: './',  
              // publicPath: devMode ? './' : '../',   // 根据不同环境指定不同的publicPath
              hmr: devMode, // 仅dev环境启用HMR功能
            },
          },
          'css-loader',
          'sass-loader'
        ],
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      // 这里的配置和webpackOptions.output中的配置相似
      // 即可以通过在名字前加路径，来决定打包后的文件存在的路径
      filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
      chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',
    })
  ]
}

webpack.dev.js (файл конфигурации для среды разработки)

  • Конфигурация среды разработки, не забудьте поставитьmodeУстановить какdevelopmentрежим, иначе webpack4 по умолчанию будетproductionмодель.
const merge = require('webpack-merge')
const common = require('./webpack.common')
const webpack = require('webpack')

module.exports = merge(common, {
  mode: 'development'
})

webpack.prod.js (файл конфигурации для рабочей среды)

  • Конфигурация производственной среды, встряхивание деревьев и сжатие кода js включены по умолчанию;
  • пройти черезoptimize-css-assets-webpack-pluginПлагин умеет сжимать css, при этом должен быть указан плагин сжатия js (в примере используетсяterser-webpack-pluginплагин), иначе webpack больше не будет сжимать файлы js;
  • настраиватьoptimization.splitChunks.cacheGroups, вы можете извлечь блоки кода css в отдельные файлы.
const path = require('path')
const merge = require('webpack-merge')
const common = require('./webpack.common')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = merge(common, {
  mode: 'production', 
  optimization: {
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true,
        },
      }
    },
  }
})

файл конфигурации package.json

  • побочные эффекты:Когда производственная среда упакована, встряхивание дерева будет включено по умолчанию, если не установленоsideEffects, некоторые черезimportФайлы CSS, импортированные таким образом, могут быть не упакованы, потому что древовидная тряска отбрасывает файлы, которые ничего не экспортируют (т. е. в файле нет ключевого слова export).Итак, не хотите, чтобы файлы дрожали, пожалуйста, вsideEffectsНастройте соответствующее регулярное выражение в (ниже добавьте его в package.json).
  • NODE_ENV:Поскольку в проекте используется переменная окружения Node, ее необходимо упаковать черезNODE_ENVПередайте переменные среды. Конфигурация здесь не проблема в работе macOS.Для друзей системы Windows вы можете установитьcross-envпакет npm, как использовать (установитьnpm i cross-env -S, добавьте "cross-env" перед командой, например: "scriipt":{ "dev": "cross-env NODE_ENV=development webpack --config webpack.dev.js --progress" }).
{
  "sideEffects": [
    "*.css",
    "*.scss",
    "*.sass"
  ],
  "scripts": {
    "build": "NODE_ENV=production webpack --config webpack.prod.js --progress", // 生产环境打包
    "dev": "NODE_ENV=development webpack --config webpack.dev.js --progress", // dev环境打包
  },
}

Суммировать

  • Для упаковки в разных средах, если изображение не может отображаться (особенно изображение в css), проверьтеpublicPathКонфигурация.
  • mode: 'production'Tree-shaking и сжатие кода js будут включены, но конфигурацияoptimization. minimizerОтключит сжатие по умолчанию. Поэтому при указании плагина сжатия css обязательно укажите плагин сжатия js.
  • mini-css-extract-pluginплагин, комбинированныйoptimization.splitChunks.cacheGroupsКонфигурация, вы можете упаковать код css в отдельный файл css, и вы можете установить путь хранения (путем установки плагинаfilenameиchunkFilename).

Официальная документация:Веб-пакет.Просто .org/plugins/people…

Если есть ошибки, исправьте их в комментариях!

Категории