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