webpack打包某个文件夹下的所有js

例如我们想打包src下common中的所有js文件

微信图片_20190827144825.png

1.1 创建项目目录,使用npm init初始化

mkdir webpack-demo && cd webpack-demo
npm init -y

初始化完成后，目录下会生成package.json

1.2 按照 webpack 4以上还需要安装webpack-cli

npm install --save-dev webpack webpack-cli

2.打包js文件

自webpack4.0起，webpack.config.js不再是必须的配置文件，但依然是默认的配置文件。

"scripts": {
  "build": "webpack --config webpack.config.js --progress --colors"
}

2.2 配置webpack.config.js

const path = require("path");
module.exports = {
    mode: "development", //打包为开发模式
   entry:["./demo/accordion",
    output: {
        //输出路径和文件名，使用path模块resolve方法将输出路径解析为绝对路径
        path: path.resolve(__dirname, "./dist"), //将js文件打包到dist/js的目录
        filename: "tuitui-ui.js"
    }
}

执行npm run build可以在控制台看到有输出,在dist目录下会生成一个js文件。

微信图片_20190827145026.png

查看dist/tuitui-ui.js文件，可以看出a.js和b.js还有c.js确实被打包在一起了。

微信图片_20190827145119.png

但是可以看到这种方式的扩展性非常差，如果在文件夹下增加了新的文件，那么就要重新修改webpack配置文件。非常不利于跟踪。

2.3 引用glob来帮忙安装glob

npm install glob --save-dev

把webpack配置改成如下

const path = require("path");
const glob = require("glob")

module.exports = {
    mode: "development", //打包为开发模式
    entry: glob.sync('./demo/*.js'),
    output: {
        //输出路径和文件名，使用path模块resolve方法将输出路径解析为绝对路径
        path: path.resolve(__dirname, "./dist"), //将js文件打包到dist/js的目录
        filename: "tuitui-ui.js"
    }
}

这样我们某个目录下的所有js就全部打包在一个js里面了