webpack不生成css文件

Question

实现webpack资产管理教程.但是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]'
            }
          }
        ]
      }
    ]
  }
};

索引.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());

问题

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

但

它不会在构建文件夹中创建 style.css，我在做什么错？

Answer 1

webpack 不会创建单独的 css 文件。它与 javascript 捆绑在一起，并style通过 webpack 引导代码作为标签注入到 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"),
  ]
}

Answer 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',
        ],
      },
    ],
  },
};