webpack使用说明

webpack 是一个现代 JavaScript 应用程序的静态模块打包器,是前端工程化必不可少的工具之一,以下是我的学习笔记整理。

前端框架开发基础

前端工程化

前端工程原则

  • 模块化( js 、css 代码的复用)
  • 组件化(现有的 UI 结构的复用)
  • 规范化(目录结果划分、编码规范化、接口规范化、文档规范化、git 分支管理)
  • 自动化(自动化构建、自动部署、自动化测试)

何为前端工程化

前端工程化即,在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。这样有利于前端开发自成体系,有一套标准的开发方案和流程

前端工程化解决方案

早期:grunt 、gulp

目前主流: webpack、parcel

初识 webpack

webpack是什么

  • webpack是前端项目工程化的具体解决方案
  • 提供了友好的前端模块化开发、代码压缩混淆、处理浏览器端 JS兼容性、性能优化等功能
  • 让程序员把工作重心放在具体功能实现上,提高开发效率和项目可维护性

安装与配置

-D--save-dev 的缩写,表示开发时依赖,只在项目开发阶段用到。

-S--save 的缩写,表示运行时依赖,即项目打包发布运行时要用到。

1
npm install webpack webpack-cli -D
  1. 在项目根目录中创建 webpack.config.js 配置文件,初始化基本配置:
1
2
3
4
5
6
module.exports = {
// mode 用于指定构建模式,可选值有 development 和 production
// development开发环境,不会对打包生成的文件进行代码压缩和性能优化,打包速度快,适合开发阶段使用
// production生产环境,与development反之
mode: 'development',
}
  1. package.json 文件的 scripts 节点下,新增 dev 脚本:
1
2
3
4
"scripts" :{
// 配置好后就能通过 npm run dev 命令执行打包过程
"dev": "webpack"
}
  1. 在终端中运行 npm run dev 命令,即可启动 webpack 进行项目的打包构建

webpack.config.js 文件的作用

webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前,会先读取这个配置文件,从而基于给定的配置,对项目进行打包。

webpack默认约定

  • 默认打包入口文件为 src -> index.js
  • 默认输出文件路径为 dist -> main.js
  • 可以在webpack.config.js 配置文件中,通过entry节点指定打包入口,output节点指定打包出口
1
2
3
4
5
6
7
8
9
const path = require('path')

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

webpack插件

webpack-dev-server

类似于nodejs中的nodemon工具,每当修改源码,webpack会自动进行项目打包和构建

webpack-dev-server会将打包的js放到内存中,方便快速读写更改

安装webpack-dev-server

1
npm install webpack-dev-server -D

配置webpack-dev-server

  1. 修改 package.json -> scriptsdev 命令:
1
2
3
"scripts": {
"dev": "webpack serve"
}
  1. 运行 npm run dev 命令,重新打包项目
  2. 浏览器访问 http://localhost:8080 地址,查看打包效果

devServer 节点

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

1
2
3
4
5
devServer: {
open: true, // 初次打包完成后,自动打开浏览器
host: '127.0.0.1', // 访问地址
port: 80 // 访问端口号
}

html-webpack-plugin

  • webpack中的HTML插件,类似于模板引擎插件
  • 可以通过此插件自定制index.html页面的内容

webpack的loader

实际开发中,webpack只能打包处理js后缀模块,非js后缀结尾的模块,需要调用loader加载器才可以正常打包,比如

在webpack.config.js 的module -> rules 数组中,添加相应的规则:

  • css-loader 处理 css 相关文件
  • less-loader 处理 less 相关文件
  • url-loader 处理 图片等相关文件
  • babel-loader 处理 webpack 无法处理的高级JS语法
    • babel 的使用需要在use后面添加一个 exclude 排除 node_modules目录下的JS文件
    • 还需要创建一个 babel.config.js 的配置文件

打包发布

为何需要打包发布

  • 开发环境下,打包生成的文件存放于内存中,无法得到最终打包生成的文件
  • 开发环境下,打包生成的文件不会进行代码压缩和性能优化

配置打包

在 package.json 文件的 scripts 节点下,新增build命令如下:

1
2
3
"scripts":{
"build" : "webpack --mode production"
}

把 JS 文件统一生成到 js 目录

在 webpack.config.js 配置文件的 output 节点中,进行配置:

1
2
3
4
5
ouput: {
path: path.join(__dirname, 'dist'),
// 将 bundle.js 文件存放到 dist 目录的 js 子目录中
filename: 'js/bundle.js',
}

把图片统一生成到 image 目录

修改 webpack.config.js 中的 url-loader 配置项,新增 outputPath 选项指定图片文件的输出路径:

1
2
3
4
5
6
7
8
9
10
11
{
test: /\.jpg|png|gif$/,
use: {
loader: 'url-loader',
options: {
limit: 23333,
// 指明生成的图片存到 dist 目录下的 image 子目录中
outputPath: 'image'
}
}
}

自动清理 dist 目录下的旧文件

安装配置 clean-webpack-plugin

1
npm install clean-webpack-plugin@3.0.0 -D

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

1
2
3
4
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// plugins 节点挂载 CleanWebpackPlugin 实例对象
plugins: [htmlPlugin, new CleanWebpackPlugin()]

企业级项目打包发布

企业级项目打包发布的流程更复杂:

  • 生成打包报告,根据报告分析具体的优化方案
  • Tree-Shaking
  • 为第三方库启用 CDN 加载
  • 配置组件的按需加载
  • 开启路由懒加载
  • 自定制首页内容

SourceMap

SourceMap 就是信息文件,存储着压缩混淆代码转换前的位置信息。

出错的时候,SourceMap 将直接显示出错的原始代码位置,极大方便后期的调试。

在 webpack.config.js 添加如下配置

1
2
3
4
5
6
module.exports = {
# 在开发调试的时候,有行号,且暴露代码
devtools: "eval-source-map"
# 在实际发布的时候,只有行号,不暴露代码
devtools: "nosources-source-map"
}

生产环境时,需要关闭该设置。

@的原理与好处

@ 表示 src 源代码目录,从外往里找, 不要使用 ../

配置方式: 在 webpack.config.js 中

1
2
3
4
5
resolve: {
alias : {
"@" : path.join( __dirname,"./src/")
}
}

参考资料

前端工程化与 webpack 基础 | BruceBlog (gitee.io)

黑马程序员Vue全套视频教程,从vue2.0到vue3.0一套全覆盖,前端必会的框架教程_哔哩哔哩_bilibili