多入口文件(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就可以看到結果了