我在为生产环境捆绑 webpack 时遇到一个奇怪的问题。
Unexpected token: punc (.)
axios import React from "react";
import axios from "axios"; // <---------------
class SimpleComponent extends React.Component {
render() {
return (
<section className="bg-white py-16">
Simple
</section>
)
}
}
export default SimpleComponent
$ npm run build
ERROR in static/main.b394a534fa5736fe90cc.js from Terser
Unexpected token: punc (.) [static/main.b394a534fa5736fe90cc.js:18978,6]
at js_error (/home/franciscocarvalho/code/oss/axios-issue-example-with-webpack5/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:546:11)
at croak (/home/franciscocarvalho/code/oss/axios-issue-example-with-webpack5/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1264:9)
at token_error (/home/franciscocarvalho/code/oss/axios-issue-example-with-webpack5/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1272:9)
at unexpected (/home/franciscocarvalho/code/oss/axios-issue-example-with-webpack5/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1278:9)
at statement (/home/franciscocarvalho/code/oss/axios-issue-example-with-webpack5/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1397:17)
at _embed_tokens_wrapper (/home/franciscocarvalho/code/oss/axios-issue-example-with-webpack5/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1322:26)
at block_ (/home/franciscocarvalho/code/oss/axios-issue-example-with-webpack5/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:2155:20)
at statement (/home/franciscocarvalho/code/oss/axios-issue-example-with-webpack5/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1386:29)
at _embed_tokens_wrapper (/home/franciscocarvalho/code/oss/axios-issue-example-with-webpack5/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1322:26)
at if_ (/home/franciscocarvalho/code/oss/axios-issue-example-with-webpack5/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:2141:21)
npm install npm run build 预期行为
捆绑后无错误
环境
配置文件
const path = require("path")
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const Dotenv = require("dotenv-webpack")
const ROOT_DIR = path.resolve(__dirname, "..")
module.exports = {
mode: "production",
entry: [
path.resolve(ROOT_DIR, "./src/index.js"),
path.resolve(ROOT_DIR, "./src/styles/styles.scss")
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
"babel-loader",
{
loader: "eslint-loader",
options: {
configFile: path.resolve(ROOT_DIR, ".eslintrc")
}
}
]
},
{
test: /\.(jpe?g|png|gif|ico|svg|woff|woff2|webp)$/i,
use: [
{
loader: "file-loader",
options: {
name: "static/[name].[ext]"
}
}
]
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
importLoaders: true
}
},
'postcss-loader',
{
loader: "sass-loader",
options: {
sassOptions: {
includePaths: [
path.resolve(ROOT_DIR, "node_modules"),
path.resolve(ROOT_DIR, "src/styles/")
]
}
}
}
],
}
]
},
resolve: {
extensions: ["*", ".js", ".jsx", ".scss"],
fallback: {
assert: false,
http: false,
https: false,
zlib: false,
tty: false,
util: false,
fs: false,
net: false,
stream: false
}
},
plugins: [
new Dotenv({
path: path.resolve(__dirname, "..", "./.env")
}),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: "Advanced React with Webpack Setup",
template: path.resolve(__dirname, "..", "./src/index.ejs")
}),
new MiniCssExtractPlugin({
filename: "static/[name]-[contenthash].css",
}),
new PurgeCSSPlugin({
paths: glob.sync(`${ROOT_DIR}/src/**/*`, {nodir: true}),
}),
],
stats: {
modules: true,
hash: true,
assetsSort: "!size",
children: true
},
output: {
path: path.resolve(__dirname, "..", "dist"),
chunkFilename: 'static/[name].[hash].js',
filename: "static/[name].[hash].js",
chunkLoading: false,
wasmLoading: false
},
optimization: {
minimize: true,
minimizer: [
// For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
// `...`,
new CssMinimizerPlugin(),
/*new UglifyJsPlugin({
test: /\.js(\?.*)?$/i,
parallel: true,
})*/
new TerserPlugin({
terserOptions: {
ecma: 6,
compress: {
warnings: true
},
output: {
comments: false,
beautify: false
}
}
})
],
},
}
最佳答案
问题
就像我说的问题来自 debug已被 webpack 收录在您的构建文件中(node 代码部分)。该代码如下所示:
function save(namespaces) {
if (null == namespaces) {
delete {}.DEBUG;
} else {
{}.DEBUG = namespaces; // that is the invalid statement that `terser` complains about
}
}
// Plus, the main file `index.js` of `debug`:
if (typeof process !== 'undefined' && process.type === 'renderer') {
module.exports = require('./browser.js');
} else {
// Above code is from here
module.exports = require('./node.js');
}
以上代码
debug为 node已添加，因为您还没有告诉 webpack您为 Web 应用程序构建，因此它不会包含该代码。所以只要你设置
target如 web在您的配置中，它会起作用:webpack.common.js module.exports = {
target: 'web',
// ...
}
typeface-roboto您导入的需要您设置 publicPath作为输出:webpack.prod.js module.exports = {
// ...
output: {
// ...
publicPath: '/',
},
}
关于reactjs - 导入 axios 后的 Webpack 5 - "Unexpected token: punc (.)"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65744545/