Невозможно удалить неиспользованный Bootstrap CSS с помощью Webpack Config - PullRequest
Новая
       38

Невозможно удалить неиспользованный Bootstrap CSS с помощью Webpack Config

0 голосов
/ 12 апреля 2020

Используя приведенную ниже конфигурацию, я могу создать один HTML файл, содержащий весь мой код правильно, но множество неиспользуемых классов bootstrap там.

Обратите внимание, что я настраиваю Bootstrap, импортируя файлы S CSS из node_modules в файл main.scss в коде.

Где я ошибаюсь? 

const path = require('path');
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const {
  scss
} = require('svelte-preprocess');
const Dotenv = require('dotenv-webpack');
const PurgecssPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');

const prod = process.env.NODE_ENV === 'production';

module.exports = {
  module: {
    rules: [{
        test: /\.svelte$/,
        exclude: /node_modules/,
        loader: 'svelte-loader',
        options: {
          emitCss: true,
          hotReload: false,
          preprocess: require('svelte-preprocess')([scss()]),
        },
      },
      {
        test: /\.(sa|sc|c)ss$/,
        exclude: /node_modules/,
        use: [{
            loader: prod ? MiniCssExtractPlugin.loader : 'style-loader', // inject CSS to page
          },
          {
            loader: 'css-loader', // translates CSS into CommonJS modules
          },
          {
            loader: 'postcss-loader', // Run post css actions
            options: {
              plugins: function() {
                // post css plugins, can be exported to postcss.config.js
                return [require('precss'), require('autoprefixer')];
              },
            },
          },
          {
            loader: 'sass-loader', // compiles Sass to CSS
          },
        ],
      },
    ],
  },
  resolve: {
    alias: {
      svelte: path.resolve('../../node_modules', 'svelte'),
    },
    extensions: ['.mjs', '.js', '.svelte'],
    mainFields: ['svelte', 'browser', 'module', 'main'],
  },
  optimization: {
    minimizer: [
      new OptimizeCssAssetsPlugin({
        cssProcessorOptions: {
          map: {
            inline: false
          }
        },
      }),
      new TerserPlugin(),
    ],
  },
  plugins: [
    new Dotenv(),
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      minify: prod ?
        {
          collapseWhitespace: true,
          removeComments: true,
          removeRedundantAttributes: true,
          removeScriptTypeAttributes: true,
          removeStyleLinkTypeAttributes: true,
          useShortDoctype: true,
        } :
        false,
      template: 'index.html',
      inlineSource: '.(js|css)$', // embed all javascript and css inline
    }),
    new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
    new PurgecssPlugin({
      paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, {
        nodir: true
      }),
    }),
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Вот единственный и единственный файл S CSS, который я использую в проекте; он импортирован в index.js и служит единственным источником стилей для всего проекта: 

//colors
$primary: #123099;

//body
$body-bg: #3123b7;

// Required
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins/border-radius';
@import '~bootstrap/scss/mixins/buttons';
@import '~bootstrap/scss/mixins/gradients';
@import '~bootstrap/scss/mixins/list-group';
@import '~bootstrap/scss/mixins/background-variant';
@import '~bootstrap/scss/mixins/forms';
@import '~bootstrap/scss/mixins/grid';
@import '~bootstrap/scss/mixins/grid-framework';
@import '~bootstrap/scss/mixins/box-shadow';
@import '~bootstrap/scss/mixins/transition';
@import '~bootstrap/scss/mixins/hover';
@import '~bootstrap/scss/mixins/size';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~bootstrap/scss/mixins/text-truncate';
@import '~bootstrap/scss/mixins/deprecate';
@import '~bootstrap/scss/mixins/text-hide';
@import '~bootstrap/scss/mixins/text-emphasis';
@import '~bootstrap/scss/vendor/rfs';
@import '~bootstrap/scss/reboot';

// Optional
@import '~bootstrap/scss/utilities/spacing';
@import '~bootstrap/scss/utilities/sizing';
@import '~bootstrap/scss/utilities/flex';
@import '~bootstrap/scss/utilities/borders';
@import '~bootstrap/scss/utilities/text';
@import '~bootstrap/scss/utilities/background';
@import '~bootstrap/scss/utilities/shadows';
@import '~bootstrap/scss/utilities/display';
@import '~bootstrap/scss/utilities/position';
@import '~bootstrap/scss/grid';
@import '~bootstrap/scss/card';
@import '~bootstrap/scss/forms';
@import '~bootstrap/scss/buttons';
@import '~bootstrap/scss/list-group';
@import '~bootstrap/scss/custom-forms';
@import '~bootstrap/scss/spinners';

1 Ответ

1 голос
/ 16 апреля 2020

Вы должны внести в белый список Bootstrap CSS файл, используя purgecss-whitelister Очистить css плагин.

Установить purgecss-whitelister используя npm i -D purgecss-whitelister и затем используйте whitelister для Bootstrap CSS файла, который вы обычно импортируете bootstrap/dist/css/bootstrap.css: 

const whitelister = require('purgecss-whitelister');
...

module.exports = {
  ...
  plugins: [
    ...
    new PurgecssPlugin({
      keyframes: false,
      paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, {
        nodir: true
      }),
      whitelist: whitelister('bootstrap/dist/css/bootstrap.css')
    }),
  ],
}

Затем соберите и у вас будет bundle.css, включая только Bootstrap CSS классы, которые вы на самом деле используете. Например, используя только классы container, btn и btn-primary Bootstrap, мой размер bundle.css уменьшился до 4.84 KiB вместо 193 KiB перед использованием purgecss-webpack-plugin с purgecss-whitelister.

...