webpack5——自学踩坑正在自学webpack5，整理一下学习中遇到的、解决起来浪费好多时间的问题，持续更新。（装备

正在自学webpack5，整理一下学习中遇到的、解决起来浪费好多时间的问题，持续更新。（装备是一台MAC）

每个问题会分为三部分：

1. 问题描述

【问题/功能简述】详细报错信息/步骤

2. 解决方法（本人试过真实可行的）

3. 其他可能有用的方法（官方文档或者其他教程这么写，但是我没有成功，不同环境下可能也适用🤔）

一、【配置babel报错】下载包，并且配置loader和预设后，使用webpack打包还是存在箭头函数。

**解决方法：**在package.json文件添加如下代码：

  "browserslist": [ "chrome 38" ]

意思是指定目标环境是Chrome38。打包后，代码是ES5的函数定义语法，因为Chrome38不支持箭头函数语法。

其他方法：

在package.json中添加loader和预设

    {        
        test: /\.js$/,        
        exclude: /node_modules/, // 排除node_modules代码不编译        
        loader: "babel-loader",        
        options: {            
            presets: ["@babel/preset-env"],        
        }    
    }

二、【图片优化插件报错】npm安装image-minimizer-webpack-plugin（压缩图片的插件，一直报错jpegtran ENOENT。

**解决方法：**操作步骤如下：

1. 输入命令下载 jpegsrc.v6b.tar.gz

curl http://www.ijg.org/files/jpegsrc.v6b.tar.gz > /tmp/libjpeg.tar.gz

2. 输入命令解压该文件

tar -xzvf /tmp/libjpeg.tar.gz

3. 进入内层文件夹

cd ./jpeg-6b

4. 安装

./configure

sudo make install

5. 复制 jpegtran 可执行文件至 node_modules\jpegtran-bin\vendor 目录下，再次打包

其他方法：

WIN环境下，下载exe文件到node_modules\jpegtran-bin\vendor 下面。

jpegtran官网地址

三、【optipng报错】同理

optipng官网地址

四、【less-loader报错】Cannot find module 'less' （之前打包一直没问题，突然就报错了）

**解决方法：**重新安装less

npm install less --save-dev

五、【优化代码运行性能，按需加载js报错】为了按需加载文件，使用代码分割（Code Split）将打包生成的文件进行分割，生成多个 js 文件。打包时报错 'import' and 'export' may only appear at the top level'

我的代码：

document.getElementById("btn").onclick = function () {  // 动态导入 --> 实现按需加载  // 即使只被引用了一次，也会代码分割  import( /* webpackChunkName: "count" */ "./js/count.js").then(( count ) => {    console.log(count(2,1));  });};

解决方法：操作步骤如下：

1. 在.eslintrc中添加 parser: "@babel/eslint-parser" ，添加 requireConfigFile: false

module.exports = {  
    // 继承 Eslint 规则  
    extends: ["eslint:recommended"],  
    env: {    
        node: true,    
        browser: true,  
    },  
    parser: "@babel/eslint-parser", // 在这里    parserOptions: {    
        ecmaVersion: 6,    
        requireConfigFile: false, // 和这里        sourceType: "module",    
    },  
    rules: {    
        "no-var": 2,  
    },
};

2. 在package.json文件中添加"@babel/eslint-parser": "^7.5.4"，

3. 输入命令 npm i 更新包

参考资料：www.cjavapy.com/article/238…

其他方法：

下载包：npm i eslint-plugin-import -D 并添加 plugins: ["import"]

module.exports = {  
    // 继承 Eslint 规则  
    extends: ["eslint:recommended"],  
    env: {    
        node: true,    
        browser: true,  
    },  
    plugins: ["import"], // 解决动态导入import语法报错问题 --> 实际使用eslint-plugin-import的规则解决的
    parserOptions: {    
        ecmaVersion: 6,    
        sourceType: "module",    
    },  
    rules: {    
        "no-var": 2,  
    },
};

六、【动态引入js文件报错：找不到方法】接上一题，打包成功后运行项目，控制台报错 TypeError: XXX is not a function

解决方法：

控制台打印正常引入和动态引入的两个方法，对比输出结果。使用动态引入的方法时，改为fn.default()。

原因：js文件中使用了export default。与export两者的区别解释如下：

1.export与export default均可用于导出常量、函数、文件、模块等

2.在一个文件或模块中，export、import可以有多个，export default仅有一个

3.通过export方式导出，在导入时要加{ }，export default则不需要，并可以起任意名称

(1) 输出单个值，使用export default

(2) 输出多个值，使用export

(3) export default与普通的export不要同时使用

**遗留问题：**打完包之后引用的文件名变了，还是可以运行成功😓，这里不是很理解，拜托哪位大哥科普一下🙏

改动后代码：

document.getElementById("btn").onclick = function () {  // 动态导入 --> 实现按需加载  // 即使只被引用了一次，也会代码分割  import( /* webpackChunkName: "count",webpackPrefetch: true */ "./js/count.js").then((count) => {    console.log(count.default(2,1));  });};

其他方法：

import(/* webpackChunkName: "math" */ "./js/math.js").then(({ count }) => {
   console.log(count(2, 1));
});