webpack2打包时css文件提取失败

发布于 2022-09-04 13:07:20 字数 1286 浏览 21 评论 0

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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

白况 2022-09-11 13:07:20

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文