webpack——安裝及工做原理

來自慕課網https://www.imooc.com/video/1... webpack深刻與實戰 視頻總結。

安裝方法

1. 創建工程目錄 mkdir projectName
2. 進入工程目錄 npm init
3. 安裝：npm install webpack --save-dev

簡單使用：

1. 新建一個js文件：hello.js

   

2. webpack hello.js hello.bundle.js
   打包輸出說明：Asset:打包文件名稱 Size：文件大小 Chunks： 打包塊 Chunk Names：打包塊名稱
   

   hello.bundle.js：
   

3. 新建world.js
   
4. 在hello.js中引用world.js
   
5. webpack hello.js hello.bundle.js 打包
   

   hello.bundle.js以下：
   將模塊編號爲：【0】 【1】 在模塊0中__webpack_require__(1)
   

webpack命令行經常使用參數：

--module-bind css文件綁定用style-loader!css-loader 處理， 
--progress 查看打包進度
--display-modules 展現全部模塊
--display-reason 展現模塊打包緣由
--watch 檢測文件修改後自動打包
--config webpack.dev.config.js 從新配置webpack的文件名