webpack

1.介绍

定义：本质上是一个用于现代JS应用程序的静态模块打包工具，当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将项目中所需的每个模块组合成一个或多个bundles，他们均为静态资源，用于展示你的内容
静态模块：指的是编写代码过程中的html,css,js,图片等固定内容的文件
打包：将静态模块内容，压缩，整合，转译等（前端工程化）
- 将less/sass转成css代码
- 把Es6+降级成ES5
- 支持多种模块标准语法

2.使用步骤

准备项目和源代码
下载webpack webpack-clic到当前项目中，并配置局部自定义命令（在package.json的scripts中配置）
运行自定义命令打包观察效果 npm run 自定义命令（项目文件中出现dist文件夹，下面有打包好的文件）

3.修改webpack打包入口和出口

注：具体可以在webpack官方文档中查看

项目根目录新建webpack.config.js配置文件
配置入口和出口

js 复制代码

const path = require('path');

module.exports = {
  //入口
  entry: path.resolve(__dirname, 'src/login'),
  //出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './login/index.js',
    clean: true //生成打包后内容之前清空输出的目录
  },
};

4.自动生成html文件

插件：html-webpack-plugin

使用步骤：（看webpack文档）

下载html-webpack-plugin本地软件包
配置webpack.config.js让webpack拥有插件能力

js 复制代码

  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/login.html'), //模板文件
      filename: path.resolve(__dirname, 'dist/login/index.html') //输出文件
    })
  ]

打包后观察效果 npm run XXX

5.打包css代码

加载器css-loader：解析css代码（webpack默认只能识别js代码）
加载器style-loader：把解析后的css代码插入到DOM
使用步骤：
- 准备css代码，并引入到js中
  js 复制代码
```
import 'bootstrap/dist/css/bootstrap.min.css'
import './index.css'
```
- 下载css-loader和style-loader本地软件包
  
  npm i css-loader style-loader --save-dev
- 配置webpack.config.js让webpack拥有该加载器功能（去官方文档复制）
  js 复制代码
```
//加载器，让webpack识别更多模块
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
```
- 打包后观察效果 npm run XXX
优化------提取css代码
- 单独提取css文件，因为css文件可以被浏览器缓存，减少js体积
- mini-css-extract-plugin插件：提取css代码
- 步骤：
  - 下载mini-css-extract-plugin软件包
    
    npm install --save-dev mini-css-extract-plugin
  - 配置webpack.config.js,让webpack拥有该插件的能力
    js 复制代码
```
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};
```
  - 打包后观察效果npm run XXX

优化------压缩过程

问题：css代码提取后没有压缩

解决：使用css-minimizer-webpack-plugin插件

下载 css-minimizer-webpack-plugin

npm install css-minimizer-webpack-plugin --save-dev

配置webpack.config.js,让webpack拥有该插件的能力

js 复制代码

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
  optimization: {
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
      `...`,
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

如果还想在开发环境下启用 CSS 优化，请将 optimization.minimize 设置为 true

注意：想打包其他文件或资源去webpack官网查询相关步骤就行

6.webpack搭建开发环境

前面每个文件修改之后，都要重新打包，效率太低
开发环境：配置webpack-dev-server快速开发应用程序
作用：启动web服务，自动监测代码变化，热更新到网页

步骤：

下载webpack-dev-server软件包到当前项目

bash 复制代码

npm install --save-dev webpack-dev-server

设置打包的模式为开发模式，配置自定义命令（dev）

package.json

json 复制代码

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack server --open"
  },

webpack.config.js

js 复制代码

module.exports = {
  //打包模式 development开发模式-使用相关内置优化
  mode: 'development',}

使用npm run dev 来启动开发服务器，试试热更新效果,注意

注意：
- 注意1：webpack-dev-server借助http模块创建8080默认web服务
- 注意2：默认以public文件夹 作为服务器根目录
- 注意3：webpack-dev-server根据配置，打包相关代码在内存当中，作为服务器的根目录，所以可以自己手动访问dist目录下内容，当然想要自动跳转到dist文件夹下的入口文件，可以在public文件夹下新建index.html，设置location.href来进行跳转
js 复制代码
```
 <script>
    //webpack-dev-server的web服务自动跳转到我们规定的首页
    location.href = '/login/index.html'
  </script>
```

7.打包模式

定义：告知webpack使用相应模式的内置优化

分类：

模式名称	模式名字	特点	场景
开发模式	development	调试代码，实时加载，模块热替换	本地开发
生产模式	production	压缩代码、资源优化、更轻量	打包上线

设置方式：
- 方式1.在webpack.config.js配置mode选项
- 方式2.在package.json命令行设置mode参数

8.开发环境调错

问题：error 和 warning 代码的位置和源代码对不上，不方便我们调试！
解决：启动 webpack 的 source-map 资源地图功能
- 在 webpack.config.js 配置 devtool 选项和值开启功能（注意：只在开发环境下使用）
js 复制代码
```
if (process.env.NODE_ENV === 'development') {
  config.devtool = 'inline-source-map'
}
```
- 代码中造成错误，并在开发服务器环境下查看效果

9.路径解析别名设置

作用：让我们前端代码引入路径更简单（而且使用绝度路径）
- 在 webpack.config.js 中配置 resolve.alias 选项
js 复制代码
```
//解析
  resolve: {
    //别名
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
```

10.优化------CDN使用

cdn定义：内容分发网络，指的是一组分布在各个地区的服务器
作用：将静态资源文件放在cdn网络中各个服务器中，供用户就近请求获取
使用：
- 在 html 中引入第三方库的 CDN 地址并用模板语法判断
- 配置 webpack.config.js 中 externals 外部扩展选项（防止某些 import 的包被打包）
- 两种模式下打包观察效果

11.多页面打包

准备源码（html，css，js）放入相应位置，并改用模块化语法导出
下载 form-serialize 包并导入到核心代码中使用（略过）
配置 webpack.config.js 多入口和多页面的设置
重新打包观察效果