Webpack5运行报module function not found错误 不修改目录结构如何解决

错误原因 #

• Webpack 5 已废弃devServer.contentBase配置项，错误的资源服务配置会导致静态资源路径解析失败
• 你配置的html-loader会自动解析html内的静态资源引用，打包后的dist目录下不存在./scripts/lib.js路径，因此触发module not found
• Webpack默认打包的JS文件是闭包模块化形式，不会将模块导出内容暴露到全局作用域，因此你赋值window.lib失败，调用时触发is not a function

修复方案（不改动现有目录结构） #

第一步：修改webpack.config.js配置

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
// webpack5内置无需额外安装，用于JS代码压缩
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
    // 适配多环境变量
    mode: process.env.NODE_ENV || "development",
    entry: {
        lib: "./scripts/lib.js"
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        // 核心配置：将lib模块的导出挂载到全局window.lib对象
        library: {
            name: 'lib',
            type: 'window'
        },
        clean: true // 每次打包自动清空dist目录
    },
    devServer: {
        // 替换废弃的contentBase配置
        static: "./dist",
        hot: true,
        host: "localhost",
        port: 8080,
        stats: "errors-only",
        https: false
    },
    optimization: {
        // 配置JS压缩规则，支持多环境差异化压缩
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    compress: {
                        // 生产环境自动删除console
                        drop_console: process.env.NODE_ENV === "production"
                    }
                }
            })
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "index.html",
            hash: true,
            // 自动将打包后的lib.js注入到html的head中
            inject: "head"
        })
    ],
    module: {
        rules: [
            {
                test: /\.html$/i,
                loader: 'html-loader',
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                // 兼容ES模块语法
                use: 'babel-loader'
            }
        ],
    },
};

第二步：安装缺失依赖

执行以下命令安装所需依赖：

npm install babel-loader @babel/core @babel/preset-env terser-webpack-plugin cross-env --save-dev

第三步：调整HTML代码（仅需删除冗余引入，不改动业务逻辑）

删除index.html中手动引入lib.js的内联script代码即可，webpack已自动注入lib.js并挂载到全局window.lib对象，原有body onload="lib.myFn()"调用逻辑无需修改：

<!-- 可直接删除这部分冗余代码 -->
<script type="module">
    import * as lib from "./scripts/lib.js";
    window.lib = lib;
</script>

多环境配置补充 #

在package.json中新增运行脚本，配合cross-env区分环境：

{
  "scripts": {
    "dev": "webpack serve",
    "build:test": "cross-env NODE_ENV=test webpack",
    "build:prod": "cross-env NODE_ENV=production webpack"
  }
}

执行对应命令即可完成本地开发启动、测试环境打包、生产环境压缩打包的需求。

内容的提问来源于stack exchange，提问作者codebee