Question

我希望每个必需的.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。

Answer 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

选项的更多信息

Webpack：每个必需的css文件的样式标记

1 个答案: