Tree shake, sideEffects et CSS de Vue et Webpack : charger les fichiers CSS des composants inutilisés

Question

Nous essayons de trouver la bonne façon de gérer les arbres CSS dans les composants de fichier unique de Vue lors de l'utilisation de Webpack.

Dans package.json, j'ai : "sideEffects" : ["*.css", "*.less", "*.vue" ] semble empêcher correctement les composants Vue de se charger alors qu'ils ne le devraient pas. Cependant, chaque balise

Answer 1

Vous pouvez utiliser MiniCssExtractPlugin pour effectuer une secousse d'arborescence CSS. Si vous utilisez scss ou sass, vous pouvez également ajouter ces chargeurs.

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