webpack安裝使用

時間 2019-11-14

標籤 webpack 安裝使用简体版

原文原文鏈接

1、安裝

一、安裝node.js，Webpack 須要 Node.js v0.6 以上支持

二、使用npm（軟件包管理）安裝webpack

（1）全局安裝

   npm install webpack -g 
 

（2）安裝到項目依賴中

   ::建立package.json文件 
 
   npm init     
 
   ::安裝webpack依賴 
 
   npm install webpack --save-dev

2、使用webpack

一、建立靜態頁面index.html js入口文件entry.js

   <!-- index.html --> 
 
   <html> 
 
   <head> 
 
     <meta charset="utf-8"> 
 
   </head> 
 
   <body> 
 
     <!--build.js文件是打包後生成文件--> 
 
     <script src="build.js"></script> 
 
   </body> 
 
   </html>

// entry.js

document.write('It works.')

二、編譯打包

   webpack entry.js build.js 
 

用瀏覽器打開 index.html 將會看到 It works.

三、添加模塊

//建立module.js

module.exports = 'It works from module.js';

   //entry.js 
 
   document.write('It works'); 
 
   document.write(require('./module.js'));  //引入新建模塊

從新打包：

   webpack entry.js build.js 
 

刷新頁面看到變化 It works.It works from module.js.

總結：webpack會分析入口文件，將全部模塊打包到build.js。webpack會給每一個模塊分配一個惟一的id，經過這個id索引和訪問模塊。頁面啓動時，會先執行entry.js中的代碼，其餘模塊會在運行require時執行。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。