Webpack 控制输出的 CSS 文件名

Question

我想控制由Vue应用程序和Webpack生成的文件的文件名。 我想要托管构建好的应用程序的环境不喜欢带有点号“.”的文件名（别问我为什么）。通过使用vue.config.js configureWebpack入口中的output.filename，我已经可以通过获取js文件来遵守“连字符”命名方案，但是css文件没有重命名。因为我正在加载两个打包文件而不是块，所以我可以手动重命名单个css文件。 但是运行时会出现错误。

Error: Loading CSS chunk error failed.
(/my-path/resources/css/error.d0f9a634.css)

我希望在构建过程中强制所有CSS文件（包括错误文件）重命名。

我的vue.config.js文件：

module.exports = {
  outputDir: path.resolve(__dirname, 'dist'),
  publicPath: "/my-path/resources",
  configureWebpack: {
    optimization: {
      splitChunks: false
    },
      output: {
        filename: "[name]-js",
        chunkFilename: "[name]-chunk-js",
        // get cssFilename() {
        //   return "[name]-css";
        // }
    },
    resolve: {
      alias: {
        'vue$': path.resolve('./node_modules/vue/dist/vue.common.js'),
      },
    },
  },
  // https://cli.vuejs.org/config/#productionsourcemap
  productionSourceMap: false,
  
  // https://cli.vuejs.org/config/#css-extract
  css: {
    extract: { ignoreOrder: true },
    loaderOptions: {
      sass: {
        prependData: '@import \'~@/assets/scss/vuetify/variables\''
      },
      scss: {
        prependData: '@import \'~@/assets/scss/vuetify/variables\';'
      }
    }
  },
  // ...
}

我已经开始研究 MiniCssExtractPlugin，但不确定这是否是正确的方向。任何帮助都将不胜感激。

- Dazed

Answer 1

我通过vue.config.js中的css.extract元素找到了一个可行的解决方案。

 configureWebpack: {
    optimization: {
      splitChunks: false
    },
    output: {
       filename: "js/[name]-js",
       chunkFilename: "js/[name]-chunk-js",
    },
    ...
  },

  // https://cli.vuejs.org/config/#css-extract
  css: {
    extract: { 
      ignoreOrder: true,
      filename: 'css/[name]-css',
      chunkFilename: 'css/[name]-chunk-css', 
    },
    loaderOptions: {
      sass: {
        prependData: '@import \'~@/assets/scss/vuetify/variables\''
      },
      scss: {
        prependData: '@import \'~@/assets/scss/vuetify/variables\';'
      }
    }
  },
  ...

根据css.extract的文档，它说

如果你想进一步配置这个插件，你可以传递一个选项对象给mini-css-extract-plugin，而不是一个true值。

并且这在webpack mini-css-extract-plugin文档中有详细介绍。

- Dazed