<p>Kami sedang cuba memikirkan cara yang betul untuk mengendalikan pepohon CSS dalam komponen fail tunggal Vue apabila menggunakan Webpack. </p> <p>Dalam package.json, saya ada: <code>"sideEffects": ["*.css", "*.less","*.vue", This nampaknya betul menghalang komponen Vue daripada dimuatkan apabila ia tidak sepatutnya. Walau bagaimanapun, setiap teg <kod><style></code> akan dimuatkan ke halaman. </p> <p>Kami memuatkan SFC kami daripada pakej NPM, yang menyenaraikan satu siri eksport, contohnya: </p> <pre class="brush:php;toolbar:false;">eksport blah daripada 'blah.vue'; eksport blah2 daripada 'blah2.vue'; eksport blah3 daripada 'blah3.vue';</pre> <p>Walaupun kami hanya mempunyai <kod>import { blah3 } daripada 'a-npm-package';</code> Memandangkan kami mempunyai banyak komponen Vue, ini menyebabkan banyak CSS yang tidak digunakan ditambahkan pada halaman. </p> <p>Bagaimanakah kita menghalang perkara ini daripada berlaku? Pasti ada cara pengendalian gaya yang lebih baik dan lebih dinamik daripada hanya membuang semuanya ke dalam halaman, walaupun hanya 1/10 daripadanya digunakan. </p> <p>Terima kasih</p>

// 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',
    }),
  ],
}