我已經使用 React 構建了一個聊天機器人。這是我第一次不使用create-react-app而是配置我自己的 Webpack 檔案。一切正常，除了一件重要的事情：Google Chrome 中的“源”選項卡顯示的檔案更改太多，以至于它們看起來不像我的代碼并且不可讀。
例如，這是我的代碼的螢屏截圖：
這是該檔案在“來源”選項卡中的樣子：
這是我在 webpack.config.js 中進行的操作：
const HTMLWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
module.exports = (env) => {
return {
entry: "./src/index.js",
output: {
path: `${__dirname}/dist`,
publicPath: "/",
filename: "sei-chat.js",
library: "SEIChat",
libraryTarget: "umd",
umdNamedDefine: true,
},
plugins: [
new HTMLWebpackPlugin({
template: "./public/index.html",
}),
],
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
},
},
},
{
test: /\.css$/i,
use: [
"style-loader",
{
loader: "css-loader",
options: { importLoaders: 1, modules: true },
},
],
},
{
test: /\.svg$/,
use: ["svg-url-loader"],
},
{
test: /\.js#/,
enforce: "pre",
use: ["source-map-loader"],
},
],
},
};
};
如果您在其中看到任何可能導致此類事件發生的內容，請告訴我。
uj5u.com熱心網友回復：
這就是 webpack 的輸出總是看起來的樣子。Webpack 將一堆 JS 檔案捆綁到一個檔案中，因此它添加了很多樣板檔案以允許以前使用 Node'srequire找到彼此的模塊，一旦它們在瀏覽器中不再存在時可以找到彼此。
它還包括適用于舊瀏覽器的 polyfill regenerator-runtime，您可以在頂部看到它們。
您可以將此檔案視為代碼的編譯輸出，無論如何在編譯語言（想想匯編、位元組碼等）中通常是不可讀的。
但是，您可能正在尋找的是source maps。他們將該檔案映射回您的原始源，這對于除錯目的非常有用。
Webpack 有很多關于源映射的選項。查看他們的開發工具。這些插件中的任何一個都可能解決您的問題。如果您不確定，請查看 webpack 配置create-react-app并復制他們所做的。
您還可以使用 create-react-app 的彈出功能從他們的 webpack 配置開始，但仍然可以在以后編輯和自定義它
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/535380.html
上一篇：選擇非空白的隨機單元格