构建 React 应用程序生成带有块后缀的静态文件

Question

我使用下面的命令 npx create-react-app my-app 创建了一个反应应用程序

现在，当我使用下面的命令 npm run build 构建用于生产的应用程序时

它生成以下带有后缀的文件。

build\static\js\1.82dafdb5.chunk.js build\static\js\runtime~main.229c360f.js build\static\js\main.a27c0d6d.chunk.js build\static\css\main.c2586263.chunk.css

我正在寻找如何避免文件名中的随机数和块后缀。有什么办法可以只导入一个 js 文件，这样我就可以导入一个 js 文件，而不是导入三个 js 文件。

Answer 1

您可以在项目的根目录下创建新webpack.config.js文件并执行如下操作：

const path = require("path")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const glob = require("glob")

module.exports = {
  entry: {
    "bundle.js": glob.sync("build/static/?(js|css)/main.*.?(js|css)").map(f => path.resolve(__dirname, f)),
  },
  output: {
    filename: "build/static/js/bundle.min.js",
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: ["style-loader", "css-loader"],
    }, ],
  },
  plugins: [new UglifyJsPlugin()],
}

但您还需要package.json相应地修改您的：

...
    "build": "npm run build:react && npm run build:bundle", 
    "build:react": "react-scripts build", 
    "build:bundle": "webpack --config webpack.config.js", 
...