区分不同环境打包js
首先，简易的打包js，可以去看简易打包js
文件目录
先看下目录，我是在egg项目的public文件夹下进行操作的，目录结构如下
app/public
|-- dist 开发环境的打包文件夹
|-- release 生产环境的打包文件夹
|-- webpack webpack配置文件存放地
|-- webpack.config.js webpack基础配置文件
|-- webpack.dev.js 开发环境配置文件
|-- webpack.prod.js 生产环境配置文件
|-- a.js 需要打包的js
|-- b.js 需要打包的js
|--package.json 脚本文件
脚本文件配置
我们在脚本文件，配置我们的打包脚本
"scripts": {
"build": "cd webpack && webpack --mode production",
"dev": "cd webpack && webpack --mode development --watch"
}
这里之所以又讲一遍脚本文件，是因为这里的mode配置，我们等下会用到
【注】build是生产环境，dev是开发环境
webpack配置
webpack基础文件配置
先配置webpack.config.js文件，我们脚本运行的就是这个文件
module.exports = (env, argv) => {
return argv.mode === "production" ? require('./webpack.prod') : require('./webpack.dev');
}
webpack支持配置文件webpack.config.js中export出一个函数，该函数接受两个参数
- env：环境
- argv：参数
这里我们用argv获取到了之前在scripts脚本里设置的mode参数，用于区分环境，然后根据不同的环境，引入不同的webpack配置，完成了webpack配置上的环境区分
webpack开发环境配置
现在开发环境的webpack打包配置
const path = require('path'); // 获取当前绝对路径
module.exports = {
entry: {
a: "../a.js",
b: "../b.js"
}, // 主文件入口
output: {
filename: "[name].js", // 打包后的文件
path: path.resolve(__dirname, "../dist"),
publicPath: path.resolve(__dirname, "../dist")
}
}
这里大部分属性我在简易打包js已经说过了，补充一些没说过的
- publicPath
publicPath 并不会对生成文件的路径造成影响，主要是对你的页面里面引入的资源的路径做对应的补全，常见的就是css文件里面引入的图片
这个属性我也讲不太清，建议加上，值可以和path一样。
参考一些资料，path与publicPath的区别，关于webpack的path和publicPath。
- filename: "[name].js"
注意这里打包的文件名，我用了"[name]"，因为这次打包的，是多个js一起打包，我在入口文件的地方entry用了对象的写法，这是webpack支持的一种多个入口的写法，而我们在filename里用的name就是我们entry设置的对象键，比如{a:"../a.js"}，那么它的name就是a，打包出来的js名，就是a.js
webpack生产环境配置
基础配置
首先，先进行打包，过程和开发环境差不多
const path = require('path'); // 获取当前绝对路径
const entry = { // 入口配置
a: "../a.js",
b: "../b.js"
};
module.exports = {
entry: entry, // 主文件入口
output: {
filename: "[name].[chunkhash].js", // 打包后的文件
chunkFilename:"[name].js",
path: outputPath,
publicPath: path.resolve(__dirname, "../release")
}
}
为了防止缓存，这里我们打包的js名添加了hash值，会根据js内容生成
防堆积，打包js
因为有hash为后缀，我们的js打包，不会替换了，这样会出现堆积js的现象，于是我们要在打包js前，将目标文件夹里重复的js文件处理掉
先上代码，这里同样是在webpack.prod.js修改
const fs = require('fs');
const outputPath = path.resolve(__dirname, '../release'); // 获取打包的目标文件夹的绝对路径
const entry = { // 入口配置
a: "../a.js",
b: "../b.js"
};
function removeFile (entry, outputPath){
var files = [];
if(fs.existsSync(outputPath)){ // 查询路径是否存在，返回Boolean值
files = fs.readdirSync(outputPath); // 方法将返回一个包含“指定目录下所有文件名称”的数组对象。
files.forEach((file) => {
var fileName = file.split('.')[0]; // 获取文件名
var curPath = outputPath + "/" + file; // 文件的绝对路径
if(entry[fileName]){
fs.unlinkSync(curPath); // 删除文件操作
}
});
}
}
removeFile(entry, outputPath);
这里我们用到了fs的一些函数。
- fs.existsSync
查询路径是否存在，返回Boolean值
- fs.readdirSync
方法将返回一个包含“指定目录下所有文件名称”的数组对象。
- fs.unlinkSync
删除文件操作
主要是根据我们的打包入口文件，获取js名，然后将打包文件里，同名的js先删掉，这样，我们打包出来后，就不会有重复的js了
