没有服务器无法运行构建索引 html 文件

Question

我试图在没有任何服务器的情况下运行 dist 索引文件夹。即：就像我们在浏览器中打开的普通 html 文件一样。但我收到以下错误。我不确定我的 webpack 是否捆绑正确。

我想在没有任何服务器的情况下打开捆绑代码。只需打开 html 文件。我想运行应用程序。 webpack.common.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
require('../server/boot');
const paths = require('./paths');

module.exports = {
    //entry file
    entry: paths.src + '/index.jsx',
    target: 'web',

    // output: {
    //     publicPath: '/',
    //     chunkFilename: '[chunkhash].js',
    //     hotUpdateChunkFilename: '[id].[fullhash].hot-update.js',
    //     filename: '[name].bundle.js',
    // },

    optimization: {
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    format: {
                        comments: false,
                    },
                },
                parallel: true,
                extractComments: false,
            }),
        ],
    },

    // Customize the webpack build process
    plugins: [
        // Removes/cleans build folders and unused assets when rebuilding
        // new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        // Generates an HTML file from a template
        // Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
        new HtmlWebpackPlugin({
            template: paths.public + '/index.html', // template file
            filename: 'index.html', // output file
            minify: {
                removeComments: true,
                collapseWhitespace: true,
            },
            inlineSource: '.(js|jsx|css|scss)$',
        }),
        new webpack.DefinePlugin({
            'process.env': JSON.stringify(process.env),
        }),
    ],

    // Determine how modules within the project are treated
    module: {
        rules: [
            // JavaScript: Use Babel to transpile JavaScript files
            { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader'] },

            // Images: Copy image files to build folder
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/inline',
            },

            // Fonts and SVGs: Inline files
            { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/inline' },
        ],
    },

};

webpack.prod.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { merge } = require('webpack-merge');
const paths = require('./paths');
const common = require('./webpack.common');
const path = require('path');

module.exports = merge(common, {
    mode: 'production',
    output: {
        path: paths.build,
        // publicPath: '/',
        // filename: 'js/[name].[contenthash].bundle.js',
        // chunkFilename: '[chunkhash].js',
        // hotUpdateChunkFilename: '[id].[fullhash].hot-update.js',
    },

    devServer: {
        contentBase: '/dist',
        historyApiFallback: true,
        // no publicPath
    },

    module: {
        rules: [
            {
                test: /\.(sass|scss|css)$/,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
            },
        ],
    },
    plugins: [
        // Extracts CSS into separate files
        new MiniCssExtractPlugin({
            filename: '[name].[hash].css',
            chunkFilename: '[id].css',
        }),
    ],
    optimization: {
        minimize: true,
        minimizer: [new CssMinimizerPlugin(), '...'],
        runtimeChunk: {
            name: 'runtime',
        },
    },
    performance: {
        hints: false,
        maxEntrypointSize: 512000,
        maxAssetSize: 512000,
    },
});

Answer 1

看起来它找不到正确的文件。在index.htmlsrc中应该以“./”开头

<script defer src="./main.js"></script>

通常在 webpack dev server 中我们不需要传递点“.”。

  <script defer src="/main.js"></script>

检查index.html并传递main.js的正确路径