webpack 输出 css 文件答案

【问题标题】：webpack output css filewebpack 输出 css 文件
【发布时间】：2016-01-31 09:46:21
【问题描述】：

我正在尝试让 webpack 为我的 less 而不是内联样式输出一个 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
        })
    ]

};

【问题讨论】：

它不会自动将css文件添加到index.html，您必须手动添加。例如，在您的 index.html 中，您必须添加 <link href='/dist/main.css' rel='stylesheet' type='text/css'>（href 路径只是您的 output.publicPath + [name].css 其中 [name] 是您的包名称（在本例中为 main））

标签： css less webpack webpack-dev-server

【解决方案1】：

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

但是，如果您使用HTML Webpack Plugin（我强烈推荐它 (-:)，它将自动注入，如文档所述：

如果您在 webpack 的输出中有任何 css 资源（例如，使用 ExtractTextPlugin 提取的 css），那么这些资源将包含在 HTML 头部中的 <link> 标签中。

【讨论】：

【解决方案2】：

据我了解，使用加载器：

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

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

【讨论】：