webpack2打包时css文件提取失败

witzzy
  • 131

用webpack2打包时提示如下错误

clipboard.png

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

clipboard.png

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"
    })
  ]
}

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

回复
阅读 4.9k
1 个回答
✓ 已被采纳

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

宣传栏