webpack合併js文件的幾種方式

假如我們有兩個js文件，a.js和b.js，代碼如下：

// a.js
console.log('這是a文件')

// b.js
console.log('這是b文件')

我們如何通過webpack把它們合併成一個文件呢？

方法一

我們可以在webpack配置文件中，配置多個入口文件，這樣就能合併成一個文件了：

// webpack.config.js
const path = require('path')

module.exports = {
    entry: ['./b.js', './a.js'],
    output: {
        path: path.resolve(__dirname, "dist"), // string
		filename: './mix.min.js'
    },
    mode: 'development'
}

注意：

• entry數組裏路徑的順序就是引入文件的順序

方法二

通過一個入口文件（比如文件名爲：index.js），分別引入a.js和b.js，然後再將webpack的入口文件配置成index.js

// index.js
require('./b.js')
require('./a.js')

// 或者通過import引入
import './b.js'
import './a.js'

注意：

• require和import兩者也可混用
• 當兩者混用時，優先引入import引入的文件。因爲import是在編譯模塊時運行的，而require是在運行時運行的

// webpack.config.js
const path = require('path')

module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, "dist"), // string
		filename: './mix.min.js'
    },
    mode: 'development'
}