1

我整天都在解决 Webpack 的一个问题，最后修复了它。但现在我想知道它为什么起作用以及背后的过程。对于初学者来说，快速浏览一下我的 webpack.config.js：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        checkout: './src/checkout_1.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js'
    },
    plugins: [
        new MiniCssExtractPlugin({
            publicPath: path.resolve(__dirname, 'dist'),
            filename: 'css/[name].css',
        }),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
           // hash: true,
            template: './src/checkout_1.html',
            filename: 'index.html',
            chunks: ['checkout']
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'css-hot-loader',
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: path.resolve(__dirname, 'dist/css'),
                            //filename: '[name].css',
                        }
                    },
                    'css-loader'/*,
                    'style-loader'*/
                ]
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                        options: {
                            interpolate: true,
                            name:'[name].html',
                            publicPath: '/'
                        }
                    }
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name:'img/[name].[ext]',
                            publicPath: '/'
                        }
                    }
                ]
            },
            {
                test: /\.(ttf|eot|svg|woff|woff2|otf)$/,
                use:[
                    {
                        loader: 'file-loader',
                        options: {
                            name:'fonts/[name].otf',
                            publicPath: '/'
                        }
                    }
                ]
            }
        ]
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'src'), // This was set to "dist," which was causing the issue
        hot: true,
        publicPath: '/',
        inline: true,
        watchContentBase: true
    }
};

最初，contentBase参数设置为path.resolve(__dirname, 'dist')

那么问题将是 HMR 无法正常工作：更新任何 CSS 文件都会热重新加载页面，但除非我手动刷新页面，否则不会应用 HTML 端的更改。代码仍然会根据控制台重新编译，并且我会在浏览器的日志消息中看到检测到更改，并且它会在说“没有热更新”之前尝试热重新加载。

我更改dist为src，现在所有更改都会触发热重载。我很高兴它可以工作，但我不太了解背后的机制。我发现开发网络服务器实际上并没有写入磁盘，而只是编译内存中的文件，这使得它更快。但是，我可以看到它仍然会生成一些文件，例如 CSS 和图像文件。此外，根据文档，“contentBase”属性是指“提供内容的位置”。从逻辑上讲，内容是从“dist”文件夹中提供的，对吧？

我对这一切有点困惑，所以我需要一些理论来完全掌握这个概念。谢谢

4

0 回答 0