Vue之webpack的entry和output

時間 2020-08-01

標籤 vue webpack entry output 简体版

原文原文鏈接

1、文件結構html

2、index.htmlwebpack

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <!-- 原始的引入作法
11         缺陷：相關聯的依賴有多少，你就須要引入多少
12     -->
13     <!-- <script src="../js/base.js"></script>
14     <script src="../js/home.js"></script> -->
15 
16 
17     <!-- 使用webpack好處：
18         它幫你生成一個管理全部依賴的js文件，你只須要引入這一個js文件就能夠了
19     -->
20     <script src="../dist/home.bundle.js"></script>
21 </body>
22 </html>

3、signup.htmlweb

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     
11     <!-- 原始的引入作法
12         缺陷：相關聯的依賴有多少，你就須要引入多少
13     -->
14     <!-- <script src="../js/base.js"></script>
15     <script src="../js/signup.js"></script> -->
16 
17 
18 
19     <!-- 使用webpack好處：
20         它幫你生成一個管理全部依賴的js文件，你只須要引入這一個js文件就能夠了
21     -->
22     <script src="../dist/signup.bundle.js"></script>
23 </body>
24 </html>

4、base.jsnpm

1 // 註冊功能是否開放
2 var open = true;
3 
4 // ES6語法
5 export {open}

5、home.jsjson

1 // ES6語法
2 import {open} from './base';
3 
4 if(open){
5     document.body.innerHTML = '<a href="signup.html">註冊</a>'
6 }

6、signup.js瀏覽器

 1 // ES6語法
 2 import {open} from './base';
 3 
 4 if(open){
 5     document.body.innerHTML = 
 6     `
 7     <h1>
 8         歡迎入坑
 9     </h1>
10     `
11         
12 }else{
13     document.body.innerHTML = 
14     `
15     <h1> 
16         暫不開放註冊
17     </h1>
18     `
19 }

7、package.jsonui

8、webpack.config.jsspa

 1 module.exports = {
 2     // 兩個入口文件
 3     entry:{
 4         home:'./js/home.js',
 5         signup:'./js/signup.js'
 6     },
 7 
 8     // 出口文件
 9     output:{
10         // [name]是動態的，其中name指向entry對象的key
11         filename:'[name].bundle.js',
12         // 注意：__這是兩個英文下劃線！
13         // 出口文件保存在當前目錄下的dist目錄下。注：dist指distribution 分發的意思
14         path:__dirname + '/dist'
15     }
16 }