webpack输出CSS文件

Question

我试图让webpack为我的少而不是内联样式输出一个css文件。 我一直在使用extract-text-webpack-plugin 。

我已经根据文档进行了设置，并查看了关于stackoverflow的类似问题，但无法弄清楚为什么我下面的webpack配置文件不输出文件或在index.html中放入任何内容

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: [
      'webpack/hot/only-dev-server',
      './app/main.js'
    ],
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
              test: /\.js?$/,
              loaders: ['react-hot', 'babel'],
              exclude: /node_modules/
            },
            {
              test: /\.js$/,
              exclude: /node_modules/,
              loader: 'babel-loader'
            },
            {
              test: /\.less$/,
              loader: ExtractTextPlugin.extract('style', 'css!less')
              //loader: "style!css!less"
            }
        ]
    },
    plugins: [
      new webpack.NoErrorsPlugin(),
      new ExtractTextPlugin('[name].css', {
            allChunks: true
        })
    ]

};

Answer 1

实际上，在当前状态下，您需要手动嵌入CSS。

但是，如果您使用HTML Webpack插件 （强烈建议使用（-:)，则会自动注入它，如文档所述）：

如果您在webpack的输出中有任何CSS资源（例如，用ExtractTextPlugin提取的CSS），则这些资源将包含在HTML头中的<link>标记中。

Answer 2

据我了解使用这样的装载机：

{
   test: /\.less$/,
   loaders: ['style', 'css', 'less']
}

通过npm安装css-loader，style-loader和less-loader。 在您的入口点，需要的文件更少，它们将作为样式应用于您的index.html文件。 无需添加任何html标签。