前端工程化主流解决方案Webpack

黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程_哔哩哔哩_bilibili喜欢的小伙伴们别忘了投币，点赞，收藏呦，历经 5 年的反复打磨与锤炼，黑马程序员重磅推出全套最新的 Vue2 + Vue3 基础课程。共计 500 多集的免费视频，助您轻松掌握前端圈最火的 Vue 框架！https://www.bilibili.com/video/BV1zq4y1p7ga?p=261&spm_id_from=333.1007.top_right_bar_window_history.content.click

前端开发的四个现代化：

• 模块化：js的模块化、css的模块化、其他资源的模块化
• 组件化：复用现有的UI结构、样式、行为
• 规范化：目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理
• 自动化：自动化构建、自动部署、自动化测试

一. Webpack的基本使用

Webpack是前端项目工程化的具体解决方案，可以帮我们解决一些JavaScript在浏览器的兼容性问题。

首先需要再项目的根目录文件夹中创建一个名为 src 文件夹，之后，我们的代码都在这个文件夹的文件中编写。

1. 在项目中安装和配置webpack

npm i webpack@5.5.1 webpack-cli@4.2.0 -D

（1）在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化下方的基本配置：

module.exports={
    mode:'development'  //mode用来指定构建模式，可选值有development和production
}

 mode节点的可选值：

• development：开发环境，打包速度快，不会进行代码压缩和性能优化
• production：生产环境，打包速度慢，会进行代码压缩和性能优化

（2）在packge.json的scripts节点下，新增dev脚本如下。script节点下的脚本，可以通过通过npm run 的方式执行，如npm run dev。

"scripts": {
    "dev":"webpack"
 }

（3）在终端中运行npm run dev命令，启动 webpack 进行项目的打包构建。

（每次修改完代码要看效果的时候都需要重新打包，非常麻烦，解决该问题需要用到webpack中的插件webpack-dev-server，具体步骤见下文）

npm run dev

（4）打包构建成功后，webpack帮我们自动生成了一个dist文件夹，其中有main.js文件，是转换完成后没有兼容性问题的.js文件。因此，在html文件中应导入main.js文件。

Webpack的默认约定：

• 默认的打包入口文件为 src  ->  index.js
• 默认的输出文件路径为 dist  -> main.js
• 注意：可以在webpack.config.js中修改打包的默认约定

const path=require('path')  //导入node.js中专门存放操作路径的模块

module.exports={
    mode : 'development',
    entry : path.join(__dirname,'./src/index.js'), //指定打包的入口
    output : { //指定打包的出口
        path : path.join(__dirname,'./dist'), //输出文件的存放路径
        filename : 'bundle.js' //输出文件的名称
    }  
}

2. 在项目中安装和配置webpack-dev-server

webpack每次修改完代码要看效果的时候都需要重新打包，非常麻烦，解决该问题需要用到webpack中的插件webpack-dev-server。

npm install webpack-dev-server@3.11.0 -D
npm install webpack-cli
# 报错TypeError: Class constructor ServeCommand cannot be invoked without 'new'
# 所以我又下载了一次webpack-cli

（1）修改package.json的scripts节点中的dev命令如下：

"scripts": {
    "dev": "webpack serve" 
}

（2）再次运行npm run dev命令，重新进行项目的打包

（3）在浏览器中访问http://localhost:8080地址，查看自动打包效果（注意：因为webpack-dev-server会启动一个实时打包的http服务器）

（4）webpack-dev-server打包生成的文件，存放到了内存中，这样提高了实时打包的输出性能。webpack-dev-server生成到内存中的文件，默认放到了项目的根目录中，是虚拟、不可见的。因此，在html文件中直接导入根目录下的打包文件即可。

<script src="/bundle.js"></script>

3. 在项目中安装和配置html-webpack-plugin插件

html-webpack-plugin是webpack中的HTML插件，可通过该插件自定制index.html页面的内容。

npm install html-webpack-plugin@4.5.0 -D

在webpack.config.js文件中进行配置：

需求：通过html-webpack-plugin插件，将src目录下的index.html页面，复制到项目根目录一份。

//1、导入HTML插件，得到一个构造函数
const HtmlPlugin=require('html-webpack-plugin')

//2、创建HTML插件的实例对象
const htmlPlugin=new HtmlPlugin({
    template:'./src/index.html', //指定原文件的存放路径
    filename:'./index.html' //指定生成的文件存放路径
})

module.exports={
    mode : 'development',
    plugins:[htmlPlugin], //3、通过plugins节点使htmlPlugin插件生效
}

注意：（1）通过HTML插件复制到项目根目录中的index.html页面也被存放到了内存中。（2）HTML插件在生成的index.html页面的底部，自动注入了打包的bundle.js文件。

4. 对webpack的更多配置

在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置。

module.exports={
    mode : 'development',
    devServer : {
        open : true, //初次打包完成后，自动打开浏览器
        host : '127.0.0.1', //实时打包所使用的主机地址
        port : 80,  //实时打包所使用的的端口号
    }
}

---

二. Webpack中的loader加载器

webpack默认只能打包处理.js后缀名结尾的模块，要解决此问题需要调用loader加载器协助webpack打包处理特定的文件模块。

• css-loader打包处理.css相关的文件
• less-loader打包处理.less相关的文件
• babel-loader打包处理webpack无法处理的高级JS语法

1. 打包和处理css文件

npm i style-loader@2.0.0 css-loader@5.0.1 -D

在webpack.config.js文件中进行配置，在module->rules数组中，添加loader规则：

module.exports={
    mode : 'development',
    module:{     //所有第三方文件模块的匹配规则
        rules:[  //文件后缀名的匹配规则，test表示匹配文件类型，use表示要调用的loader
            {test:/\.css$/,use:['style-loader','css-loader']}
        ]
    }
}

注意：（1）use数据中指定的loader顺序是固定的，（2）多个loader的调用顺序是从后往前调。

2. 打包和处理less文件

npm i less-loader@7.1.0 less@3.12.2 -D

在webpack.config.js文件中进行配置，在module->rules数组中，添加loader规则：

module.exports={
    mode : 'development',
    module:{     //所有第三方文件模块的匹配规则
        rules:[  //文件后缀名的匹配规则，test表示匹配文件类型，use表示要调用的loader
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
        ]
    }
}

3. 打包和处理样式表中与url有关的路径

npm i url-loader@4.1.1 file-loader@6.2.0 -D

在webpack.config.js文件中进行配置，在module->rules数组中，添加loader规则：

module.exports={
    mode : 'development',
    module:{     
        rules:[  
            //？之后是loader的参数项，limit用来指定图片大小，单位是字节（byte）
            //只有<=limit大小的图片，才会被转成base64格式的图片    
            {test:/\.jpg|png|gif$/,use:'url-loader?limit=22229'}
        ]
    }
}

loader的另一种配置方式：

module.exports={
    mode : 'development',
    module:{     
        rules:[    
            {test:/\.jpg|png|gif$/,use:{
                loader:'url-loader',
                options:{
                    limit:22228
                },
            }}
        ]
    }
}

4. 打包和处理js文件中的高级语法

npm i babel-loader@8.2.1 @babel/core@7.12.3 @babel/plugin-proposal-class-properties@7.12.1 -D

在webpack.config.js文件中进行配置，在module->rules数组中，添加loader规则：

module.exports={
    mode : 'development',
    module:{     
        rules:[    
            {
            test:/\.js$/,
            exclude:/node_modules/,
            use:{
                loader:'babel-loader',
                options:{
                    //声明一个babel插件，此插件用来转化class中的高级语法
                    plugins:['@babel/plugin-proposal-class-properties'],
                },
            }}
        ]
    }
}

注意：exclude为排除项，表示babel-loader只需要处理开发者编写的js文件，不处理node_modules下的js文件。

---

三. 打包发布

开发环境下，打包生产的文件存放于内存中，无法获取到最终打包生产的文件，而且打包生产的文件不会进行代码压缩和性能优化。因此，要使用webpack对项目进行打包发布。

1. 配置wenpack的打包发布

（1）在package.json文件的scripts节点下，新增build命令：

  "scripts": {
    "dev": "webpack serve",
    "build":"webpack --mode production"
  }

注意1：开发环境中运行dev命令，项目发布时运行build命令！

注意2：--mode是一个参数项，用来指定webpack的运行模式，该参数项会覆盖webpack.config.js中的mode选项。

（2）把JavaScript文件统一生成到js目录中，在webpack.config.js配置文件的output节点中进行配置。把图片文件统一生成到image目录中，要在webpack.config.js中的url-loader配置项中新增outputPath选项，指定图片文件的输出路径。

module.exports={
    mode : 'development',
    module:{     
        rules:[    
            {
                test:/\.jpg|png|gif$/,
                use:{
                    loader:'url-loader',
                    options:{
                        limit:22228,
                        outputPath:'image'
                    },
                }   
            }
        ]
    },
    output:{
        path:path.join(__dirname,'dist'),
        filename:'js/bundle.js'
    },
    //省略其他配置项...
}

（3）在终端中运行以下命令完成打包发布，生成dist文件夹，里面是项目发布生成的文件。

npm run build

2. 安装并配置clean-webpack-plugin插件

为了自动清理dist目录下的旧文件，要安装并配置clean-webpack-plugin插件

npm install clean-webpack-plugin@3.0.0 -D

在webpack.config.js文件中进行配置： 

//1、按需导入插件，得到插件的构造函数之后，创建插件的实例对象
const {CleanWebpackPlugin}=require('clean-webpack-plugin')
const cleanPlugin=new CleanWebpackPlugin()
//2、把创建的cleanPlugin插件实例对象，挂载到plugins节点中
module.exports={
    mode : 'development',
    plugins:[cleanPlugin], 
    //省略其他配置项...
}

---

四. Source Map

前端项目在投入生产环境之前都需要对JavaScript源代码进行压缩混淆，从而减小文件体积，提高文件加载效率，此时对压缩混淆之后的代码除错（debug）是一件极其困难的事。

Source Map是一个信息文件，里面存储着位置信息，即存储着代码压缩混淆前后的对应关系。有了它，出错时除错工具直接显示原始代码，而不是转换后的代码。

1. 开发环境

开发环境下，推荐在webpack.config.js中添加如下配置，以保证运行时报错的行数与源代码行数保持一致：

module.exports={
    mode : 'development',
    devtool : 'eval-source-map',
    //省略其他配置项...
}

注意：eval-source-map仅限在开发模式下使用，不建议在生产模式下使用！

2. 生产环境

（1）在生产环境下，如果省略了devtool选项，最终生成的文件中不包含Source Map，可以防止原始代码泄露。

（2）在生产环境下，如果只想定位报错的具体行数，且不想暴露源码，可以将devtool的值设置为nosources-source-map。

module.exports={
    mode : 'development',
    devtool : 'nosources-source-map',
    //省略其他配置项...
}

---

小结：实际开发中不需要自己配置webpack，可以直接使用  命令行工具（CLI）一键生成带有webpack的项目！