本篇文章可切換到分支 step1檢視源**。
官網對webpack的定義是module bundler，目的就是把有依賴關係的各種檔案打包成一系列的靜態資源。
建立乙個空資料夾，進入
cd /users/silence/code/personal/webpack-practicenpm install webpack -g
document.write('hello world!');這個時候專案中多了乙個bundle.js檔案，使用script標籤將其引入到index.html中
在瀏覽器中開啟index.html檔案，頁面出現 hello world! 文字。動態打包檔案
為此建立乙個webpack.config.js檔案。
module.exports =
};
output： 出口檔案 打包後的檔案放在**
一、 使用watch模式：
webpack 提供了乙個命令--watch，一直監聽檔案，只要有變化就自動執行打包命令。這樣會有兩個問題：
* 1. 我們訪問的位址為本地檔案位址。
* 2. 瀏覽器不能自動重新整理。
為了在開發過程中優化開發體驗，webpack提供了乙個webpack-dev-server
全域性安裝
npm install webpack-dev-serverwebpack-dev-serverversion: webpack 1.13.2按照提示在瀏覽器中訪問： http://localhost:8080/webpack... ，
如願出現hello world！字樣。
build多個檔案
有兩種解決方案
建立login.js，檔案內容：
console.log('login in');require('./login');執行dev-server，console中輸出login.js的檔案內容.
2. 在webpack-config.js中更改entry
建立utils.js檔案，內容為：
console.log('utils.js file ...');執行dev-server，console中輸出utils.js的檔案內容。
這就是webpacj的入門級使用，個人體驗
webpack 從入門到工程實踐
webpack 也許可以算作是目前前端開發離不開的工具了。參與本話題，我們可以花最短的時間理解，掌握，並依據自己的工程需求拓展使用這款工具 基於最新版3.5.4 本話題將包含以下內容 從 0 構建屬於自己的 webpack 基礎配置檔案，此部分你將理解 webpack 涉及到的常用概念，明白 web...
webpack 完整入門學習筆記（二）
在第一節配置webpack的配置檔案，這一節我們就對裡面一些配置進行一下探索，entry入口檔案配置可以配置字串，也可以配置陣列，也可以配置物件 其中字串模式和陣列都可以算作是單頁面入口 字串 const config 陣列 const config 發現這樣寫，並沒有什麼卵用，好像只載入了第乙個，...
入門webpack 二）webpack概論
從官網 github 上的描述可以看到webpack可以將眾多模組打包成很少的的資源，將 分割成細小的部分這樣使應用程式按需要載入 塊。通過loader，webpack可以處理的模組有很多，amd定義的模組，commonjs，css，images，scss等以及自定義模組。webpack自身只能處理...