Gegaran pokok, sideEffects dan CSS Vue dan Webpack: Muatkan fail CSS komponen yang tidak digunakan

Question

Kami sedang cuba memikirkan cara yang betul untuk mengendalikan pepohon CSS dalam komponen fail tunggal Vue apabila menggunakan Webpack.

Dalam package.json, saya ada: "sideEffects": ["*.css", "*.less","*.vue", This nampaknya betul menghalang komponen Vue daripada dimuatkan apabila ia tidak sepatutnya. Walau bagaimanapun, setiap teg

Answer 1

Anda boleh menggunakan MiniCssExtractPlugin untuk melakukan gegaran pokok CSS. Jika anda menggunakan scss atau sass, anda boleh menambah pemuat ini juga.

// webpack.config.js (production)
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  mode: 'production',

  entry: path.resolve('src/index.js'),

  output: {
    filename: '[name].js',
    path: path.resolve('dist'),
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          // 将css提取到文件中
          MiniCssExtractPlugin.loader,
          // 处理你的应用程序中的`.css`文件的导入
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    // 将所有的css提取到一个单独的文件中
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
}