webpack不生成css文件

Posted 2023-02-21

【中文标题】webpack不生成css文件

【英文标题】：webpack not generating css file

【发布时间】：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，我在做什么错？

【参考方案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',
        ],
      ,
    ],
  ,
;