本文使用的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 中设置的文件夹路径中的文件
]
};
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
