css-loader - webpack2打包时css文件提取失败

问题描述

问 题

用webpack2打包时提示如下错误

文件结构和webpack配置文件如下

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

module.exports = {
  entry: './src/index.js',
  
  output: {
    filename: './src/index.js',
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: "ts-loader",
        exclude: "/node_modules/",
      },
      {
        test: /\.html$/,
        loader: "html-loader",
      },
      {
        test: /\.js$/,
        exclude: "/node_modules/",
        use: ['babel-loader','eslint-loader'],
      },
      {
        test: /\.css$/,
        use: ['css-loader','style-loader'],
      }
    ]
  },

  devtool: "eval-source-map",
  
  devServer: {
      // 配置监听接口
      port: 8080,

      // historyApiFallback用来配置页面重定向
      historyApiFallback: true
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html"
    })
  ]
}

最后请大神帮忙看下是什么原因，跪谢！！

解决方案

原因已找到，是因为css的两个loader顺序写反了，应该是use: ['style-loader','css-loader']

这篇关于css-loader - webpack2打包时css文件提取失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！