Webpack 5-“意料之外的标记:朋克(.)”导入后公理

Question

我遇到了一个奇怪的问题，就是把webpack捆绑在生产环境上。

Unexpected token: punc (.)

当一个React组件导入时，只会发生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)

再生产

1. 请将以下axios-发行-示例-与-webpack5 5存储库分叉
2. 执行npm install
3. 运行npm run build

预期行为

捆绑后无错误

环境

• Axios版本0.21.1
• Node.js版本12.20.1
• 图书馆附加版本反应17.0.1，Webpack 5.15.0

webpack.config

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
                        }
                    }
                })
            ],
        },
    }

Answer 1

问题

正如我所说的，问题来自于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 for node的代码，因为您还没有告诉webpack您是为web应用程序构建的，所以它不会包含这些代码。

因此，只要在配置中将target设置为web，它就能工作：

webpack.common.js

module.exports = {  
  target: 'web',
  // ...
}

我还发现，您导入的css typeface-roboto需要将publicPath设置为输出：

webpack.prod.js

module.exports = {
  // ...
  output: {
    // ...
    publicPath: '/',
  },
}