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

【问题标题】：How do I use Webpack 4 to export vendor CSS如何使用 Webpack 4 导出供应商 CSS
【发布时间】：2018-05-08 20:34:54
【问题描述】：

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

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

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

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

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

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

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

感谢您的帮助！

【问题讨论】：

标签： webpack vue.js

【解决方案1】：

您可以向您的应用程序添加额外的js 入口点，这将只导入Bootstrap.css，并将其命名为您想要的任何名称。这将生成具有该名称的 css 文件。

【讨论】：

感谢您的建议。有没有办法防止bootstrap.js 脚本标签被注入到index.html 中？
跟webpack-html-pluhin有关，可以看它的选项，试试看excludeChunks
感谢您的跟进，webpack-html-plugin 文档让我大开眼界，并把我带到了 css-entry 插件，它更干净一些。

【解决方案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...

【讨论】：