reactjs - 使用 webpack 生产构建时构建失败
问题描述
我收到 Module build failed: SyntaxError: Unexpected token Error。我在生成生产构建时遇到此错误,在应用 Webpack 生产构建配置之前,在使用开发构建时相同的代码在早期工作。你能告诉我我在 webpack.config.js 中做错了什么吗这是错误
ERROR in ./src/index.jsx
Module build failed: SyntaxError: Unexpected token (10:4)
client |
client | 8 |
client | 9 | const App = () => (
client | > 10 | <Provider store={store}>
client | | ^
client | 11 | <AppRoute/>
client | 12 | </Provider>
client | 13 | );
这是我的 webpack.config.js 文件代码
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const autoprefixer = require('autoprefixer');
const staticSourcePath = path.join(__dirname, 'static');
const sourcePath = path.join(__dirname, 'src');
const buildPath = path.join(__dirname, 'dist');
module.exports = {
devtool: 'source-map',
entry: {
app: path.resolve(sourcePath, 'index.jsx')
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].[chunkhash].js',
publicPath: '/'
},
resolve: {
extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
modules: [
sourcePath,
path.resolve(__dirname, 'node_modules')
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.[chunkhash].js',
minChunks (module) {
return module.context && module.context.indexOf('node_modules') >= 0;
}
}),
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 webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer({
browsers: [
'last 3 version',
'ie >= 10'
]
})
],
context: staticSourcePath
}
}),
new webpack.HashedModuleIdsPlugin(),
new HtmlWebpackPlugin({
template: path.join(sourcePath, 'index.html'),
path: buildPath,
filename: 'index.html',
minify: {
collapseWhitespace: true,
collapseInlineTagWhitespace: true,
removeComments: true,
removeRedundantAttributes: true
}
}),
new PreloadWebpackPlugin({
rel: 'preload',
as: 'script',
include: 'allChunks',
fileBlacklist: [/\.(css|map)$/, /base?.+/]
}),
new ScriptExtHtmlWebpackPlugin({
defaultAttribute: 'defer'
}),
new ExtractTextPlugin({
filename: '[name].[contenthash].css',
allChunks: true
}),
new CompressionPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
threshold: 10240,
minRatio: 0.8
})
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
'babel-loader'
]
},
{
test: /\.css$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader', options: { minimize: true } },
'postcss-loader',
'sass-loader'
]
})
},
{
test: /\.(eot?.+|svg?.+|ttf?.+|otf?.+|woff?.+|woff2?.+)$/,
use: 'file-loader?name=assets/[name]-[hash].[ext]'
},
{
test: /\.(png|gif|jpg|svg)$/,
use: [
'url-loader?limit=20480&name=assets/[name]-[hash].[ext]'
],
include: staticSourcePath
}
]
}
};
这是我的 index.jsx 代码。
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './_helpers';
import AppRoute from './pages/approute';
import 'react-table/react-table.css';
const App = () => (
<Provider store={store}>
<AppRoute/>
</Provider>
);
ReactDOM.render(<App />, document.getElementById('app'));
解决方案
正如评论中所指出的,babel 配置中必须有一些 webpack 无法转换 JSX 语法的东西。
检查你是否安装并打开了babel-preset-react :
"presets": [
"react"
],
Little nitpick - 使用缓存来加快增量构建:
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
},
推荐阅读
- javascript - Jest 找不到文件加载器模块
- ruby-on-rails-5.1 - 使用 Link_to 帮助器转到不同页面轨道上的 div
- c - 在这里无法理解 getchar 和 putchar 的作用
- javascript - 无法理解与 Promise 和范围相关的错误
- python - 将文件路径转换为 URL
- c# - 实体框架使双重可空属性
- html - minmax() defaulting to max
- javascript - 动态更改数据键名来自 JSON AngularJS
- firebase-realtime-database - AWS 上的 Firebase 实时数据库与 socket.io
- html - 级联瀑布文本css