我创建了reactjs应用程序，使用webpack对其进行测试和编译，它功能齐全，并且一切正常，一旦我需要进行成功的生产构建，就可以对其进行编译并创建dist文件夹，现在我将文件复制到apache路径中，当浏览网站时出现此错误：
未捕获到的SyntaxError：意外令牌<< / p>
这是我的.htaccess文件：
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
Options -MultiViews
RewriteRule ^ index.html [QSA,L]
这是我的.bablerc文件
{
"presets": [
[
"@babel/env",
{
"modules": false,
"targets": {
"browsers": [
"last 2 versions",
"safari >= 7"
]
}
}
],
"@babel/react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/syntax-dynamic-import",
"@babel/transform-runtime",
"@babel/plugin-transform-react-jsx",
"babel-plugin-transform-class-properties"
]
}
这是我的package.json
{
"name": "Test",
"version": "1.0.0",
"description": "My Test Project",
"homepage": "/",
"scripts": {
"start": "webpack-dev-server --inline --history-api-fallback --progress --config webpack/dev.js",
"build": "webpack --config webpack/prod.js --progress "
},
"keywords": [
"reactjs"
],
"author": "Author",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@babel/plugin-transform-runtime": "^7.5.5",
"@babel/polyfill": "^7.2.5",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-plugin-react-transform": "^3.0.0",
"clean-webpack-plugin": "^1.0.1",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^2.1.0",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"sass-loader": "^7.3.1",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.8.0",
"webpack-filter-warnings-plugin": "^1.2.1",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"@babel/plugin-proposal-decorators": "^7.4.4",
"@babel/runtime": "^7.5.5",
"@types/googlemaps": "^3.37.5",
"@types/markerclustererplus": "^2.1.33",
"@types/react": "^16.9.2",
"availity-reactstrap-validation": "^2.6.0",
"axios": "^0.19.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"base-64": "^0.1.0",
"blob-to-base64": "^1.0.2",
"chart.js": "^2.7.2",
"chartjs-plugin-datalabels": "^0.3.0",
"classnames": "2.2.6",
"cors": "^2.8.5",
"device-uuid": "^1.0.4",
"draft-js": "^0.10.5",
"firebase": "^5.3.0",
"formik": "^1.5.8",
"ip": "^1.1.5",
"js-base64": "^2.5.1",
"lodash": "^4.17.15",
"match-sorter": "^4.0.1",
"md5": "^2.2.1",
"moment": "2.22.2",
"moment-jalaali": "^0.8.3",
"node-machine-id": "^1.1.12",
"rc-slider": "^8.6.13",
"rc-switch": "^1.6.0",
"react": "^16.9.0",
"react-advance-jalaali-datepicker": "^1.2.2",
"react-autosuggest": "^9.3.4",
"react-barcode-reader": "0.0.1",
"react-big-calendar": "^0.20.3",
"react-chartjs-2": "^2.7.4",
"react-circular-progressbar": "^1.0.0",
"react-contextmenu": "^2.9.4",
"react-datepicker": "^1.5.0",
"react-datepicker2": "^3.0.3",
"react-device-detect": "^1.7.5",
"react-dom": "^16.9.0",
"react-dropzone-component": "^3.2.0",
"react-file-base64": "^1.0.3",
"react-google-maps": "^9.4.5",
"react-headroom": "^2.2.4",
"react-image-file-resizer": "^0.2.0",
"react-intl": "2.4.0",
"react-lines-ellipsis": "^0.13.2",
"react-loadable": "5.4.0",
"react-mousetrap": "^0.2.0",
"react-perfect-scrollbar": "^1.5.3",
"react-persian-datepicker": "^3.0.2",
"react-polyfills": "0.0.1",
"react-quill": "^1.3.1",
"react-rater": "^5.1.0",
"react-redux": "5.0.7",
"react-rounded-image": "^2.0.2",
"react-router-dom": "^4.2.2",
"react-scroll-to-component": "^1.0.2",
"react-select": "^2.4.4",
"react-sortablejs": "^1.3.6",
"react-table": "^6.10.0",
"react-tagsinput": "^3.19.0",
"react-transition-group": "^1.2.0",
"react-yandex-maps": "^3.1.0",
"reactstrap": "^6.5.0",
"redux": "4.0.0",
"redux-saga": "^0.16.0",
"sortablejs": "^1.6.1",
"utf8": "^3.0.0",
"uuid": "^3.3.3",
"video.js": "^7.6.0",
"yup": "^0.27.0"
}
}
这是我的base.js（常见的Webpack）
"use strict";
const path = require('path');
const fs = require('fs');
const publicPath = '/';
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: {
index: ['./src/index.js']
},
output: {
path: resolveApp('dist'),
filename: 'assets/js/[name].[hash:4].js',
chunkFilename: 'assets/js/[name].[hash:4].chunk.js',
publicPath: publicPath,
// hotUpdateChunkFilename: 'hot/hot-update.js',
// hotUpdateMainFilename: 'hot/hot-update.json'
},
resolve: {
alias: {
Components: path.resolve(__dirname, '../src/components/'),
Brisky: path.resolve(__dirname, '../src/brisky_components/'),
Containers: path.resolve(__dirname, '../src/containers/'),
Assets: path.resolve(__dirname, '../src/assets/'),
Util: path.resolve(__dirname, '../src/util/'),
Routes: path.resolve(__dirname, '../src/routes/'),
Constants: path.resolve(__dirname, '../src/constants/'),
Redux: path.resolve(__dirname, '../src/redux/'),
Data: path.resolve(__dirname, '../src/data/')
}
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
},
]
},
plugins: [
new CopyWebpackPlugin([
{from:'src/assets/img',to:'assets/img'},
{from:'src/assets/fonts',to:'assets/fonts'}
]),
new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html",
favicon: './public/favicon.ico'
}),
]
};
这是我的prod.js（生产配置）
'use strict'
const path = require('path');
const fs = require('fs');
const merge = require('webpack-merge')
const baseConfig = require('./base')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
let pathsToClean = [
'dist'
]
let cleanOptions = {
root: __dirname,
verbose: false, // Write logs to console.
dry: false
}
module.exports = merge(baseConfig, {
mode: 'production',
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true
},
sourceMap: true
}),
new OptimizeCSSAssetsPlugin({})
]
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
},
// Scss compiler
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader?indentedSyntax"
]
}
]
},
performance: {
hints: "warning"
},
plugins: [
new CleanWebpackPlugin(pathsToClean, cleanOptions),
new MiniCssExtractPlugin({
filename: "assets/css/[name].[hash:4].css"
}),
new FilterWarningsPlugin({
exclude: /mini-css-extract-plugin[^]*Conflicting order between:/
})
]
})
复制dist文件夹后，我希望它可以作为网页正常工作
答案 0 :(得分：1)
您没有提供任何错误上下文或堆栈跟踪，因此我需要猜测："@babel/react"预设可能在构建期间被省略，因此JSX尚未转换为有效的JavaScript语法。
原因是：您两次包含babel配置-一次在babel-loader base.js下的options配置中，一次在.babelrc中。在这种情况下，options优先，而.babelrc被忽略。
我在这里假设.babelrc是“完整”配置，因此删除options条目并更新您的Webpack模块配置：
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
];
答案 1 :(得分：0)
我在base.js中完成了模块配置。
经过多次尝试，我发现了重点，这与apache服务器配置有关。
htaccess文件应如下所示：
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
，在apache2.conf中，我应该将工作目录直接指向源html文件。 像这样（将dist文件夹的内容复制到“ / var / www / html /” ）
<Directory /var/www/html/>
Options Indexes FollowSymLinks MultiViews
AllowOverride all
Require all granted
Order allow,deny
allow from all
</Directory>