所有 JS 代码都与 Webpack 捆绑到一个 main.js 文件中。图像、style.css 和 index.html 使用 miniCSSExtractPlugin、asset/resource 和 HTMLWebpackPlugin 处理。生成 bundle 时,index.js 文件由 HTMLWebpackPlugin 导入到 index.html 中。
Webpack 配置如下:
const config = {
entry: "./src/index.js",
mode: 'none',
experiments: {
futureDefaults: true,
},
output: {
path: path.resolve(__dirname, "public"),
filename: '[name].[contenthash].js',
clean: true,
},
devServer: {
open: true,
host: "localhost",
static: {
directory: path.join(__dirname, "public"),
},
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
sideEffects: true,
include: [
path.resolve(__dirname, 'src/style.css'),
],
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
type: 'asset/resource'
},
],
},
plugins: [
new MiniCssExtractPlugin(
{ filename: '[name].[contenthash].css' },
{ experimentalUseImportModule: false },
),
new HtmlWebpackPlugin({
title: 'go outside today',
template: './src/indexTemplate.html'
}),
],
};
当使用 webpack-dev-server 提供服务时,一切都正确显示,除了这个错误:
ERROR in webpack/runtime/css loading
Cannot read properties of undefined (reading 'getChunkConditionMap'
)
但是,它不会影响正在提供的内容。
当代码被捆绑并提供给 Firebase 模拟器或 Firebase 托管时,index.js 中的所有代码(例如简单的 console.log())都会消失。但是,所有导入 index.js 的函数都可以在网站上执行和显示。 style.css、index.html 或 main.js 包中的任何其他内容都没有问题。
显示如下问题:
caught (in promise) TypeError: c[e] is not a function
在提供给 Firebase 时查看 main.js 捆绑文件,这是错误所在:
function l(e) {
var t = u[e];
if (void 0 !== t)
return t.exports;
var r = u[e] = {
exports: {}
};
return c[e](r, r.exports, l),
r.exports
}
不确定可能是什么问题。查看捆绑包,将 index.js 导入到 index.html 文件中没有问题。 main.js 的其余部分工作正常。唯一没有显示的是 index.js 中的函数代码。所有导入都可以从 index.js 正常工作,包括 style.css、其他函数等。