webpack不生成css文件答案

【问题标题】：webpack not generating css filewebpack不生成css文件
【发布时间】：2018-01-28 16:41:58
【问题描述】：

实现webpack asset management tutorial .but webpack 没有在输出路径中生成 css 文件

webpack.config.js

const config = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/build'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(jpeg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]'
            }
          }
        ]
      }
    ]
  }
};

index.js

  import './style.css';
  import Icon from './yo1.jpg';

  function component() {
    var element = document.createElement('div');

    element.innerHTML = 'hello webpack'
    element.classList.add('hello');

    var myIcon = new Image();
    myIcon.src = Icon;

    element.appendChild(myIcon);

    return element;
  }

  document.body.appendChild(component());

问题

图像在构建文件夹中很好地创建

但是

它没有在 build 文件夹中创建 style.css，我在做什么错？

【问题讨论】：

标签： webpack webpack-2 webpack-style-loader css-loader

【解决方案1】：

webpack 不会创建单独的 css 文件。它与 javascript 捆绑在一起，并通过 webpack 引导代码作为 style 标签注入到 DOM 中。

如果要创建单独的 css 文件，可以使用 ExtractTextPlugin - https://github.com/webpack-contrib/extract-text-webpack-plugin

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

【讨论】：

【解决方案2】：

ExtractTextPlugin 已弃用试试https://github.com/webpack-contrib/mini-css-extract-plugin：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // all options are optional
      filename: '[name].css',
      chunkFilename: '[id].css',
      ignoreOrder: false, // Enable to remove warnings about conflicting order
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it uses publicPath in webpackOptions.output
              publicPath: '../',
              hmr: process.env.NODE_ENV === 'development',
            },
          },
          'css-loader',
        ],
      },
    ],
  },
};

【讨论】：