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'
}