webpack - 如何使用 Vue js 和 Webpack 缩短 css 类名

Question

我正在使用 Vue.js 和 Webpack 开发单页网络应用程序。最近我遇到this post缩短CSS类。我能够从 css 文件中缩短 css 类。但是我无法从 Html 页面缩短相同的类。

以下是我从 webpack.config.js 中摘录的内容:

module.exports = {
  context,
  entry: './index.js',
  module: {
    loaders: [
      {
        include: path.resolve(__dirname, './src'),
        use:[
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              getLocalIdent: (context, localIdentName, localName) => {
                return generateScopedName(localName, context.resourcePath);
              }
            }
          }
        ],
        test: /\.css$/
      },
      {
        include: path.resolve(__dirname, './src'),
        loader: 'babel-loader',
        query: {
          plugins: [
            'transform-react-jsx',
            [
              'react-css-modules',
              {
                context: context,
                generateScopedName: '[path]___[name]__[local]___[hash:base64:5]',
                webpackHotModuleReloading: false
              }
            ]
          ]
        },
        test: /\.js$/
      }
    ]
  },
  output: {
    filename: '[name].js'
  },
  stats: 'minimal'
};

Answer 1

你应该做三件事:

1>替换css className并记录一个map Record ;

2> 遍历 html 和 jsx 以获取静态类名和动态“类名”，其中包括类名属性中的表达式和模板语法；

3>vue template、html、js中的动态className，要用vue的方式解析并替换，这是最难的。

此外，我正在研究通过上述方式缩短微信小程序类名。但是动态语法部分是最重要的也是最困难的，因为在编写编译逻辑时需要考虑很多情况。而coder应该非常熟悉vue编译规则的过程。但是，由于vue和微信小程序一样是一个动态的模板结构，我们很难摆脱monkey-patching的方式。您可以在 vue-cli ( https://github.com/vuejs/vue-cli/issues/3884 ) 中看到相同的问题。

不过，我发现可能还有其他方法可以解决这个问题。使用 css 模块和常规的 css 类名编码规则，您可以轻松做到这一点。