webpack ReferenceError: document is not defined

1、错误信息提示如下：

2、目录结构

3、webpack.config.js 配置如下：

// resolve 用来拼接绝对路径的方法
const { resolve } = require('path');

// 使用 plugin 需要先引入它的这个类(构造函数)
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // webpack 配置

    mode: "development",  // 开发环境
    // mode: "productiong",  // 生产环境

    // 入口配置
    entry: './src/index.js',

    // 输出配置
    output: {
        // 输出文件名
        filename: 'build.js',

        // 输出路径

        // __dirname 是 node.js 的变量，代表当前文件的目录绝对路径
        path: resolve(__dirname, 'build')
    },

    // loader 的配置
    module: {
        rules: [
            // 详细的 loader配置
            {
                // 匹配以 .css 后缀结尾的文件
                test: /\.css$/,

                // 使用哪些 loader 进行处理
                // use 数组中 loader 执行顺序：从左到右，从下到上，依次执行
                use: [
                    // 创建 style 标签， 将 js 中的样式资源插入进去，添加到 head 中生效
                    'style-loader',

                    // 将 css 文件变成 common.js 模块加载到 js 中，里边内容是样式字符串
                    'css-loader'
                ]
            },
            {
                // 匹配以 .less 后缀结尾的文件
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',

                    // 将 less 文件编译成 css 文件
                    // 需要下载 less-loader 和 less
                    'less-loader'
                ]
            },
            {
                // 处理图片资源
                test: /\.(jpg|png|jpeg|gif)$/,
                // 使用一个 loader 可以直接使用 loader
                // 需要下载 url-loader 和 file-loader
                loader: 'url-loader',
                options: {
                    // 图片大小小于 8kb ~ 12kb，就会被 base64 处理
                    // 优点：减少请求数量（减轻服务器压力）
                    // 缺点：图片体积会变大（文件请求速度更慢）
                    limit: 8 * 1024,  //（8 ~ 12） * 1024

                    // 问题： 因为 url-loader 默认使用 ES6 模块化解析，而 html-loader 引入图片是 common.js 
                    // 解析时会出现问题：[object Module]
                    // 解决：关闭 url-loader 的 ES6 模块化，使用 common.js 解析
                    // 最新版webpack已经解决这个问题 可注释
                    esModule: false
                },
            },
            {
                // 处理 HTML 中的 img 标签中的图片资源
                test: /\.html$/,

                // 处理 html 文件的 img 图片(负责引入 img，从而被 url-loader 进行处理)
                loader: 'html-loader',
            }
        ]
    },

    // 插件的配置
    plugins: [
        // 详细的 plugins 配置

        // html-webpack-plugin
        // 功能：默认会创建一个空的 HTMl 文件，自动引入打包输出的所有资源 ( JS/CSS )
        // 需求：需要有结构的 HTMl 文件
        new HtmlWebpackPlugin({
            // 复制 src 目录下的 index.html 文件，并自动引入打包输出的所有资源 ( JS/CSS )  => 注意：不需要自己手动引入
            template: './src/index.html'
        })
    ]

}

4、src目录下的index.html

5、解决

注释掉src目录下的index.html这行代码

原因

• 在之前的操作中，未使用 html-webpack-plugin 插件打包输出HTML,测试的时候仍旧是在原来的index.html文件中运行检测，因此不报错；
• webpack打包顺序：通过入口文件开始打包，html-loader解析HTML文件中的图片文件，style-loader、css-loader处理样式文件，url-loader解析样式中的图片路径问题，file-laoder处理其他文件格式，Plugins中的html-webpack-plugin则负责打包HTML文件;
• html-loader 解析的是原HTML文件中的图片文件，因此原HTML文件中引入的script标签无法解析，就会报错；
• 使用了 html-webpack-plugin打包工具之后，webpack配置打包的时候，就会报错，html- webpack-plugin的本质是创建一个空的HTML文件，找到template下的文件复制到这个空的 HTML文件中，再将打包好的其他资源全部引入这个空的HTML文件。