微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在 Webpack 中运行与 CSS 相关的其他构建步骤?

如何解决如何在 Webpack 中运行与 CSS 相关的其他构建步骤?

说到 CSS,我有一个简单的设置,它允许我同时拥有全局和 modules CSS:

{
    test: /\.css$/,use: [
      MiniCssExtractPlugin.loader,{
        loader: 'css-loader',options: {
          importLoaders: 1,modules: {
            localIdentName: '[path]__[name]__[local]__[hash:base64:5]',},],include: /\.module\.css$/,{
    test: /\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader'],exclude: /\.module\.css$/,

基本上,任何 file.css 都不会被模块包转换,而任何 file.module.css 都会转换。

在我的 webpack.js 中,我还启用了名为 pluginMininCssExtractPlugin,以便我可以将输出输出文件中:

  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',chunkFilename: '[id].css',}),

但是,我很难找到一种在其上添加内容方法。我还想有一个缩小器来减少空白,并将类从 40 个字符长的类重命名一个独特的 2-3 个字符类。

在哪里插入这些附加步骤?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。