Webpack基础
Jiuge 2021/8/31 Webpack
# Webpack的基本使用
# 什么是webpack
概念
webpack 是前端项目工程化的具体解决方案。
主要功能
提供友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript 的兼容性、性能优化等强大的功能。
好处
让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。
# 在项目中使用webpack
初始化
- 新建项目空白目录，并运行
npm init –y命令，初始化包管理配置文件package.json
安装
- 在终端运行如下的命令，安装
webpack相关的两个包
npm install webpack webpack-cli -D
配置
- 在项目根目录中，创建名为
webpack.config.js的webpack配置文件，并初始化如下的基本配置。(webpack在真正开始打包构建之前，会先读取webpack.config.js这个配置文件，从而基于给定的配置，对项目进行打包)
module.exports = {
mode:'development'
/*
mode用来指定构建模式,
可选值有两个:
development:开发环境,不会对打包生成的文件进行代码压缩和性能优化打包速度快,适合在开发阶段使用;
production:生产环境,会对打包生成的文件进行代码压缩和性能优化打包速度很慢,仅适合在项目发布阶段使用
*/
}
- 在
package.json的scripts节点下，新增dev 脚本
"scripts": {
"dev": "webpack"// script 节点下的脚本,可以通过 npm run 执行
}
- 在终端中运行
npm run dev命令，启动webpack进行项目的打包构建
自定义打包的入口与出口
在 webpack 中默认的打包入口文件为src -> index.js，默认的输出文件路径为 dist -> main.js，我们可以在 webpack.config.js 中自定义打包的入口与出口。
const path = require('path')// 导入 node.js 中专门操作路径的模块
module.exports = {
//指定打包的入口
entry: path.join(__dirname, './src/index.js'),
//指定打包的出口
output: {
//表示输出文件的存放路径
path: path.join(__dirname, './dist'),
//表示输出文件的名称
filename: 'build.js'
},
}
# Webpack中的插件
# webpack 插件的作用
通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。
最常用的 webpack 插件有如下两个：
webpack-dev-server： 类似于node.js阶段用到的nodemon工具，每当修改了源代码，webpack会自动进行项目的打包和构建html-webpack-plugin：webpack中的HTML插件(类似于一个模板引擎插件)，可以通过此插件自定制index.html页面的内容
# webpack-dev-server
安装
npm install webpack-dev-server -D
配置
- 修改
package.json -> scripts中的dev命令
"scripts": {
"dev": "webpack serve"
}
- 再次运行
npm run dev命令，重新进行项目的打包，在浏览器中访问http://localhost:8080地址可查看自动打包效果
# html-webpack-plugin
安装
npm install html-webpack-plugin -D
配置
// 1. 导入插件，得到构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2. 创建插件实例对象
const htmlPlugin = new HtmlPlugin({
template: './src/index.html',
filename: './index.html'
})
module.exports = {
mode: 'development',
plugins: [htmlPlugin], // 3. 挂载插件的实例对象
}
devServer 节点
在 webpack.config.js 配置文件中，可以通过 devServer节点 对 webpack-dev-server 插件进行更多的配置。
devServer: {
host: 'localhost', // 主机名
stats: 'errors-only', // 打包日志输出输出错误信息
port: 8081, // 端口号
open: true // 初次打包完后,自动打开浏览器
}
# Webpack 中的loader
在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错。
loader 加载器的作用：协助 webpack 打包处理特定的文件模块。比如：
css-loader可以打包处理.css相关的文件less-loader可以打包处理.less相关的文件babel-loader可以打包处理webpack无法处理的高级 JS 语法
# loader 的调用过程
# 打包处理 css 文件
- 运行
npm i style-loader css-loader -D命令，安装处理css文件的loader - 在
webpack.config.js的 module-> rules数组中，添加loader规则如下：
module.exports = {
mode: 'development',
module: { // 所有第三方文件模块的匹配规则
rules: [ // 文件后缀名的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
],
},
}
- 其中，
test表示匹配的文件类型，use表示对应要调用的loader，use数组中指定的loader顺序是固定的，都是从后往前调用
# 打包处理 less 文件
- 运行
npm i less-loader less -D命令 - 在
webpack.config.js的module -> rules数组中，添加loader规则如下：
module: {
rules: [
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
],
}
# 打包处理 url 路径文件
- 运行
npm i url-loader file-loader -D命令 - 在
webpack.config.js的module -> rules数组中，添加loader规则如下：
module: {
rules: [
{ test: /\.jpg|png|gif$/, use: 'url-loader?limit=50000' }
],
}
- 其中
?之后的是loader的参数项，limit用来指定图片的大小，单位是字节(byte)，只有≤ limit大小的图片，才会被转为base64格式的图片
# 打包处理 js 中的高级语法
webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借助于 babel-loader 进行打包处理。例如 webpack 无法处理下面的 JavaScript 代码：
class Person {
// 通过 static 关键字为 Person 类定义了一个静态属性 info
// webpack 无法打包处理 静态属性 这个高级语法
static info = 'person info'
}
console.log(Person.info)
- 安装
babel-loader相关的包
npm install babel-loader @babel/core @babel/plugin-proposal-class-properties -D
- 配置
babel-loader，在webpack.config.js的module -> rules数组中，添加loader规则如下：
module: {
rules: [
{
test: /\.js$/,
// exclude 为排除项
// 表示 babel-loader 只需处理开发者编写的 js 文件，不需要处理 node_modules 下的 js 文件
exclude: /node_modules/,
// 带参数项的 loader 可以通过对象的方式进行配置
use: {
loader:'babel-loader',
option:{ // 参数项
//声明一个 babel 插件，此插件用来转化 class 中的高级语法
plugins:[@babel/plugin-proposal-class-properties]
}
}
}
],
}
# 打包发布
# 为什么要打包发布
- 开发环境下，打包生成的文件存放于
内存中，无法获取到最终打包生成的文件 - 开发环境下，打包生成的文件不会进行代码压缩和性能优化
为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。
# 配置 webpack 的打包发布
- 在
package.json文件的scripts节点下，新增build命令如下：
"scripts": {
"dev": "webpack serve", // 开发环境中，运行 dev 命令
"build": "webpack --mode production" // 项目发布时，运行 build 命令
}
--model是一个参数项，用来指定webpack的运行模式。通过--model指定的参数项，会覆盖webpack.config.js中的model选项。
# 统一JavaScript文件到js目录
- 对
webpack.config.js配置文件的output节点进行如下的修改：
output: {
path: path.join(__dirname, './dist'),
// 告诉 webpack 把生成的 build.js 文件存放到 dist 目录下的 js 子目录中
filename: 'js/build.js'
}
# 统一图片到 image 目录
- 修改
webpack.config.js中的url-loader配置项，新增outputPath选项即可指定图片文件的输出路径：
{
test: /\.jpg|png|gif$/,
use: {
loader:'url-loader',
option:{
limit:50000,
// 把生成的图片文件存放到 dist 目录下的 image 子目录中
outputPath:'image'
}
}
}
# 自动清理 dist 目录的旧文件
- 为了在每次打包发布时自动清理掉
dist目录中的旧文件，可以安装并配置clean-webpack-plugin插件：
安装
npm install clean-webpack-plugin -D
配置
//导入插件得到构造函数
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 创建实例对象
const cleanPluin = new CleanWebpackPlugin(),
module.exports = {
// 挂载实例对象
plugins: [cleanPluin]
}
# Source Map
Source Map 是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着代码压缩混淆前后的对应关系。
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。
# 配置开发环境的 Source Map
在开发环境下，webpack 默认启用了 Source Map 功能，但是记录的是生成后的代码的位置，会导致运行时报错的行数与源代码的行数不一致的问题。
开发环境下，推荐在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致：
module.exports = {
mode: 'development',
devtool:'eval-source-map' // eval-source-map 仅限在开发模式下使用
}
# 配置生产环境的 Source Map
在生产环境下，如果省略了 devtool 选项，则最终生成的文件中不包含 Source Map ，这能够防止原始代码通过 Source Map 的形式暴露给别有所图之人。
在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将 devtool 的值设置为 nosources-source-map 。