本文使用的webpack版本为 4.46.0
目录
- 1、安装webpack及其脚手架
- 2、安装webpack-dev-server启动服务器
- 3、使用html-webpack-plugin生成index.html文件
- 4、打包css、scss、less文件
- 5、打包图片
- 6、打包其他文件
- 7、打包时自动清除上次打包后的文件
1、安装webpack及其脚手架
首先在工作目录使用npm init
生成package.json
,再运行以下命令下载webpack
和webpack-cli
(使用脚本命令运行webpack必须的脚手架工具)。
npm i -D webpack@4 webpack-cli@3
在当前目录创建webpack.config.js
文件,做如下配置:
const { resolve } = require("path");
module.exports = {
entry: "main.js", // 入口文件
output: {
path: "dist", // 打包文件夹名称
filename: "js/bundle.js", // 打包后的文件相对路径(相对于path)
},
mode: "development", // 打包模式,分为 production(生产模式) 和 development(开发模式)
};
然后在package.json
中配置脚本命令:
"scripts": {
"build": "webpack"
}
这时在main.js
中写代码,运行npm run build
即可打包文件。如果提示webpack
的错误信息,则可尝试全局安装webpack
。
npm i -g webpack@4
2、安装webpack-dev-server启动服务器
webpack-dev-server
可以启动一个服务器,具有实时更新代码、自动打开浏览器等功能。
npm i -D webpack-dev-server@3
安装完毕后,在webpack.config.js
的module.exports
中添加如下代码:
devServer: {
open: true, // 自动打开默认浏览器,
color: true, // webpack-dev-server运行编译时关键字用不同颜色表示
compress: true, // 启动 gzip 压缩
port: 3000, // 启动的服务器端口号
clientLogLevel: true, // 取消服务器运行时的控制台打印信息
}
然后在package.json
的scripts
中添加:
"dev": "webpack-dev-server --progress" // --progress 用于显示编译进度
运行npm run dev
即可打开默认浏览器运行http://localhost:3000
。
3、使用html-webpack-plugin生成index.html文件
webpack
默认只打包js文件,在单页面程序中我们通常需要一个index.html
文件,这个文件可以使用html-webpack-plugin
生成。
npm i -D html-webpack-plugin@3
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 引入插件
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: resolve(__dirname, "public/index.html"), // index.html模板路径,如果不提供则默认生成一个空的 index.html 文件
filename: "index.html", // 生成的html文件名,默认为index.html
favicon: resolve(__dirname, "public/favicon.ico"), // ico图标路径
title: "studying webpack~~", // 自定义的一些属性,在 index.html 模板中可以通过 htmlWebpackPlugin.options.title 访问,类似 vue 的$options
})
]
};
html-webpack-plugin
默认提供ejs
语法解析。因此可以在index.html
模板中使用ejs
语法:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 使用 ejs 语法 -->
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
<!-- 因为最终运行的是 webpack 打包后的代码,所以此处要得到打包后的路径 -->
<img src="<%= require('../imgs/cute.jpg').default %>" alt="image load error" />
</body>
</html>
也可以将index.html
模板替换成index.ejs
。
4、打包css、scss、less文件
打包css
文件需要用到两个loader
,分别是css-loader
和style-loader
。前一个用于解析css
文件,后一个用于生成一个style
标签插入head
标签。
npm i -D css-loader@5 style-loader@2
在webpack.config.js
的module.exports
中加入:
module: {
rules: [
{
test: /\.css$/, // 匹配到css文件
use: ["style-loader", "css-loader"]
}
]
}
如果要解析sass
和less
文件,则需要下载sass
、less
以及对应的loader
,将sass
和less
语法转化成css
。
npm i sass@1 sass-loader@10 less@2 less-loader@7
在webpack.config.js
的module.exports
中加入:
module: {
rules: [
{
test: /\.less$/, // 匹配到less文件
use: ["style-loader", "css-loader", "less-loader"]
},
{
test: /\.s[ac]ss$/, // 匹配到.sass文件和.scss文件
use: ["style-loader", "css-loader", "sass-loader"]
}
]
}
5、打包图片
图片通常出现在背景或者img
标签中,这里主要打包背景图片。使用url-loader
解析background
的url
属性。
npm i -D url-loader@4 file-loader@6 // 注意:由于 url-loader 基于 file-loader,所以两个都要下载
在webpack.config.js
的module.exports
中加入:
module: {
rules: [
{
test: /\.(jpg|jpeg|png|gif)$/i, // 匹配到图片文件
loader: "url-loader",
options: {
limit: 3 * 1024, // 设置一个文件大小上限,低于这个大小会被转化成base64格式,单位为字节
outputPath: "assets/imgs/", // 打包输出路径
name: "[name].[contenthash:10].[ext]", // 打包后的文件名 其中 [name]表示源文件名,contenthash表示根据文件内容生成的哈希值,:10表示取10位,[ext]表示文件扩展名
}
}
]
}
6、打包其他文件
其余文件可以通过file-loader
打包。
module.exports = {
rules: [
{
exclude: /\.(js|html|css|scss|sass|less|png|jpg|jpeg|gif)$/i,
loader: "file-loader",
options: {
outputPath: "static",
name: "[name].[contenthash:10].[ext]"
}
}
]
};
7、打包时自动清除上次打包后的文件
打包后通常需要去掉上次打包后生成的文件,否则每次打包后都会新增一批文件会导致打包后的文件越来越多。使用clean-webpack-plugin
解决这个问题。
npm i -D clean-webpack-plugin@2
在webpack.config.js
中加入:
const CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports = {
plugins: [
new CleanWebpackPlugin() // 默认情况下清除 output.path 中设置的文件夹路径中的文件
]
};