「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」
在webpack的配置项中，我们可以通过 config 参数指定,使用哪个配置文件来进行打包
通过env参数区分
"scripts": {
"build": "webpack --env.production --config ./build/webpack.base",
"dev": "webpack --env.development --config ./build/webpack.base"
}
改造webpack.base文件默认导出函数，会将环境变量传入到函数的参数中
module.exports = (env)=>{
console.log(env); // { development: true }
}
合并配置文件
我们可以判断当前环境是否是开发环境来加载不同的配置,这里我们需要做配置合并
安装webpack-merge:
npm install webpack-merge --save-dev
webpack.dev配置
module.exports = {
mode:'development'
}
webpack.prod配置
module.exports = {
mode:'production'
}
webpack.base配置
const path = require('path');
const merge = require('webpack-merge');
// 开发环境
const dev = require('./webpack.dev');
// 生产环境
const prod = require('./webpack.prod');
const base = { // 基础配置
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'../dist')
}
}
module.exports = (env) =>{
if(env.development){
return merge(base,dev);
}else{
return merge(base,prod)
}
}
后续的开发中，我们会将公共的逻辑放到base中,开发和生产对的配置也分别进行存放！
4.webpack-dev-server
配置开发服务器，可以在实现在内存中打包,并且自动启动服务
npm install webpack-dev-server --save-dev
"scripts": {
"build": "webpack --env.production --config ./build/webpack.base",
"dev": "webpack-dev-server --env.development --config ./build/webpack.base"
}
通过执行npm run dev来启启动开发环境
默认会在当前根目录下启动服务
配置开发服务的配置
const path = require('path')
module.exports = {
mode:'development',
devServer:{
// 更改静态文件目录位置
contentBase:path.resolve(__dirname,'../dist'),
compress:true, // 开启gzip
port:3000, // 更改端口号
}
}
5.打包Html插件
5.1 单入口打包
自动产生html，并引入打包后的文件
编辑webpack.base文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
new HtmlWebpackPlugin({
filename:'index.html', // 打包出来的文件名
template:path.resolve(__dirname,'../public/index.html'),
hash:true, // 在引用资源的后面增加hash戳
minify:{
removeAttributeQuotes:true // 删除属性双引号
}
})
]
5.2 多入口打包
根据不同入口 生成多个js文件，引入到不同html中
── src
├── entry-1.js
└── entry-2.js
多入口需要配置多个entry
entry:{
jquery:['jquery'], // 打包jquery
entry1:path.resolve(__dirname,'../src/entry-1.js'),
entry2:path.resolve(__dirname,'../src/entry-2.js')
},
output:{
filename:'[name].js',
path:path.resolve(__dirname,'../dist')
},
产生多个Html文件
new HtmlWebpackPlugin({
filename:'index.html',
template:path.resolve(__dirname,'../public/template.html'),
hash:true,
minify:{
removeAttributeQuotes:true
},
chunks:['jquery','entry1'], // 引入的chunk 有jquery,entry
}),
new HtmlWebpackPlugin({
filename:'login.html',
template:path.resolve(__dirname,'../public/template.html'),
hash:true,
minify:{
removeAttributeQuotes:true
},
inject:false, // inject 为false表示不注入js文件
chunksSortMode:'manual', // 手动配置代码块顺序
chunks:['entry2','jquery']
})
以上的方式不是很优雅，每次都需要手动添加HtmlPlugin应该动态产生html文件，像这样:
let htmlPlugins = [
{
entry: "entry1",
html: "index.html"
},
{
entry: "entry2",
html: "login.html"
}
].map(
item =>
new HtmlWebpackPlugin({
filename: item.html,
template: path.resolve(__dirname, "../public/template.html"),
hash: true,
minify: {
removeAttributeQuotes: true
},
chunks: ["jquery", item.entry]
})
);
plugins: [...htmlPlugins]
6.清空打包结果
可以使用clean-webpack-plugin手动清除某个文件夹内容:
安装
npm install --save-dev clean-webpack-plugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
new CleanWebpackPlugin({
// 清空匹配的路径
cleanOnceBeforeBuildPatterns: [path.resolve('xxxx/*'),'**/*'],
})
这样就可以清空指定的目录了,我们可以看到webpack插件的基本用法就是 new Plugin并且放到plugins中
• 随着项目业务的复杂度增加，工程模块的体积也会急剧增大，构建后的模块通常要以M为单位计算；
• 代码全量构建速度过慢，即使是很小的改动，也要等待长时间才能查看到更新与编译后的结果（引入HMR热更新后有明显改进）；
• 多个项目之间共用基础资源存在重复打包，基础库代码复用率不高；
• node的单进程实现在耗cpu计算型loader中表现不佳；
优化方案
• 减少编译体积大小
• 将大型库外链
• 将库预先编译
• 使用缓存并行编译
使用hash缓存
vue的脚手架
C:\Users\User>vue --help
Usage: vue <command> [options]
Options:
-V, --version 查看当前vue\cli版本号
-h, --help 在控制台输出帮助命令
命令行中 [] 表示可选命令 <> 表必须命令
Commands:
根据开发者提供的项目名称创建项目 ==> 会在指定目录下构建项目文件夹
项目名称 不能使用驼峰方式
项目名称 最好不要使用中文
* create [options] <app-name>
为项目增加扩展插件功能 （只会按照脚手架能够识别的模块）
自动识别 --save 和 --save-dev 环境 ==> 自动执行 npm install
自动安装依赖，自动添加默认配置 ==> 自动完成项目 vue.config.js 文件配置
* add [options] <plugin> [pluginOptions]
对项目中的插件进行 配置更新
invoke [options] <plugin> [pluginOptions]
项目配置输出
inspect [options] [paths...]
驱动简易的vue环境
serve [options] [entry]
基于webpack打包项目
将JS CSS html …… 语法转换为兼容语法
生成 纯静态文件
build [options] [entry]
开启 vue-cli 管理器页面，通过图形化管理电脑中的所有vue项目
* ui [options]
根据外部模板创建功能（vue-cli 2.0 版本项目构建）旧项目结构
依赖于额外全局模块@vue/cli-init ==> npm install -g @vue/cli-init
init [options] <template> <app-name>
配置文件的修改操作
config [options] [value]
vue项目的配置升级
upgrade [semverLevel]
用于启动查看 调试信息
info
查看子命令的帮助手册
Run vue <command> --help
