1. webpack初识
发布于 2022年 01月 17日 20:07
1. 前言
一直以来,对webpack的了解都处于初级阶段,复杂的配置没配过,没有实际项目经验。面试问到只能回到用的脚手架。。。
前段时间找到了一个课程,这个相当于是课程的一个笔记吧
2. 什么是webpack
官网的描述:
本质上,webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个静态资源(bundle)。
转换成自己的话:
- webpack 是前端的一个资源构建工具,一个静态模块打包器;
- 在 webpack 看来,前端的所有资源文件(js/json/css/less/scss/img...)都是一个个模块;
- webpack 会根据资源的依赖关系生成一个依赖关系图,再打包成对应的静态资源bundle。
3. 核心概念
3.1. 讲概念前:webpack打包的大致流程
- 以入口Entry为起点,分析构建内部依赖图,找出有哪些模块和库是Entry直接和间接依赖的;
- 开始处理找到的每个依赖项:
- webpack可以直接处理js, json文件;
- webpack处理不了的文件(css, less, scss, png, jpg...)使用loader处理;
- 使用plugins做优化、压缩等处理;
- 处理完后输出到文件中,这些文件我们称为bundles;
- 处理完后获得了bundles,webpack会根据出口output的配置找到目标文件夹,创建目标文件,再把这些bundles写入目标文件。
3.2. 五大核心概念
入口 - Entry
入口(Entry)是 webpack 分析构建内部依赖图的起点模块(模块就是一个文件)。
// webpack.config.js:
module.exports = {
entry: './path/to/my/entry/file.js'
};
出口 - Output
output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。
// webpack.config.js:
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
// 输出路径:
// --dirname: nodeJs的变量,代表当前文件的绝对路径
// resolve: nodeJs里path模块的方法,用来拼接绝对路径
path: path.resolve(__dirname, 'dist'),
// 输出文件名
filename: 'my-first-webpack.bundle.js'
}
};
Loader
- loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript);
- loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块。
loader的使用:
- 需要先下载;
- 无需
requrie
。
// webpack.config.js:
const { resolve } = require('path');
const config = {
output: {
filename: 'my-first-webpack.bundle.js',
path: resolve(__dirname, 'dist')
},
module: {
rules: [
// 不同类型的文件必须配置不同的规则来处理
{
test: /\.css$/, // 匹配什么样的文件
// use数组中loader的执行顺序:从下到上,从右到左(后进先出)
use: [
'style-loader',
'css-loader'
]
}
]
}
};
module.exports = config;
插件 - Plugins
插件(Plugins)可以用于执行范围更广(比loader)的任务。插件的范围包括:从打包优化和压缩,一直到重新定义环境中的变量等。。。
plugin的使用:
- 需要先下载;
- 还需
requrie
。
// webpack.config.js:
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const config = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
模式 - Mode
- 模式(Mode)指示 webpack 使用相应模式的配置;
mode: 'development' | 'production'
;- 生产环境和开发环境将ES6模块化编译成浏览其能识别的模块化;
- 生产环境比开发环境多一个压缩js代码;
选项 | 描述 | 特点 |
---|---|---|
development | 会将DefinePlugin 中process.env.NODE_ENV 的值设置为development 。启用NamedChunksPlugin 和NamedModulesPlugin 。 | 能让代码本地调试运行的环境 |
production | 会将DefinePlugin 中process.env.NODE_ENV 的值设置为production 。启用FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin 。 | 能让代码优化上线运行的环境 |
// webpack.config.js:
module.exports = {
mode: 'production'
};
4. 使用webpack
webpack真的要动手才能更深刻,跟着我一块打包一下吧~
我的webpack版本:"webpack": "^5.44.0", "webpack-cli": "^4.7.2";
(完整代码在这里, 是这两个文件夹:webpack初体验 和 webpack初体验2)
4.1. 不使用配置文件
如果不涉及loader, plugins的配置,可以直接使用命令行打包。
第一步:准备
需要安装 webpack 和 webpack-cli 。
npm i webpack webpack-cli -D
第二步:写代码
代码在这儿~
目录结构:
webpack初体验
├── src
│ └── index.js
│ └── test.json
代码:
// 1. src/index.js
import data from './test.json';
console.log(data);
function add(x, y) {
return x + y;
}
add(1, 2)
console.log(add(1, 2))
// 2. src/test.json
{
"testJson": "test json"
}
第三步:打包
项目根目录输入以下命令:
- 开发环境:
- 命令:
webpack ./src/index.js -o ./build_dev/ --mode=development
; - 含义:webpack会以./src/index.js为入口文件开始打包,打包后输出到./build_dev/main.js,整体打包环境是开发环境。
- 命令:
- 生产环境:
- 命令:
webpack ./src/index.js -o ./build_prod/ --mode=production
; - 含义:webpack会以./src/index.js为入口文件开始打包,打包后输出到./build_prod/main.js,整体打包环境是生产环境。
- 命令:
4.2. 使用配置文件
第一步:准备
- 与不使用配置文件一样,需要安装 webpack 和 webpack-cli;
- 还需要安装使用的 loader 和 plugins。
npm i webpack webpack-cli -D
// 下载loader和plugins
npm i xxx-loader xxx-plugin -D
第二步:写代码
需要在项目的根目录写一个名为webpack.config.js
的配置文件。
目录结构:
webpack初体验2
├── src
│ └── index.js
│ └── test.json
├── webpack.config.js
代码:
// 1. src/index.js
import data from './test.json';
console.log(data);
function add(x, y) {
return x + y;
}
add(1, 2)
console.log(add(1, 2))
// 2. src/test.json
{
"testJson": "test json"
}
// 3. webpack.config.js
const { resolve } = require('path'); //
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
plugins: [],
mode: 'development'
}
第三步:打包
项目根目录中输入命令webpack
即可。打包好后,控制台还会显示一些打包相关的信息,有兴趣的可以仔细瞅瞅。