前端学习笔记-Webpack
文章目录
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"
}