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的選項