有一些帖子使用了大量的术语来解释这个问题，然而，作为webpack 2的新手，我无法理解这个错误以及为什么会出现这个错误：
Uncaught TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (bootstrap 6c41ac6…:693)
at fn (bootstrap 6c41ac6…:114)
at Object.../../node_modules/css-loader/index.js!../../node_modules/postcss-loader/index.js!../../node_modules/sass-loader/index.js?sourceMap!../scss/app.scss (app.scss:1)
at __webpack_require__ (bootstrap 6c41ac6…:693)
at fn (bootstrap 6c41ac6…:114)
at Object.../scss/app.scss (app.scss?e0f5:4)
at __webpack_require__ (bootstrap 6c41ac6…:693)
at fn (bootstrap 6c41ac6…:114)
at Object../index.js (app-6c41ac6….js:212)
at __webpack_require__ (bootstrap 6c41ac6…:693)
我意识到错误显然是指向sass-loader，但我根本不理解如何调试它。
以下是我的webpack.dev.config.js：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const SpritePlugin = require('svg-sprite-loader/plugin');
const autoprefixer = require('autoprefixer');
// Common plugins
const plugins = [
new SpritePlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor-[hash].js',
minChunks(module) {
const context = module.context;
return context && context.indexOf('node_modules') >= 0;
},
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(nodeEnv),
},
}),
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
template: path.join(sourcePath, 'index.html'),
path: buildPath,
filename: 'index.html',
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer({
browsers: [
'last 3 version',
'ie >= 10',
],
}),
],
context: sourcePath,
},
}),
new ExtractTextPlugin({
filename: '[name].[contenthash].css',
})
];
// Common rules
const rules = [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
'babel-loader',
],
},
{
use: ExtractTextPlugin.extract({
use: ['css-loader', 'less-loader']
}),
test: /\.less$/
},
{
test: /\.jpe?g$|\.gif$|\.png$|\.ttf$|\.eot$|\.svg$/,
use: 'file-loader?name=[name].[ext]?[hash]'
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/fontwoff'
}
];
if (isProduction) {
// Production plugins
plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true,
},
output: {
comments: false,
},
}),
new ExtractTextPlugin('style-[hash].css')
);
// Production rules
rules.push(
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!postcss-loader!sass-loader',
}),
}
);
} else {
// Development plugins
plugins.push(
new webpack.HotModuleReplacementPlugin(),
new DashboardPlugin()
);
// Development rules
rules.push(
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
'style-loader',
// Using source maps breaks urls in the CSS loader
// https://github.com/webpack/css-loader/issues/232
// This comment solves it, but breaks testing from a local network
// https://github.com/webpack/css-loader/issues/232#issuecomment-240449998
// 'css-loader?sourceMap',
'css-loader',
'postcss-loader',
'sass-loader?sourceMap',
],
}
);
}
module.exports = {
devtool: isProduction ? false : 'source-map',
context: jsSourcePath,
entry: {
js: './index.js',
},
output: {
path: buildPath,
publicPath: "http://localhost:3000/",
filename: 'app-[hash].js',
},
module: {
rules,
},
resolve: {
extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
modules: [
path.resolve(__dirname, 'node_modules'),
jsSourcePath,
],
alias: {
'../../theme.config$': path.join(__dirname, 'my-semantic-theme/theme.config')
}
},
plugins
};
很多帮助将不胜感激。如果它需要标记为重复，请执行，但帮助我了解sass-loader的确切位置。
以下是package.json：
{
"name": "",
"version": "0.1.7",
"private": false,
"license": "MIT",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server",
"dev": "webpack-dashboard -t 'Marvin' -- webpack-dev-server",
"build": "rm -rf ./build && NODE_ENV=\"production\" webpack",
"lint-break-on-errors": "eslint ./source/js ./webpack.config.js -f table --ext .js --ext .jsx",
"lint": "eslint ./source/js ./webpack.config.js -f table --ext .js --ext .jsx || true",
"preview": "rm -rf ./build && NODE_ENV=\"production\" webpack-dashboard -t 'Preview Mode - Marvin' -- webpack-dev-server",
"hook-add": "prepush install",
"hook-remove": "prepush remove"
},
"devDependencies": {
"autoprefixer": "^6.5.3",
"babel-core": "^6.7.2",
"babel-eslint": "^7.1.0",
"babel-loader": "^6.2.4",
"babel-plugin-syntax-decorators": "^6.13.0",
"babel-plugin-transform-class-properties": "^6.6.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.16.0",
"babel-runtime": "^6.6.1",
"css-loader": "^0.28.4",
"eslint-config-airbnb": "^13.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.7.1",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.24.1",
"less": "^2.7.2",
"less-loader": "^4.0.4",
"node-sass": "^3.13.1",
"postcss-loader": "^2.0.6",
"prepush": "^3.1.11",
"redux-logger": "^2.7.4",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.0",
"svg-sprite-loader": "^2.1.0",
"svgo": "^0.7.2",
"svgo-loader": "^1.2.1",
"url-loader": "^0.5.7",
"webpack": "^2.2.1",
"webpack-dashboard": "^0.4.0",
"webpack-dev-server": "^2.2.1"
},
"dependencies": {
"babel-plugin-transform-semantic-ui-react-imports": "^1.3.0",
"babel-polyfill": "^6.23.0",
"es6-promise": "^3.3.1",
"eslint": "^4.1.1",
"immutable": "^3.8.1",
"isomorphic-fetch": "^2.2.1",
"prop-types": "^15.5.10",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^4.4.8",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0",
"semantic-ui-less": "^2.2.10",
"semantic-ui-react": "^0.70.0"
},
"description": "",
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/Stanko/react-redux-webpack2-boilerplate.git"
},
"keywords": [
"react",
"redux",
"webpack2",
"boilerplate"
],
"author": "",
"bugs": {
"url": "https://github.com/Stanko/react-redux-webpack2-boilerplate/issues"
}
}
以下是主要条目文件：
import React from 'react';
import ReactDOM from 'react-dom';
import "semantic-ui-less/semantic.less";
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import 'babel-polyfill';
import logger from 'dev/logger';
import rootReducer from 'reducers';
import App from 'views/App';
// Load SCSS
import '../scss/app.scss';
const isProduction = process.env.NODE_ENV === 'production';
// Creating store
let store = null;
if (isProduction) {
// In production adding only thunk middleware
const middleware = applyMiddleware(thunk);
store = createStore(
rootReducer,
middleware
);
} else {
// In development mode beside thunk
// logger and DevTools are added
const middleware = applyMiddleware(thunk, logger);
let enhancer;
// Enable DevTools if browser extension is installed
if (window.__REDUX_DEVTOOLS_EXTENSION__) { // eslint-disable-line
enhancer = compose(
middleware,
window.__REDUX_DEVTOOLS_EXTENSION__() // eslint-disable-line
);
} else {
enhancer = compose(middleware);
}
store = createStore(
rootReducer,
enhancer
);
}
// Render it to DOM
ReactDOM.render(
<Provider store={ store }>
<App />
</Provider>,
document.getElementById('root')
);