前端学习笔记-Webpack
前端学习笔记-Webpack
文章目录
- 前端学习笔记-Webpack
- 1. Webpack简介
-
- 1.1 基本介绍
- 1.2 五个核心概念
- 2. Webpack初体验
-
- 2.1 初始化配置
- 2.2 编译打包应用
- 3. Webpack开发环境-基本配置
-
- 3.1 样式资源
- 3.2 HTML资源
1. Webpack简介
本部分对Webpack进行简要的介绍。
1.1 基本介绍
Webpack：
一种前端资源构建工具，一个静态模块打包器(module bundler)。
在webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。
它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。
1.2 五个核心概念
-
entry：指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
-
output：指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
-
module：让 webpack 能够去处理那些非 JS 的文件，比如样式文件、图片文件(webpack 自身只理解
JS) -
plugins：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，
一直到重新定义环境中的变量等。 -
mode：指示 webpack 使用相应模式的配置。
| 参数 | 描述 | 特点 |
|---|---|---|
| development | 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。 | 能让代码本地调试运行的环境 |
| production | 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin。 | 能让代码优化上线运行的环境 |
2. Webpack初体验
本部分介绍webpack相关配置。
2.1 初始化配置
-
初始化 package.json：npm init
-
下载安装webpack：(webpack4以上的版本需要全局/本地都安装webpack-cli)
全局安装：cnpm i webpack webpack-cli -g
本地安装：cnpm i webpack webpack-cli -D
2.2 编译打包应用
创建 src 下的 js 等文件后，不需要配置 webpack.config.js 文件，在命令行就可以编译打包。
- 运行指令：
（1）开发环境(development)：
-命令：webpack ./src/index.js -o ./build --mode=development
-含义：webpack以./src/index.js为入口文件开始打包，打包后输出到./build/main.js。整体打包环境，是开发环境
（2）生产环境(production)：
-命令：webpack ./src/index.js -o ./build --mode=production
-含义：webpack以./src/index.js为入口文件开始打包，打包后输出到./build/main.js。整体打包环境，是生产环境
（3）引入打包资源：
<body>
<script src="main.js"></script>
</body>
- 结论：
- webpack 本身能处理 js/json 资源，不能处理 css/img 等其他资源
- 生产环境和开发环境将 ES6 模块化编译成浏览器能识别的模块化，但是不能处理 ES6 的基本语法转化为 ES5（需要借助 loader）
- 生产环境比开发环境多一个压缩 js 代码
3. Webpack开发环境-基本配置
本部分包括webpack在development-开发环境下的基本配置。
-
概念：
- index.js: Webpack常用入口起点文件。
- webpack.config.js：webpack的配置文件。
-
主要指令：：
// 将打包结果输出到目的文件夹（webpack.config.js中配置） > webpack // 只在内存中编译打包，没有输出 > npx webpack-dev-server -
目的：主要是为了能让代码运行。主要考虑以下几个方面：
- 打包样式资源（3.1）
- 打包HTML资源（3.2）
- 打包图片资源（3.3）
- 打包其他资源（3.4）
- devServer（3.5）
-
作用：指示webpack做什么工作（当运行webpack指令时，会加载其中的配置）
-
注意：所有构建工具都是基于node.js平台运行的，模块化默认采用common.js。
-
loader 和 plugin 的不同：
- loader：1. 下载 2. 使用（配置 loader）
- plugins：1.下载 2. 引入 3. 使用
以下为 webpack.config.js 文件的结构概览。
/* 此处通常引入各类资源 */
// webpack config
module.exports = {
/* entry：入口文件参数配置，webpack从该文件开始打包 */
entry: '',
/* output：输出文件参数配置 */
output: {
// 输出文件名
filename: '',
// 输出文件路径
path: resolve(...)
},
/* module：loader配置 */
module: {
/* loader对象配置细节 */
rules: [
// 每个loader对象
{
// 处理对象的文件名格式
test: ...,
// 使用哪些loader进行处理，其中loader执行顺序为自右到左、自下到上依次执行
use: [...]
},
{...}
]
},
/* plugins：插件配置 */
plugins: [...],
/* mode：环境模式配置 - development | production */
mode: 'development'
}
3.1 样式资源
本部分包括对样式资源打包的相关webpack配置典例。
// resolve用来拼接绝对路径的方法
const {resolve} = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
// _dirname为nodejs的变量，代表当前文件的目录绝对路径
path: resolve(__dirname, 'build')
},
module: {
rules: [
{ // css-loader
// \.相当于. $代表以什么结尾 /为转义符
test: /\.css$/,
use: [
// 创建style标签，将js中的样式资源插入进行，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载到js中，内容为样式字符串
'css-loader',
]
},
{ // less-loader
test: /\.less$/,
use: [
'style-loader',
'css-loader',
// 将less文件编译成css文件
'less-loader'
]
}
]
},
plugins: [],
mode: 'development'
}
3.2 HTML资源
本部分包括对HTML资源打包的相关webpack配置典例。
// html-webpack-plugin
// 功能：默认创建一个空的HTML，自动引入打包输出的所有资源（js/css）
// 需求：有结构的HTML文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {resolve} = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: "main.js",
path: resolve(__dirname, 'build')
},
module: {
rules: []
},
plugins: [
new HtmlWebpackPlugin({
// 复制template中的文件，并自动引入打包输出的所有资源（js/css）
template: "./src/index.html"
})
],
mode: "development"
}
rules: []
},
plugins: [
new HtmlWebpackPlugin({
// 复制template中的文件，并自动引入打包输出的所有资源（js/css）
template: "./src/index.html"
})
],
mode: "development"
}