例如我们想打包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里面了
