我正在尝试设置 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")
}
}
更新:已修复,但为什么?
我发现我的错误是我应该将一个对象传递给 ExtractTextPlugin.extract({ use })
中的 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
}
}
})
}
]
},
最佳答案
其实和数组的使用无关,而是和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: ...
}]
}),
]
},
关于javascript - 提取文本 webpack 插件失败 : self is not defined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42882974/