【发布时间】：2017-06-01 22:17:56
【问题描述】：
按照surviveJS 电子书，我正在尝试为我的 ReactJS 项目设置 webpack 配置。
在运行我的启动脚本时，我收到以下错误：
./app/index.js 中的错误模块解析失败： /Users/shooshte/PersonalProjects/surviveJS/node_modules/eslint-loader/index.js!/Users/shooshte/PersonalProjects/surviveJS/app/index.js 意外令牌 (5:0) 您可能需要适当的加载程序来处理 这种文件类型。 | | ReactDOM.render(| 你好世界，|
document.getElementById('app') | ); @ 多 (webpack)-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server babel-polyfill ./app
这是我的 index.js：
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello world</div>,
document.getElementById('app')
);
我的 webpack 配置：
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackTemplate = require('html-webpack-template');
const merge = require('webpack-merge');
const parts = require('./webpack.parts');
const PATHS = {
app: path.join(__dirname, 'app'),
build: path.join(__dirname, 'build')
};
const common = merge(
{
entry: {
app: ['babel-polyfill', PATHS.app]
},
resolve: {
extensions: ['.js', '.jsx']
},
output: {
path: PATHS.build,
filename: '[name].js'
},
plugins: [
new HtmlWebpackPlugin({
template: HtmlWebpackTemplate,
title: 'ReactJS Boilerplate',
appMountID: 'app',
mobile: true,
inject: false
})
]
},
parts.loadFonts(PATHS.app),
parts.loadImages(PATHS.app),
parts.lintCSS(PATHS.app),
parts.lintJavaScript(PATHS.app)
);
module.exports = function(env) {
if(env === 'production') {
return merge(
common,
{
output: {
chunkFilename: 'scripts/[chunkhash].js',
filename: '[name].[chunkhash].js',
// Tweak this to match your GitHub project name
publicPath: '/surviveJS/'
},
plugins: [
new webpack.HashedModuleIdsPlugin()
]
},
parts.setFreeVariable(
'process.env.NODE_ENV',
'production'
),
parts.loadJavaScript(PATHS.app),
parts.minifyJavaScript(PATHS.app),
parts.extractBundles([
{
name: 'vendor',
entries: ['react']
},
{
name: 'manifest'
}
]),
parts.clean(PATHS.build),
parts.generateSourcemaps('source-map'),
parts.extractSASS(),
parts.purifyCSS(PATHS.app)
);
}
return merge(
common,
{
performance: {
hints: false
},
plugins: [
new webpack.NamedModulesPlugin()
]
},
parts.generateSourcemaps('eval-source-map'),
parts.loadSASS(),
parts.devServer({
host: process.env.HOST,
port: process.env.PORT
})
);
};
parts模块的相关部分：
exports.devServer = function(options) {
return {
devServer: {
historyApiFallback: true,
hot: true,
hotOnly: true,
stats: 'errors-only',
host: options.host, // Defaults to `localhost`
port: options.port // Defaults to 8080
},
plugins: [
new webpack.HotModuleReplacementPlugin({
})
]
};
};
exports.lintJavaScript = function(paths) {
return {
module: {
rules: [
{
test: /\.js$/,
include: paths,
use: 'eslint-loader',
enforce: 'pre'
}
]
}
};
};
exports.loadJavaScript = function(paths) {
return {
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: paths,
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
]
}
};
};
这已经太大了，但我不知道我的 webpack 配置的哪一部分失败了。如果您需要有关样板的更多信息，请查看gitHub repo。
【问题讨论】：
-
尝试在
loadJavaScript规则中排除node_modules。exclude: /node_modules/ -
没有变化，还是出现同样的错误，抱歉
-
您可以尝试在您的
exports.lintJavaScript规则中排除node_modules吗？ -
结果和以前一样。我认为这是加载程序配置的问题，但无法弄清楚它是什么。我尝试使用 babel，结果相同。
-
也许您可以尝试使用webpack-validator 验证您的 webpack 配置。