打包自动化
清除输出目录
var { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = {
plugins: [
new CleanWebpackPlugin(),
]
}
自动生成页面
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: "development",
devtool: "source-map",
entry: {
home: "./src/index.js",
a: "./src/a.js"
},
output: {
filename: "scripts/[name].[chunkhash:5].js"
},
plugins: [
new CleanWebpackPlugin(),
// 自动生成页面，并引入相关依赖
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "home.html",
chunks: ["home"]
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "a.html",
chunks: ["a"]
})
]
}
复制静态资源
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
mode: "development",
devtool: "source-map",
output: {
filename: "scripts/[name].[chunkhash:5].js"
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./public/index.html"
}),
new CopyWebpackPlugin([
{
from: "./public", // 项目根目录下的 publish 文件夹
to: "./asset" // 打包目录下的 asset 文件夹
},
])
]
}
开发服务器
开发繁琐：在 开发阶段，目前遇到的问题是 打包、运行、调试 过程过于繁琐，回顾一下操作流程：
- 编写代码；
- 控制台运行命令完成打包；
- 打开页面查看效果；
- 继续编写代码，回到步骤 2，并且希望把最终生成的代码和页面部署到服务器上，来模拟真实环境；
为了解决这些问题 webpack 官方制作了一个单独的库：webpack-dev-server，它既不是 plugin 也不是 loader；
webpack-dev-server 命令几乎支持所有的 webpack 命令参数，这个命令是专门为开发阶段服务的，真正部署的时候还是得使用 webpack 命令，当执行 webpack-dev-server 命令后，它做了以下操作：
- 内部执行 webpack 命令，传递命令参数；
- 开启 watch 监听；
- 注册 hooks 类似于 plugin ，webpack-dev-server 会向 webpack 中注册一些钩子函数 （将资源列表保存起来、禁止 webpack 输出文件）；
- 用 express 开启一个服务器，监听某个端口，当请求到达后，根据请求的路径，给予相应的资源内容；
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: "development",
devtool: "source-map",
output: {
filename: "scripts/[name].[chunkhash:5].js"
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./public/index.html"
})
],
devServer: {
port: 8000,
open: true,
proxy: { // 代理规则
"/api": {
target: 'https://api.github.com',
changeOrigin: true // 更改请求头中的 host 和 origin
}
}
},
stats: { // 控制构建过程中控制台的输出内容
modules: false,
colors: true
}
}
webpack 内置插件
DefinePlugin
全局常量定义插件，使用该插件通常定义一些常量值，这样可以直接使用插件中提供的常量，当 webpack 编译完成后，会自动替换为常量的值；
new webpack.DefinePlugin({
PI: `Math.PI`, // PI = Math.PI
VERSION: `"1.0.0"`, // VERSION = "1.0.0"
DOMAIN: JSON.stringify("ricepudding.cn")
})
BannerPlugin
它可以为每个 chunk 生成的文件头部添加一行注释，一般用于添加作者、公司、版权等信息
new webpack.BannerPlugin({
banner: `
hash: [hash]
chunkhash: [chunkhash]
name: [name]
author: wushuai
corporation: ricepudding.cn
`
})
ProvidePlugin
自动加载模块，而不必到处 import 或 require ，可以直接在代码中使用 $(‘#item’)、_.drop([1, 2, 3], 2)
new webpack.ProvidePlugin({
$: 'jquery',
_: 'lodash'
})
mock 的实现
devServer.before 是在静态资源之前调用，一般用于配置 mock 数据，或者配置一些中间件；
mock 包提供了 app 参数，有 before 会先执行该配置内的接口，不会去请求 proxy 配置；
devServer: {
before: function (app, server, compiler) {
// 走代理之前会先走 before，可以将该配置做成模块引入
app.get('/api/qq', function (req, res) {
res.json({ custom: 'response' });
})
}
}
打赏作者
您的打赏是我前进的动力
微信
支付宝
vue-router📝 编程式的导航
上一篇
评论
