安裝webpack: npm install webpack webpack-cli -d
全域性安裝webpack：npm install --global webpack webpack-cli (不推薦全域性安裝，這會將你的專案中的webpack鎖定到指定版本，並且在使用不同的webpack版本的專案中可能會導致構建失敗)。
幾個核心概念：
1.mode開發模式：
如果是development（開發模式），則打包後正常顯示，如果是production(產品模式)，則打包後為壓縮模式。
2.入口檔案（entry）：
入口檔案類似於其他語言的起始檔案（如main函式所在的檔案）。入口起點指示webpack應該使用哪個模組，來作為構建其內部依賴圖的開始。進入入口起點後，webpack會找出有哪些模組和庫時入口起點依賴的。
webpack配置的entry(有三種輸入方式)
1.乙個入口檔案，所有的依賴全部在這個入口檔案中指定：webpack 4.x後，乙個入口檔案預設為src下面的index.js，不用寫entry
2.將兩個平行的，不相依賴的兩個檔案打包在一起（以陣列的形式）：entry: ['./src/index.js','./src/a.js']
3.輸出（output）:
output屬性告訴webpack在**輸出它所建立的bundles，以及如何命名這些檔案。
如果入口檔案有多個，若output.filename還是寫死的乙個，它們之間就會進行報錯。解決辦法：通過一些佔位符使每個檔案輸出名都是唯一的
① [name]佔位符
② [hash]佔位符
③ [chunkhash]佔位符
4.loader
loader讓webpack能夠去處理那些非js檔案（webpack自身只理解js）。loader可以將所有型別的檔案轉換為webpack能夠處理的有效模組，然後就可以利用webpack的打包能力，對它們進行處理。
5.外掛程式(plugins):
loader被用於轉換某些型別的模組，而外掛程式則可以用於執行範圍更廣的任務。外掛程式的範圍包括：從打包優化和壓縮，一直到重新定義環境中的變數。外掛程式的功能及其強大，可以用來處理各種各樣的任務。
webpack的基礎配置：
手動配置webpack:預設配置檔案的名字為：webpack.config.js
//webpack是node寫出來的 是node的寫法
如果想要修改預設的配置檔案名稱，如：把webpack.config.js檔名修改為webpack.config.my.js
當然直接執行npx webpack命令會報異常，找不到該配置檔案，但是我們可以手動的指定配置檔案，如下：
如果覺得這個名字太長了，每次執行起來很麻煩，我們可以到package.json檔案中配置一些指令碼
執行命令npm run build即可
webpack-dev-server是乙個小型的node.js express伺服器，它並不會真實的去打包檔案，只是生成乙個記憶體中的打包，把檔案寫到記憶體中，預設埠是8080。
安裝：npm install webpack-dev-server -d
可以通過在package.json檔案中新增一條配置：
然後直接用npm run dev來執行命令
通過給定的位址直接訪問頁面即可
webpack常見命令
webpack 最基本的啟動webpack命令 webpack w 提供watch方法，實時進行打包更新 webpack p 對打包後的檔案進行壓縮 webpack d 提供sourcemaps，方便除錯 webpack colors 輸出結果帶彩色，比如 會用紅色顯示耗時較長的步驟 webpack...
webpack2 webpack的基礎配置
1.webpack的安裝 webpack一般是本地安裝，也就是在自己所需要的專案中進行安裝，需要安裝的包有兩個 webpack webpack cli d d表示安裝的是依賴，在專案上線的時候不需要載入 注 專案初始化的時候，可以直接使用命令 cnpm init y他與之前使用的cnpm init的...
基本的webpack配置
全域性安裝npm install webpack g本地安裝npm install webpack webpack cli webpack dev server d建立webpack.config.js檔案 在package.json的scripts中新增以下 如果webpack.config.js...