# Webpack 前端工程化

# 模块化

js,css 等的模块化

# 组件化

复用现有的 UI, 样式行为

# 规范化

目录结构的划分，编码规范化，接口规范化，文档规范化，git 分支管理

# 自动化

自动化构建，自动化部署，自动化测试

# 基本使用

1. 新建空白项目使用命令初始化包管理配置文件

1	npm init -y

2. 新建 src 源代码目录

3. 新建 src/index.html 和 index.js

4. 初始化页面基本结构

5. 安装 jq

1	npm intsall jquery -S

通过 es6 模块化引入 js，并写出代码让 html 页面的 ulli 实现隔行渐变，发现不起作用

1	import $from 'jquery'

下载 webpack 前端工程化构建工具

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

根目录创建 webpack.config.js 文件并初始化：

1
2
3

module.exports={
mode:'development'//指定构建模式是开发模式还是生产模式development/production
}

package.json 中 script 中创建指令

1 2	// 通过npmrun启动项目 "dev": "webpack",

在终端运行

1	npm run dev

发现项目多了一个 dist 文件夹，看一下里面。webpack 通过配置把 js 文件转换成了没有兼容性的文件，在 index.html 中导入发现可以正常运行

1	<script src="../dist/main.js"></script>

把 mode 设置为生产模式然后打包

1	mode:'production'

对比两次打包的结果发现文件小了时间长了

webpack.config.js 文件在 webpack 真正打包前会通过读取这个配置文件，基于给定的配置进行打包

可以边看 webpack 官网边学习

# 1. 修改输入输出文件路径

//导入路径处理模块
const path =require('path')
module.exports = {
  mode: 'production',
  entry: path.join(__dirname,'./src/index.js'),//文件打包入口文件
  output:{
    path:path.join(__dirname,'./dist'),//打包到什么地方
    filename:'main.js'//文件叫什么名字
  }
}

# 2. 安装 webpack-dev-server 让 webpack 监听项目源代码的变化，从而自动打包

1	npm install webpack-dev-server@3.11.2 -D

# 1. 配置在 package.json script 中重新配置

1	"dev": "webpack serve"

# 2. 执行命令后每次保存都会实时打包实时打包的文件放到内存里面了

1	npm run dev

不再根据 output 路径输出，存放到实际的物理磁盘上，提高输出性能，默认放到了项目的根目录中隐藏不可见的，但是是可以被访问到的

1	<script src="/main.js"></script>

通过 / 文件名访问，在终端中的端口中可以访问到 html 页面

# html-webpack-plugin 打包 html 页面

在 webpack 中配置

1. 安装 4.5.1

1	npm install --save-dev html-webpack-plugin

2. 安装完成后在 webpack 文件中配置

引入

1	const HtmlWebpackPlugin = require('html-webpack-plugin');

创建插件的实例对象

//导入html打包文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
//创建html打包文件的实例对象
const HtmlPluing = new HtmlWebpackPlugin({
  template: './src/index.html', //源文件存放路径
  filename: 'index.html' //指定打包完成后存放路径
})

挂载实例对象

1	plugins: [HtmlPluing]

出现 Cannot GET / 检查端口 localhost 是否被占用，试着用 127.0.0.1 访问试试，还不行就 ping 一下 localhost 看看是不是：：1 是的话就是端口被占用，重启电脑或修改相关配置文件

修改 host 文件用记事本打开 C:/WINDOWS/system32/drivers/etc/hosts 文件，看里面是否有包含：

127.0.0.1 localhost

如果没有则将其添加进去，再查看能否访问 localhost。

注意：1. 通过 dev-server 打包的文件默认放到了内存中去看不到但是可以访问到

2. 生成的 index 文件页面底部自动引入 js 文件，可以在浏览器 element 选项控制台中看见在尾部由引入 js 的 script 标签

# devServer 节点

module.exports = {
  mode: 'development',
  entry: path.join(__dirname, './src/index.js'),
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  devServer: {
    open: true, //自动打开浏览器
    host: '127.0.0.1', //指定主机地址
    port: 8080 //指定端口号
  },
  plugins: [HtmlPluing]
}

指定运行的端口号和主机地址等

# loader 协助 webpack 打包特定的模块

webpack 只能打包以.js 结尾的模块，其他模块则默认处理不了，需要调用 loader 包才可以正常打包！

css-loader,less-loader 处理 css,less 文件

babel-loader 处理更高级的 js 语法等

1.webpack 运行时通过判断是不是 js 模块

2. 是的话继续向下查看是不是更高级的 js 语法，

2.1 不是 js 模块的话就看看是否配置了 loader 处理模块没有就报错，

3 回到 2 是高级的 js 语法的话就要判断有没有配置 babel 有就处理没有就报错

回到 2 如果是基础的 js 语法就让 webpack 进行处理

# 打包处理 css 文件

安装处理 css 文件的 loader, 和打包 css 文件的 loader

1	npm i style-loader css-loader -D

配置处理规则 test 表示匹配的文件类型，use 表示对应要调用的 loader

module: {
   rules: [
     {
       test: /\.css$/i,
       use: ['style-loader', 'css-loader']//先引入后打包
     }
   ]
 }

# 打包处理 less 文件

安装插件

1	npm i less-loader less -D

修改配置文件

module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/i,
        use: ['style-loader', 'css-loader','less-loader']
      }
    ]
  }

# loader 加载器

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

1	npm i url-loader file-loader -D

装了 url-loader 图片不显示了

{
       test: /\.jpg|png|gif$/i,
       use: ['url-loader?limit=55555555555']
     }

通过对象形式配置

 {
        test: /\.jpg|png|gif$/i,
        use: {
            loader:'url-loader',
            options:{
            limit:222222222//图片小于这个大小就会转化成base64格式
}
}
      }

# Babel-loader

打包处理高级 js 语法有些 js 语法带有特殊的类不容易被 webpack 理解

安装依赖包

1	npm i babel-loader

下一个 babel 的 Node.js API

1	@babel/core

下一个转化 class 中的高级语法

1	@babel/plugin-proposal-class-properties

配置配置文件

{
       test:'/\.js$/',
       exclude:'/node_modules',//排除node_modules文件
       use:{
         loader:'babel-loader',
         options:{
         plugins:['@babel/plugin-proposal-class-properties'],
         }
       }
     }

# 打包发布

1. 开发环境下打包生成的文件放在内存中，无法获取到最终的打包文件

2. 开发环境下，打包文件不会进行代码压缩和性能优化

配置打包发布

--mode 是模式属性，production 是值代表以生产模式打包文件

"scripts": {
    "dev": "webpack serve",
    "build":"webpack --mode production"
//--mode是模式属性，production是值代表以生产模式打包文件
  },

配置把 image,js 放到独立的文件夹

每次打包自动清理 dist 旧文件

安装插件 clean-webpack-plugin

1	npm i clean-webpack-plugin -D

修改配置文件，导入并实例化，在 plugins 中引用

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()
 
plugins: [HtmlPluing, cleanPlugin],

企业级打包发布

1. 生成打包报告，分析优化方案

2.Tree-Shaking

3. 为第三方库启用 cdn 加载

4. 配置组件按需加载

5. 路由懒加载

6. 自定义首页内容

# SourceMap

用来处理投入生产环境前压缩打包产生的压缩混淆，压缩混淆后的代码出 bug 很难解决。

sourcemap 是一个信息文件，里面储存着位置信息，也就是说 sourcemap 中储存着代码混淆的前后对应关系

在配置文件中配置

module.exports = {
  mode: 'development',
  devtool:'eval-source-map',//只能在开发环境使用
  entry: path.join(__dirname, './src/index.js'),
  output: {

生产环境下默认省略 debtool 不会生成 sourcemap，防止代码暴露，可以将值设置为

1	devtool:'nosources-source-map'

这样就只会显示行数不会定位到代码

即看到行数又暴露代码可以设置 (不建议使用)

1	devtool:'source-map'

总结：

实际开发中不需要手动配置，脚手架可以直接生成带 webpack 的项目框架
webpack 安装，修改 webpack.config.js 打包配置文件
plugin（插件）：webpack-dev-server,html-webpack-plugin
loader:css-loader,style-loader,less-loader
sourcemap 用来定位错误行数方便调试

工程化