Question

我正在使用Webpack 4构建一个小型Vue.js项目。

在我的App.vue组件的样式块中，我可以将bootstrap.scss导入我的main.js捆绑包，然后使用main.css将其导出到mini-css-extract-plugin。

但如果我也有自定义样式，Boostrap（供应商）CSS与我的自定义CSS混合在一起。

我想知道，怎样才能将Bootstrap（供应商）CSS导出到自己命名的哈希块中？并将自定义CSS保存在自己命名的哈希块中？

看起来您可以使用webpackChunkName魔术评论显式命名JavaScript导入：

https://webpack.js.org/api/module-methods/#import-

同样，有没有办法明确命名我的Bootstrap CSS导入？

感谢您的帮助！

Answer 1

您可以向应用添加额外的js入口点，该入口点仅导入Bootstrap.css，并根据需要为其命名。这将生成具有该名称的css文件。

Answer 2

我偶然发现了css-entry-webpack-plugin，它可以干净地创建仅限CSS的包。

https://www.npmjs.com/package/css-entry-webpack-plugin

module.exports = {
  entry: {
    "bootstrap": "node_modules/bootstrap/dist/bootstrap.css",
    "main": "src/index.js"
  },
  output: {
    path: "dist",
    filename: "[name].[hash].js"
  },
  module: {
    rules: [
      // This is required
      {
        test: /\.css$/,
        use: "css-loader"
      }
    ]
  },
  plugins: [
    new CssEntryPlugin({
      output: {
        filename: "[name].[hash].css"
      }
    })
  ]
};

不幸的是，这个插件似乎还不支持Webpack 4 ......

如何使用Webpack 4导出供应商CSS

2 个答案: