webpack输出CSS文件

Question

I'm trying to get webpack to output a css file for my less instead of inline styles. I've been using the extract-text-webpack-plugin .

I've set it up based on the documentation and have had a look at similar questions on stackoverflow but can't figure out why my below webpack config file is not outputting a file or putting anything in 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

In current state, indeed, you need to embed your CSS manually.

However, if you use HTML Webpack Plugin (and I strongly recommend it (-:), it will be automatically injected, as explained by documentation:

If you have any css assets in webpack's output (for example, css extracted with the ExtractTextPlugin) then these will be included with <link> tags in the HTML head.

Answer 2

From what i understand use the loader as such:

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

installing both css-loader, style-loader and less-loader via npm. in your entry point, require the less files you want and they will be applied as styles to your index.html file. No need to add any html tags.