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

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

在我的

App.vue

组件的样式块中，我可以将

bootstrap.scss

导入到我的

main.js

包中，然后使用

mini css extract plugin

将其导出到

main.css

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

我想知道，如何让它将引导（供应商）CSS导出到自己命名的散列块中？并将自定义CSS保存在自己命名的哈希块中

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

类似地，有没有一种方法可以显式地命名我的引导CSS导入

---

谢谢你的帮助

你可以向你的应用程序添加额外的

js

入口点，该入口点只导入

Bootstrap.css

，并根据需要命名。这将生成具有该名称的css文件。

我偶然发现了css条目webpack插件，它可以干净地创建仅css的捆绑包

---

不幸的是，此插件似乎还不支持Webpack4…

感谢您的建议。有没有办法防止

bootstrap.js

script标签被注入

index.html

？它与webpack html pluhin相关，你可以检查它的选项，尝试检查

excludeChunks

谢谢你的后续行动，webpack html插件文档让我大开眼界，让我找到了css条目插件，它稍微干净一点。

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"
      }
    })
  ]
};