webPack基本使用

一、前端工程化

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

前端工程化指的是：企业及的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终落实到细节上，就是实现前端的‘四个现代化’

前端工程化的好处：

1. 前端工程化让前端开发能够“自成体系”，覆盖了前端项目从创建到部署的方方面面
2. 最大程度的提高了前端的开发效率，降低了技术选型、前后端联调等带来的协调沟通成本

前端工程化的解决方案：

• webpack
• parcel 

 二、webpack的基本使用

概念：webpack是前端项目工程化的具体解决方案

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。

好处：让程序员把工作的重心放在具体功能的实现上，提高了前端的开发效率和项目的可维护性

注意：目前企业级的前端项目开发中，绝大多数的项目都是局域webpack进行打包构建的。 

项目的创建：

1. 新建项目空白目录，并运行npm init -y命令，初始化管理配置文件package.json
2. 新建src源代码目录
3. 新建src - > index.html首页和 src- >index.js脚本文件
4. npm i jquery -s 安装jquery
5. 安装webpack配置文件解决兼容性等问题 npm i webpack@5.5.1 wenpack@4.2.0 -D (webpack的这些包都是项目开发阶段要用到的工具，在项目上线阶段就不需要了所以通过-D将包装到开发依赖节点下)

在项目中的配置webpack

        1.在项目跟目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置

module.exports={

    mode:'development'  //mode  用来指定构建模式，可选值有  development（开发是建议使用）和 production（开发完成后建议使用）
}

        2.在package.json的script节点下，新增dev脚本 如下：

"script":{

     "dev":"webpack"//script节点下的脚本，可以通过 npm run 执行。例如 npm run dev
}

mode的可选值

mode节点的可选值有两个，分别是：

1. development
   1. 开发环境
   2. 不会对打包生成的文件进行代码压缩和性能优化
   3. 打包速度快，适合在开发阶段使用
2. producion
   1. 生产环境
   2. 会对打包生成的文件进行代码压缩和性能优化
   3. 打包速度很慢，仅适合在项目发布阶段使用

webpack插件的作用

通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便，最常用的webpack插件有如下两个：

• webpacl-dev-server
  1. 类似于node.js阶段用到的nodemon工具
  2. 每当修改了源代码，webpack会自动进行项目的打包和构建
  3. 不配置webpack-dev-server的情况下，webpack打包生成的文件，会存放到实际的物理磁盘上
     1. 严格遵守开发者在webpack.config.js中指定配置
     2. 根据output节点指定路径进行存放
  4. 配置了webpak-dev-server之后，打包生成的文件存放到了内存中
  5. webpack-dev-server生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的

//安装  webpack-dev-server
控制台输入  npm i webpack-dev-server@3.11.0 -D

//1、配置webpack-dev-server  修改package.json->scripts中的dev
"scripts":{
    "dev":"webpack server"  //script 节点下的脚本，可以通过npm run 执行
}
//2、安装完后再次执行npm run dev命令，重新进行项目的打包
//3、在浏览器中访问http://localhost:8080地址，查看自动打包效果
//    注意：webpack-dev-server会启动一个实时打包的http服务器

• html-webpack-plugin
  1. webpack中的HTML插件（类似于一个模版引擎插件）
  2. 可以通过此插件自定制index.html页面的内容
  3. 通过HTML 插件复制到项目根目录中的index.html页面，也被放到了内存中
  4. HTML插件在生成的index.html页面的底部，自动注入了打包的bundle.js文件

html-webpack-plugin是webpack中的HTML插件，可以通过此插件自定制index.html页面的内容。
需求：通过html-webpack-plugin插件，将src目录下的index.html首页，复制到项目根目录中一份

//安装 html-webpack-plugin
npm install html-webpack-plugin@4.5.0 -D

配置html-webpack-plugin
//1、在配置文件中 wenpack.config.js 中，导入 HTML 插件，得到一个构造函数
const HtmlPlugin = require（"html-webpack-plugin"）

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

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

webpack.config.js中devserver节点

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

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

}

webpack中的loader

loader概述：在实际开发过程中，webpack默认之鞥呢打包处理以.js后缀名结尾的模块。其他非js后缀名结尾的模块，webpack默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错

loader 加载器的作用：协助webpack打包处理特定的文件模块，比如：

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

 loader的调用过程

打包处理css文件

//安装  打包css文件
运行npm i style-loader@2.0.0 css-loader@5.0.1 -D


//在webpack.config.js的module->rules数组中 添加loader规则
module:{   //所有第三方文件模块匹配规则
    rules:[    //文件后缀名的匹配规则
        {test:'/\.css/',use:['style-loader','css.loader']}
    ]
}
其中，test表示匹配的文件类型，use表示对应要调用的loader

打包处理less文件

//安装  打包css文件
运行npm i less-loader@7.1.0 less@3.12.2 -D


//在webpack.config.js的module->rules数组中 添加loader规则
module:{   //所有第三方文件模块匹配规则
    rules:[    //文件后缀名的匹配规则
        {test:'/\.css/',use:['style-loader','css.loader'，"less-loader"]}
    ]
}
其中，test表示匹配的文件类型，use表示对应要调用的loader

打包处理样式表中与url路径相关的文件

//打包处理样式表中与url路径相关的文件

//1、运行npm i url-loader@4.1.1 file-loader@6.2.0 -D  命令

//2、在webpack.config.js的module->数组中，添加loader规则
module:{
    rules:[
        {test:"/\.jpg|png|gif$/",use:"url-loader?limit=22229"}//22229为图片字节大小
    ]
}

其中？之后的是loader的参数项：

• limit用来指定图片的大小，单位是字节（byte）
• 只<=limit定义大小的图片，才会被转为base64格式的图片

 loader的另一种配置方式

带参数项的loader还可以通过对象的方式进行配置：

//2、在webpack.config.js的module->数组中，添加loader规则
module:{
    rules:[//第三方模块的匹配规则
        {
            test:"/\.jpg|png|gif$/",//配置图片文件
            use:{
                loader:"url-loader",//通过 loader 属性指定要调用的 loader
                options:{//  通过 options 属性指定参数项
                     limit:22229
                }
            }
        }
    ]
}