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

微信圖片_20190827144825.png

1.1 創(chuàng)建項目目錄,使用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", //打包為開發(fā)模式
   entry:["./demo/accordion",
    output: {
        //輸出路徑和文件名，使用path模塊resolve方法將輸出路徑解析為絕對路徑
        path: path.resolve(__dirname, "./dist"), //將js文件打包到dist/js的目錄
        filename: "tuitui-ui.js"
    }
}

執(zhí)行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", //打包為開發(fā)模式
    entry: glob.sync('./demo/*.js'),
    output: {
        //輸出路徑和文件名，使用path模塊resolve方法將輸出路徑解析為絕對路徑
        path: path.resolve(__dirname, "./dist"), //將js文件打包到dist/js的目錄
        filename: "tuitui-ui.js"
    }
}

這樣我們某個目錄下的所有js就全部打包在一個js里面了