实习随笔-3、webpack多入口多出口打包

一、需求

通过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'),
  } ,

打包后的结果：