Webpack：每个所需 css 文件的样式标签

【问题标题】：Webpack: Style tag per required css fileWebpack：每个所需 css 文件的样式标签
【发布时间】：2017-04-16 17:57:48
【问题描述】：

我希望每个所需的 .css 文件都有一个标签。

我想要这样，因为我想将 chrome dev-tools 工作区功能连接到我的 src 文件夹，所以我可以直接从浏览器编辑我的 css 文件。

这是我对装载机的研究：

style-loader 只加载到样式标签中
style-loader/url + file-loader 不起作用（我尝试了 README 示例）
extract-text-webpack-plugin 似乎只为每个默认配置的所有 css 文件生成一个包。
extract-text-webpack-plugin 中的Modify Files 部分建议使用多个入口点，可以生成多个包，因此我认为可能会滥用此功能来得到我想要的行为。

这当然是为了开发，我不打算以这种方式服务我的 css。

【问题讨论】：

标签： javascript webpack

【解决方案1】：

module: {
  rules: [
    {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader'
      })
    }
  ]
},
plugins: [ 
  new ExtractTextPlugin('[name].css'),
  new HtmlWebpackPlugin({
    template: 'path/to/your/index.html',
  })
],
resolve: {
  extensions: [ '.js', '.css' ]
}

然后在你的js文件中，做import path/to/your/stylesheet.css;对于您希望 webpack 提取的每个样式表。

注意：您需要安装 html-webpack-plugin 并像上面一样添加它，以便 webpack 可以插入对您的样式表的引用。点击HERE了解更多关于HtmlWebpackPlugin的选项

【讨论】：

我从提取文本插件中得到一个错误。你试过这个吗？