多入口文件(Multiple entry files) · web前端

当我们需要时webpack 是允许我们有多个输出文件的。也就是说，我们可以在html文件中引入2个js文件或者其他的文件。我们来做个多入口文件的例子： 1. 首先我们建立两个JavaScript文件，分别是main1.js 和main2.js。然后在里边输出 Hello world 和 Hello webpack 。 main1.js ~~~ document.write("<h1>Hello World!</h1>"); ~~~ main2.js ~~~ document.write("<h2>Hello Webpack!</h2>"); ~~~ 2. 建立indx.html文件，引入bundle1.js和bundle2.js，这两个文件就是我们要打包的两个js文件 index.html ~~~ <!DOCTYPE html> <html lang="en"> <head> <title>webpack example02</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <script type="text/javascript" src="./bundle1.js"></script> <script type="text/javascript" src="./bundle2.js"></script> </body> </html> ~~~ 3. 建立webpack.config.js配置文件 entry是入口 output是出口,`[name]`相当于变量上面是bundle1我就bundle1 ~~~ module.exports = { entry: { bundle1: './main1.js', bundle2: './main2.js' }, output: { filename: '[name].js' } }; ~~~ 运行webpack就可以看到结果了