更新：已修复，但为什么？

Question

我正在尝试设置extract-text-webpack-plugin，但它失败了

ERROR in ./src/css/app.css
Module build failed: ReferenceError: self is not defined
    at /home/jiewmeng/Dropbox/finances-frontend/node_modules/style-loader/index.js!/home/jiewmeng/Dropbox/finances-frontend/node_modules/css-loader/index.js??ref--1-3!/home/jiewmeng/Dropbox/finances-frontend/src/css/app.css:103:30
    at /home/jiewmeng/Dropbox/finances-frontend/node_modules/style-loader/index.js!/home/jiewmeng/Dropbox/finances-frontend/node_modules/css-loader/index.js??ref--1-3!/home/jiewmeng/Dropbox/finances-frontend/src/css/app.css:98:47
    at module.exports.module.exports (/home/jiewmeng/Dropbox/finances-frontend/node_modules/style-loader/index.js!/home/jiewmeng/Dropbox/finances-frontend/node_modules/css-loader/index.js??ref--1-3!/home/jiewmeng/Dropbox/finances-frontend/src/css/app.css:123:68)
    at Object.<anonymous> (/home/jiewmeng/Dropbox/finances-frontend/node_modules/style-loader/index.js!/home/jiewmeng/Dropbox/finances-frontend/node_modules/css-loader/index.js??ref--1-3!/home/jiewmeng/Dropbox/finances-frontend/src/css/app.css:2526:36)
    at __webpack_require__ (/home/jiewmeng/Dropbox/finances-frontend/node_modules/style-loader/index.js!/home/jiewmeng/Dropbox/finances-frontend/node_modules/css-loader/index.js??ref--1-3!/home/jiewmeng/Dropbox/finances-frontend/src/css/app.css:21:30)
    at /home/jiewmeng/Dropbox/finances-frontend/node_modules/style-loader/index.js!/home/jiewmeng/Dropbox/finances-frontend/node_modules/css-loader/index.js??ref--1-3!/home/jiewmeng/Dropbox/finances-frontend/src/css/app.css:67:18
    at Object.<anonymous> (/home/jiewmeng/Dropbox/finances-frontend/node_modules/style-loader/index.js!/home/jiewmeng/Dropbox/finances-frontend/node_modules/css-loader/index.js??ref--1-3!/home/jiewmeng/Dropbox/finances-frontend/src/css/app.css:70:10)
    at Module._compile (module.js:570:32)
    at Object.exec (/home/jiewmeng/Dropbox/finances-frontend/node_modules/webpack/lib/NormalModule.js:98:6)
    at Object.<anonymous> (/home/jiewmeng/Dropbox/finances-frontend/node_modules/extract-text-webpack-plugin/loader.js:112:21)
    at Compiler.<anonymous> (/home/jiewmeng/Dropbox/finances-frontend/node_modules/webpack/lib/Compiler.js:280:10)
    at /home/jiewmeng/Dropbox/finances-frontend/node_modules/webpack/lib/Compiler.js:480:13
    at next (/home/jiewmeng/Dropbox/finances-frontend/node_modules/tapable/lib/Tapable.js:138:11)
    at Compiler.<anonymous> (/home/jiewmeng/Dropbox/finances-frontend/node_modules/extract-text-webpack-plugin/loader.js:93:4)
    at next (/home/jiewmeng/Dropbox/finances-frontend/node_modules/tapable/lib/Tapable.js:140:14)
    at Compiler.<anonymous> (/home/jiewmeng/Dropbox/finances-frontend/node_modules/webpack/lib/CachePlugin.js:62:5)

ERROR in /home/jiewmeng/Dropbox/finances-frontend/node_modules/extract-text-webpack-plugin/loader.js??ref--1-0!/home/jiewmeng/Dropbox/finances-frontend/node_modules/style-loader/index.js!/home/jiewmeng/Dropbox/finances-frontend/node_modules/style-loader/index.js!/home/jiewmeng/Dropbox/finances-frontend/node_modules/css-loader/index.js??ref--1-3!/home/jiewmeng/Dropbox/finances-frontend/src/css/app.css doesn't export content

这里有什么不对？我的webpack.config.js

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const ExtractTextPlugin = require("extract-text-webpack-plugin")

const context = path.resolve(__dirname, "src")

module.exports = {
  context,
  entry: "./js/index.js",
  output: {
    path: path.resolve(__dirname, "build/js"),
    filename: "index.js"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: "babel-loader",
        options: {
          plugins: [
            [
              "react-css-modules",
              {
                context
              }
            ]
          ]
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            "style-loader",
            {
              loader: "css-loader",
              options: {
                modules: true,
                importLoaders: 1,
                localIdentName: "[path]___[name]__[local]___[hash:base64:5]",
                sourceMap: true
              }
            }
          ]
        })
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
      filename: "index.html",
      inject: "body"
    }),
    new ExtractTextPlugin("app.css")
  ],
  devServer: {
    contentBase: path.resolve(__dirname, "src")
  }
}

更新：已修复，但为什么？

我发现我的错误是我应该将对象传递给use中的ExtractTextPlugin.extract({ use })，而不是我上面使用的数组，但为什么呢？

module: {
  rules: [
    {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: { // pass object instead of array, omiting the `style-loader` part but why? 
          loader: "css-loader",
          options: {
            modules: true,
            importLoaders: 1,
            localIdentName: "[path]___[name]__[local]___[hash:base64:5]",
            sourceMap: true
          }
        }
      })
    }
  ]
},

Answer 1

实际上，它与数组的使用无关，但与使用style-loader无关。

我遇到同样的问题，但是使用postcss，我通过改变解决了

module: {
  rules: [
    use: ['style-loader', 'css-loader', {
      loader: 'postcss-loader',
      options: ...
    }],
  ]
},

到

module: {
  rules: [
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: ['css-loader', {
        loader: 'postcss-loader',
        options: ...
      }]
    }),
  ]
},

extract-text-webpack-plugin失败：未定义self

更新：已修复，但为什么？

1 个答案: