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

Question

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

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

这里是我的研究装载机：

1. 风格装载机仅加载到样式标签
2. 风格装载机/ URL +文件加载器不工作（我试过的README例子）
3. extract-text-webpack-plugin似乎只使用默认配置为每个所有css文件生成一个包。
4. 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的选项