目录
一、Webpack 简介
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。它会根据模块的依赖关系,递归地构建一个依赖图(dependency graph),然后将这些模块打包成一个或多个 bundle。
Webpack 的主要目标是将 JavaScript 文件打包在一起用于在浏览器中使用,但它也能够通过 loader 的机制来打包其他资源,如 CSS、图片和 HTML。
二、Webpack 的核心概念
-
入口(Entry):Webpack 应该使用哪个模块作为构建其内部依赖图的开始。换句话说,入口起点指示 webpack 应该使用哪个模块作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。
-
输出(Output):告诉 Webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段,来配置这些处理过程。
-
加载器(Loaders):让 Webpack 能够去处理那些非 JavaScript 文件(Webpack 自身只理解 JavaScript)。加载器可以将所有类型的文件转换为 Webpack 能够处理的有效模块,然后你就可以利用 Webpack 的打包能力,对它们进行处理。
-
插件(Plugins):可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境变量。插件接口功能极其强大,可以用来处理各种各样的任务。
-
模式(Mode):通过设置 mode 参数为 'development' 或 'production',你可以启用相应模式下的 Webpack 内置的优化。
三、Webpack 的安装与配置
安装 Node.js
Webpack 是运行在 Node.js 之上的,因此首先需要安装 Node.js。你可以从 Node.js 官网 下载并安装。
安装 Webpack
打开终端或命令提示符,运行以下命令全局安装 Webpack 和 Webpack CLI:
npm install -g webpack webpack-cli
初始化项目
创建一个新的目录作为项目文件夹,并初始化 npm:
-
mkdir
my-webpack-project
-
cd
my-webpack-project
-
npm init -
y
安装项目依赖的 Webpack
在项目文件夹中,安装 Webpack 作为项目的开发依赖:
npm install --save-dev webpack webpack-cli
创建项目文件
在项目文件夹中,创建以下文件:
src/index.js
:入口文件。dist/index.html
:用于测试打包后的 JavaScript 文件。
配置 Webpack
在项目根目录下创建一个名为
webpack.config.js
的文件,这是 Webpack 的配置文件。以下是一个基本的配置示例:
-
const path =
require(
'path');
-
-
module.
exports = {
-
mode:
'development',
// 开发模式
-
entry:
'./src/index.js',
// 入口文件
-
output: {
// 输出配置
-
filename:
'bundle.js',
// 输出文件名
-
path: path.
resolve(__dirname,
'dist'),
// 输出路径
-
},
-
};
修改 package.json
在
package.json
文件的scripts
部分添加一个构建脚本:
-
"scripts": {
-
"build":
"webpack"
-
},
构建项目
在终端或命令提示符中运行以下命令来构建项目:
npm run build
构建成功后,
dist
目录下会生成bundle.js
文件。你可以在dist/index.html
文件中引入这个脚本来测试。
四、加载器(Loaders)的使用
Webpack 通过使用加载器(loaders)来提供一种机制来预处理文件。这允许你打包除 JavaScript 以外的任何静态资源。
使用 CSS 加载器
为了能够让 Webpack 处理 CSS 文件,你需要使用
css-loader
和style-loader
。css-loader
会遍历 CSS 文件,然后找到 url() 表达式然后处理他们,style-loader
会把原来的 CSS 代码插入页面中的一个 <style> 标签中。
安装 CSS 加载器:
npm install --save-dev css-loader style-loader
配置 Webpack 以使用 CSS 加载器:
-
const path =
require(
'path');
-
-
module.
exports = {
-
// ...
-
module: {
-
rules: [
-
{
-
test:
/\.css$/,
// 正则表达式,匹配 CSS 文件
-
use: [
-
'style-loader',
// 将 JS 字符串生成为 style 节点
-
'css-loader',
// 将 CSS 转化成 CommonJS 模块
-
],
-
},
-
],
-
},
-
};
现在你可以在 JavaScript 文件中导入 CSS 文件了,例如:
import './style.css';
使用图片加载器
为了能够在 JavaScript 模块中导入图片,你需要使用
file-loader
。
安装图片加载器:
npm install --save-dev file-loader
配置 Webpack 以使用图片加载器:
-
module.
exports = {
-
// ...
-
module: {
-
rules: [
-
// ...
-
{
-
test:
/\.(png|svg|jpg|jpeg|gif)$/i,
// 正则表达式,匹配图片文件
-
use: [
-
'file-loader',
// 将文件发送到输出文件夹,并返回(相对)URL
-
],
-
},
-
],
-
},
-
};
现在你可以在 JavaScript 文件中导入图片文件了,例如:
import imgSrc from './image.png';
五、插件(Plugins)的使用
Webpack 拥有丰富的插件系统,大多数内部功能都是基于这个插件系统构建的。这使得 Webpack 可以非常灵活地进行扩展。
使用 HtmlWebpackPlugin
HtmlWebpackPlugin
是一个非常有用的插件,它可以为你生成一个 HTML5 文件,其中包括使用script
标签的 body 中的所有 webpack 包。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。
安装 HtmlWebpackPlugin:
npm install --save-dev html-webpack-plugin
配置 Webpack 以使用 HtmlWebpackPlugin:
-
const
HtmlWebpackPlugin =
require(
'html-webpack-plugin');
-
const path =
require(
'path');
-
-
module.
exports = {
-
// ...
-
plugins: [
-
new
HtmlWebpackPlugin({
-
title:
'Webpack App',
// 生成 HTML 文件的标题
-
template:
'./src/template.html',
// 自定义模板文件路径
-
}),
-
],
-
};
现在当你运行 Webpack 构建时,它会生成一个包含你的 bundle 的
index.html
文件,并将其输出到dist
目录下。
使用 CleanWebpackPlugin
CleanWebpackPlugin
用于在每次构建前清理(删除)dist
文件夹。
安装 CleanWebpackPlugin:
npm install --save-dev clean-webpack-plugin
配置 Webpack 以使用 CleanWebpackPlugin:
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { // ... plugins: [ // ... new CleanWebpackPlugin(), // 添加 CleanWebpackPlugin ], };
六、开发服务器(DevServer)
Webpack 提供了一个可选的本地开发服务器,这个本地服务器基于 node.js 构建,可以实现你想要的让浏览器自动刷新显示你所修改后的结果。
安装 webpack-dev-server
npm install --save-dev webpack-dev-server
配置 devServer
修改
webpack.config.js
文件,添加devServer
配置:
-
module.
exports = {
-
// ...
-
devServer: {
-
static:
'./dist',
// 告诉服务器从哪里提供内容
-
open:
true,
// 自动打开浏览器
-
},
-
};
修改 package.json
在
package.json
文件的scripts
部分添加一个启动开发服务器的脚本:
-
"scripts": {
-
// ...
-
"start":
"webpack serve --open"
-
},
启动开发服务器
在终端或命令提示符中运行以下命令来启动开发服务器:
npm start
现在,当你修改源代码并保存时,Webpack 会自动重新编译代码,并且浏览器会自动刷新显示最新的结果。