前端工程化（二）--- webpack

一、概念

​ webpack 是目前十分流行的前端项目构建工具（打包工具），提供了友好的模块化支持，以及代码压缩混淆、处理 js 兼容性问题、性能优化等强大功能，大大提高了开发效率。目前大多企业的前端项目都是基于 webpack 进行打包构建的。webpack 是基于 node.js 开发的打包工具，所以在它的配置文件中，支持使用node.js 相关的语法和模块。

​ 现在的项目开发几乎不会让我们手动配置 webpack ，都会使用脚手架创建项目，自动配置webpack，所以我们只要简单了解webpack配置过程即可。

二、基本使用

​ 结合一个列表隔行变色的案例来说明webpack的基本使用。

知识补充：

​ ① npm install xxxx -S 保存在package.json 的dependencies下面 ，表示开发阶段和部署运行阶段都要用到。-S 是 --save 的简写

​ ② npm install xxxx -D 保存在package.json 的devDependencies下面 ，表示只在开发阶段要用到。-D是 --save-dev 的简写

​ ③ __dirname 表示该文件所在的目录 join 拼接路径

​ ④ npm install xxxx@版本号 可以通过在要下载的包后面加上 @版本号 的形式来安装特定版本的包。

1、初始化项目目录

​ ① 创建项目目录文件夹，并在地址栏输入 cmd ，进入终端界面，输入 npm init -y 命令，初始化包管理配置文件 package.json 。

​ ② 在项目根目录下，新建 src 源代码目录，我们写的所有页面相关代码都放在此处。

​ ③ 在 src 目录下，新建index.html、index.js 等项目基本文件。

​ ④ 在index.html文件中，书写页面列表基本结构。

​ ⑤ 在地址栏输入 cmd ，进入终端界面，输入 npm install jquery -S 命令，安装 JQuery 到项目中。

​ ⑥ 通过ES6模块化的方式导入jQuery，并编写代码实现隔行变色效果。

// 打开index.js 文件，编写代码并导入jQuery

// 导入jQuery
import $ from "jquery";

$(function() {
    $("li:odd").css("backgroundColor","red");
    $('li:even').css('backgroundColor', 'pink');
})

​ 注意： 此时项目运行会报错，因为模块化导入 jQuery的语句属于ES6的新语法，在浏览器中有兼容性问题，所以接下来我们需要安装 webpack 来解决这个问题。

2、在项目中安装配置 webpack

​ ① 在地址栏输入 cmd ，进入终端界面，输入npm install webpack webpack-cli -D ，安装webpack 相关的包。

​ ② 在项目根目录中，创建 webpack 的配置文件：webpack.config.js，并在其中进行初始化配置，webpack 会根据这个配置文件中给定的配置，对项目进行打包。

module.exports = {
	// 该属性用来设置项目的编译模式，可选值有 development(开发模式) 和 production(发布模式)
	mode: 'development'
}
// 如果设置为development则表示项目处于开发阶段，不会对代码进行压缩和混淆，包的体积大一些，打包速度会快一些
// 如果设置为production则表示项目处于上线发布阶段，会对代码进行压缩和混淆，包的体积小一些，打包速度会慢一些

​ ③ 在项目的 package.json 的 script 节点下，新增 dev 脚本：

"scripts":{
	"dev":"webpack" // scripts节点下的脚本，可以在终端通过 npm run 运行
    }
    

​ ④ 在终端运行 npm run dev ，将会启动 webpack 进行项目打包

3、配置打包的入口和出口

​ 在 webpack 的 4.x 和5.x 版本中，默认的打包入口文件为：src/index.js ，默认的输出文件为：dist/main.js 。

​ 想要自定义打包的入口和出口文件，可以在 webpack.config.js 中，通过 entry 节点指定打包入口，以及通过 output 节点指定输出文件。

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

module.exports = {
    mode: 'development',
    // 指定打包入口文件的路径 __dirname  表示该文件所在的目录    join 拼接路径
    entry: path.join(__dirname,'./src/index.js'),
    // 指定输出文件的路径 和文件名称
    output: {
        path: path.join(__dirname,'./dist'),
        filename: 'bundle.js'
    }
}

4、配置 webpack 的自动打包功能

​ ① 在终端运行 npm install webpack-dev-server -D ，安装相关第三方插件。该插件会启动一个实时打包的 http 服务器，可以让 webpack 监听项目源代码的变化，并自动进行打包构建。

​ ② 修改 package.json 中scripts 中的 dev命令

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

​ ③ 将 index.html 中，script 脚本的引用路径修改为 “/buldle.js”。因为配置的 webpack-dev-server 之后，打包生成的文件 buldel.js 存放到了内存中，而不是实际的物理磁盘中。而且生成的文件默认放到了项目的根目录中，所以路径为 “/buldle.js”。

​ ④ 我们可以在 webpack.config.js 中，通过设置 devServer 节点 对自动打包进行更多的配置，如：

module.exports = {
    mode: 'development',
    // 指定打包入口文件的路径 __dirname  表示该文件所在的目录    join 拼接路径
    entry: path.join(__dirname,'./src/index.js'),
    // 指定输出文件的路径 和文件名称
    output: {
        path: path.join(__dirname,'./dist'),
        filename: 'bundle.js'
    },
    devServer: {
        open: true, // 在初次打包完成后，自定打开对应页面
        port: 88,  // 自动打包所使用的的接口
        host: '127.0.0.1'  // 设置自动打包的主机地址。
    }
}

​ ⑤ 在终端中再次运行 npm run dev 命令，重新对项目进行打包，打包结束后不要关闭终端窗口，终端窗口会显示自动打包相关信息。如果要结束自动打包，只需在终端窗口中，连续两次 ctrl + c 即可。

​ ⑥ 如果没有配置自动打开网页，则在浏览器访问 http://localhost:8080 ，尝试自动打包效果。

5、配置 html-webpack-plugin 生成预览页面

​ ① 在终端中，运行 npm install html-webpack-plugin –D 命令，安装 html-webpack-plugin 插件。该插件会将src目录下的index.html页面，复制一份放到项目根目录下，并将打包生成的 bundle.js文件导入到该文件中，但该文件是放在内存中的，所以项目目录中不会显示该文件。

​ ② 修改 webpack.config.js 配置文件：

// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象
 template: './src/index.html', // 指定要用到的模板文件
 filename: 'index.html' // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})

module.exports = {
    mode: 'development',
    // 该数组用来存储webpack 打包期间会用到的一些插件，只有在该数组中的插件才会生效。
    plugins:[htmlPlugin], 
    // 指定打包入口文件的路径 __dirname  表示该文件所在的目录    join 拼接路径
    entry: path.join(__dirname,'./src/index.js'),
    // 指定输出文件的路径 和文件名称
    output: {
        path: path.join(__dirname,'./dist'),
        filename: 'bundle.js'
    },
    devServer: {
        open: true, // 在初次打包完成后，自定打开对应页面
        port: 88,  // 自动打包所使用的的接口
        host: '127.0.0.1'  // 设置自动打包的主机地址。
    }
}

三、webpack 中的 加载器（loader）

1、loader概述

​ 在实际开发中，我们经常将css写在 .css 文件中或者less文件以及图片文件等等，如果想要起作用，需要将其通过模块化引用的方式导入到打包入口文件中，但webpack 默认只能打包处理以 .js 后缀名结尾的模块。如果想要处理其他非 .js 后缀名结尾的模块，则需要调用 loader 加载才能进行打包处理。所以 loader 加载器的作用就是协助 webpack 打包处理特定的文件模块。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RrerYchN-1635165874603)(D:\Typora\笔记博客\images\前端工程化\loader的调用过程.png)]

2、配置处理 css文件的loader

​ ① 在项目终端中，运行 npm install style-loader css-loader -D 命令，安装处理 css 文件的loader。

​ ② 在 webpack.config.js 里的 module 内的rules数组中，添加对应 loader 规则。

module.exports = {
    mode: 'development',
    // 该数组用来存储webpack 打包期间会用到的一些插件，只有在该数组中的插件才会生效。
    plugins:[htmlPlugin], 
    // 指定打包入口文件的路径 __dirname  表示该文件所在的目录    join 拼接路径
    entry: path.join(__dirname,'./src/index.js'),
    // 指定输出文件的路径 和文件名称
    output: {
        path: path.join(__dirname,'./dist'),
        filename: 'bundle.js'
    },
    devServer: {
        open: true, // 在初次打包完成后，自定打开对应页面
        port: 88,  // 自动打包所使用的的接口
        host: '127.0.0.1'  // 设置自动打包的主机地址。
    },
    module: { 
        // 设置所有loader 的匹配规则，test 表示匹配的文件类型 ，use 表示对应要调用的loader
        rules: [ 
            // loader 的顺序是固定的 调用顺序是从后往前调用
            { test: /\.css$/,use: ['style-loader','css-loader'] }
        ]
    }
}

3、配置处理 less文件的loader

​ ① 在项目终端中，运行 npm install less-loader less -D 命令，安装处理 less 文件的loader。

​ ② 在 webpack.config.js 里的 module 内的rules数组中，添加对应 loader 规则。

    module: { 
        // 设置所有loader 的匹配规则，test 表示匹配的文件类型 ，use 表示对应要调用的loader
        rules: [ 
            // loader 的顺序是固定的 调用顺序是从后往前调用
            { test: /\.css$/,use: ['style-loader','css-loader'] },
            { test: /\.less$/,use: ['style-loader','less-loader'] }
        ]
    }

4、配置处理scss文件的loader

​ ① 在项目终端中，运行 npm install sass-loader node-sass -D 命令，安装处理 sass 文件的loader。

​ ② 在 webpack.config.js 里的 module 内的rules数组中，添加对应 loader 规则。

module: { 
    // 设置所有loader 的匹配规则，test 表示匹配的文件类型 ，use 表示对应要调用的loader
    rules: [ 
        // loader 的顺序是固定的 调用顺序是从后往前调用
        { test: /\.css$/,use: ['style-loader','css-loader'] },
        { test: /\.less$/,use: ['style-loader','css-loader','less-loader'] },
        { test: /\.less$/,use: ['style-loader','css-loader','sass-loader'] }
    ]
}

5、配置 postCSS 自动添加 css 的兼容前缀

​ ① 运行 npm install postcss-loader autoprefixer -D 命令，安装对应 loader 。

​ ② 在项目根目录中，创建 postcss 的配置文件 postcss.config.js ，并进行初始化配置：

// 导入自动添加前缀的插件
const autoprefixer = require('autoprefixer')
module.exports = {
    // 挂载插件
    plugins: [ autoprefixer ]
}

​ ③ 在 webpack.config.js 里的 module 内的rules数组中，修改 css的 loader 规则：

module: { 
    // 设置所有loader 的匹配规则，test 表示匹配的文件类型 ，use 表示对应要调用的loader
    rules: [ 
        // loader 的顺序是固定的 调用顺序是从后往前调用
        { test: /\.css$/,use: ['style-loader','css-loader','postcss-loader'] }
    ]
}

6、配置打包处理样式表中与 url 路径相关的文件（图片、字体等）

​ ① 在项目终端运行 npm i url-loader file-loader -D 命令，安装对应loader。

​ ② 在 webpack.config.js 里的 module 内的rules数组中，添加对应 loader 规则。

module: {
    rules: [
        // ? 后面是loader的参数项，limit 用来指定图片的大小，单位(byte) 
        // 只有文件大小<=limit 的图片，才能被转为 base64格式的图片
        {test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use: 'url-loader?limit=22229'}
    ]
}

7、配置打包处理 js 文件中的高级语法

​ webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借 助于 babel-loader 进行打包处理。

​ ① 在项目终端运行 npm install babel-loader @babel/core @babel/plugin-proposal-decorators -D 命令，安装 babel 对应依赖包。

​ ② 在项目根目录下，创建 babel 的配置文件 babel.config.js ，并定义相关配置项。

module.exports = {
	// 声明 babel要用到的插件
    plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
}

​ ③ 在 webpack.config.js 里的 module 内的rules数组中，添加对应 loader 规则。

module: {
    rules: [
		// exclude 用来排除文件目录，被排除的目录中的 js 文件不用被处理打包
        { test: /\.js$/,use: 'babel-loader',exclude: /node_modules/}
    ]
}

四、打包发布

1、概念

​ 项目开发完成之后，需要使用 webpack 对项目进行打包发布，主要原因是：开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件，而且打包生成的文件不会进行代码压缩和性能优化。所以为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。

2、配置

​ ① 在 package.json 文件的 scripts 节点下，新增 build 命令。

"scripts": {
    // 项目开发时 运行 npm run dev
    "dev": "webpack serve",
    // 项目发布时 运行 npm run build
    // --mode 用来指定webpack 的运行模式，会覆盖 webpack.config.js 中的 model节点
    "build": "webpack --mode production"
}

​ ② 在 webpack.config.js 配置文件的 output 节点中，修改 output 节点的属性，使 js 文件打包生成的文件统一放到 js 文件夹中。

output: {
    path:path.join(__dirname,'dist'),
    filename: 'js/bundle.js'
}

​ ③ 修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项，指定图片文件的输出路径统一到 image 目录中。

module: {
    rules: [
        { test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
          use: {
              loader: 'url-loader',
              options: {
                  limit: 22228,
                  outputPath: 'image'
              }
          }
        }
    ]
}

​ ④ 运行 npm run build 命令，将生成的 dist 文件夹丢给后端开发人员。