一、需求
通过webpack将项目的一个文件目录下的js按照其父目录进行区分打包
大概情况:
文件目录大概:
|-- undefined
|-- src
|-- b2c-ads
| | |-- pages
| | | |-- app
| | | | |-- .js(很多个)
| | | |-- cms
| | | | |-- .js(很多个)
| | | |-- image
| | | | |-- .js(很多个)
| | | |-- cmt
| | | | |-- .js(很多个)
|-- b2c-anay
| | |-- pages
| | | |-- art
| | | | |-- .js(很多个)
| | | |-- card
| | | | |-- .js(很多个)
| | | |-- glo
| | | | |-- .js(很多个)
| | | |-- user
需求就是:将pages下面的所有js文件打包到一起,然后输出到跟其父目录同名的.js文件
二、实现技术
可以使用webpack多入口多出口来实现
技术难点1、获取到pages下面的文件夹的js文件
解决方法:引入node 的glob模块,这一个模块可以帮我们获取想要的js文件
具体使用方法:参考
https://blog.csdn.net/tangxiaolang101/article/details/53931145
技术难点2、输出到跟其父目录同名的.js文件
解决方法:webpack多入口多出口的配置
具体方法:参考
https://www.webpackjs.com/concepts/output/#%E5%A4%9A%E4%B8%AA%E5%85%A5%E5%8F%A3%E8%B5%B7%E7%82%B9
三、附上webpack.config.js代码
const fs = require('fs'),
path = require('path')
const webpack = require('webpack')
const glob=require('glob')
// 获取指定路径下的入口文件
function getEntries(globPath) {
var files = glob.sync(globPath),
return files;
}
console.log(getEntries('./shop/src/b2c-ads/resource/src/js/pages/**/*.js'));
const config = {
entry:{ //多入口配置
ads:getEntries('./shop/src/b2c-ads/resource/src/js/pages/**/*.js'),
ana:getEntries('./shop/src/b2c-analysis/resource/src/js/pages/**/*.js'),
cms:getEntries('./shop/src/b2c-cms/resource/src/js/pages/**/*.js'),
cmt:getEntries('./shop/src/b2c-cmt/resource/src/js/pages/**/*.js'),
image:getEntries('./shop/src/b2c-image/resource/src/js/pages/**/*.js'),
uc:getEntries('./shop/src/b2c-uc/resource/src/js/pages/**/*.js'),
} ,
output: {
path: path.join(__dirname,'dist/shop'),
filename: '[name].js' //根据入口来输出对应入口名的js文件,[name]起到这个作用
},
performance: { //y由于我打包的文件过大,打包会警告文件超出默认的警告线,所以我就将警告线提高了,
hints: 'error',
maxAssetSize: 1000000, // 整数类型(以字节为单位)
maxEntrypointSize: 1000000 // 整数类型(以字节为单位)
}
}
module.exports = config
运行打包命令后,大概是这个样子
---------------------------------------------分割线-----------------------------------
新需求:
打包后的js文件需要放到不同的文件夹下面,这可有点难倒我了,但不碍事,经过我一番面向百度编程,终于还是找到了解决方法
方法参考:
关于将Webpack,编译文件输出到不同的目录下
附上修改的代码:
entry:{
'ads/ads':getEntries('./shop/src/b2c-ads/resource/src/js/pages/**/*.js'),
'ana/ana':getEntries('./shop/src/b2c-analysis/resource/src/js/pages/**/*.js'),
'cms/cms':getEntries('./shop/src/b2c-cms/resource/src/js/pages/**/*.js'),
'cmt/cmt':getEntries('./shop/src/b2c-cmt/resource/src/js/pages/**/*.js'),
'image/image':getEntries('./shop/src/b2c-image/resource/src/js/pages/**/*.js'),
'uc/uc':getEntries('./shop/src/b2c-uc/resource/src/js/pages/**/*.js'),
} ,
output: {
path: path.join(__dirname,'dist/shop'),
filename: '[name].js',
chunkFilename:'[name].js'
},
打包后的结果:
---------------------------------------又是分割线----------------------------------
又是新需求:
打包后的js文件需要为main.js,这很容易操作
代码附上:
entry:{
'ads/main':getEntries('./shop/src/b2c-ads/resource/src/js/pages/**/*.js'),
'ana/main':getEntries('./shop/src/b2c-analysis/resource/src/js/pages/**/*.js'),
'cms/main':getEntries('./shop/src/b2c-cms/resource/src/js/pages/**/*.js'),
'cmt/main':getEntries('./shop/src/b2c-cmt/resource/src/js/pages/**/*.js'),
'image/main':getEntries('./shop/src/b2c-image/resource/src/js/pages/**/*.js'),
'uc/main':getEntries('./shop/src/b2c-uc/resource/src/js/pages/**/*.js'),
} ,
打包后的结果: