⑴ webpack基本使用
step1: 創建一個項目錄
注意：項目名一般 不要帶中文
step2: 創建 package.json
或者：
step4: 處理第三方文件
html文件中需要引入多個js文件或者第三方模塊(例如：jquery.js)，只引入項目js入口文件( main.js ),其他js文件均在入口文件中導入。導致可能JS文件中使用了瀏覽器不識別的高級語法:
總結：webpack可以做兩件事情況：
step5: 配置入口文件和出口文件
每次修改js文件，手動輸入命令： webpack 入口文件路徑 -o 出口文件路徑 重新打包， 每次都要輸入入口文件和出口文件，麻煩。可以在項目目錄下建立配置文件 webpack.config.js ,指定入口文件和出口文件:
重新打包：
step6: 實現自動打包編譯
每次修改js文件，都要手動重新打包，還是麻煩？使用 webpack-dev-server 這個工具，來實現自動打包編譯的功能。
webpack-dev-server 這個工具，如果想要正常運行，要求在本地項目中必須安裝 webpack
在 package.json 文件中配置命令：
在終端中執行命令：
註：在終端執行 npm run dev ，就等於執行 webpack-dev-server 命令。這將在node中開啟一個伺服器，並且立即打包。每次修改文件，ctrl + s 保存文件,webpack-dev-server工具自動監聽文件改變，並且自動打包。
改變文件引用路徑：
執行上述命令後終端會有類似信息輸出：
【 Project is running at http://localhost:8080/ 】——webpack-dev-server工具將項目託管到localhost:8080/埠上
【webpack output is served from /】——打包好的文件通過localhost:8080/bundle.js訪問
【Content not from webpack is served from C:UsersyfbDesktop前端學習案例4.27wabpackDemo_1src】——不是通過webpack打包的文件，則是以src為根目錄訪問。
該項目根目錄下並不存在bundel.js文件，我們可以認為webpack-dev-server把打包好的文件，以一種虛擬的形式託管到了咱們項目的根目錄中，雖然我們看不到它，但是可以認為和 dist、src、node_moles平級，有一個看不見的文件，叫做 bundle.js。其實是為了頻繁打包，提高效率，直接把打包的文件放在內存中。
因為項目託管到新伺服器，現在應該訪問的是 該伺服器 下的項目，文件引用路徑也要改變:
step7: 自動打開瀏覽器進行訪問、配置埠號、指定託管的根目錄、熱重載（只是修改補丁，不重新生成整個bundle.js文件）
在 package.json 中配置命令，並重啟伺服器：
step8: 使用 html-webpack-plugin 插件
使用 --contentBase 指令的過程比較繁瑣，需要指定啟動的目錄，同時還需要修改index.html中script標簽的src屬性。
安裝 html-webpack-plugin 插件：
在 webpack.config.js 配置文件中配置插件：
html-webpack-plugin 插件的兩個作用：
step9: 處理樣式文件
html文件中需要引入css、less、sass樣式文件。默認情況下，webpack處理不了這些樣式文件。
處理css文件：
處理less樣式文件
⑵ webpack 怎麼直接實時編譯輸出文件
使用webpack編譯打包react是非常便捷的。這也是人們常用的一種方式。但是在使用過程中，一定要注意一個細節，那就是webpack和babel-loader的安裝位置。react安裝當然，使用react必須先安裝react和react-dom，其安裝方式很簡單（前提是我們必須安裝有npm）。#npminstallreactreact-dom–savereact安裝就這樣簡單，其實react和react-dom就是相當於js類庫。但是我們需要解析器來解析react的語法。react解析器babel安裝babel安裝的位置是我們這篇文章的目的。babel有兩種安裝的位置：一種是全局安裝，一種是本地安裝——也就是安裝在項目目錄下的node_moles下。#npminstallbabel-corebabel-loaderbabel-preset-react–save-dev//本地安裝#npminstallbabel-corebabel-loaderbabel-preset-react–g//全局安裝一般情況下我們選擇本地安裝，這樣便於管理。打包工具webpack的安裝同樣，webpack的安裝位置也是這篇文章描述的所要注意的點。當然，它也有兩種安裝的位置：全局安裝和本地安裝。#npminstallwebpack–save-dev//本地安裝#npminstallwebpack–g//全局安裝如果選擇本地安裝，那麼在使用的時候較麻煩一些，我們需要在命令前加上路徑。所以一般情況下都是全局安裝，這樣就可以在任意位置直接使用。這里我們選擇全局安裝。這樣才能出現我們將要說的問題。webpack配置文件編寫安裝完webpack以後，下面來編寫webpack配置文件webpack.config.js。這里我不寫全部，只寫載入loader部分。代碼一mole:{loaders:[{test:/\.js$/,loader:'babel',query:{presets:['react']}}]}編譯過程中出現的錯誤好了，到了關鍵的地方了。現在我們整個系統的配置是這樣的：babel安裝到本地，webpack安裝到全局位置，webpack配置文件如代碼一所示。接下來我們就要編譯打包我們的項目。#webpack執行該命令以後，你會發現出現如下的錯誤：ERRORin(webpack)/~/node-libs-browser/~/process/browser.jsMolebuildfailed:Error:Couldn'tfindpreset"react"relativetodirectory"/node/lib/node_moles/webpack/node_moles/node-libs-browser/node_moles/process"……這也就是說找不到babel-preset-react。好了，說了這么多終於在這里引出了我們將要討論的問題（這里大家不要嫌我啰嗦，為什麼出現這種問題，其原因總要弄清楚。什麼樣的配置會出現這種問題，了解以後才容易上手解決）。解決問題的方式出現上述問題以後，我們有這樣三種方式可以解決。方式一要解決這個問題很簡單。我們知道，出現這個問題是因為bable和webpack安裝的位置不同，所以找不到babel-preset-react。因為在配置文件中有這樣一段代碼。query:{presets:['react']}好了，既然知道是安裝位置不同，那我們可以將babel安裝在全局位置，這樣這個問題不就解決了嗎。#npmremovebabel-corebabel-loaderbabel-preset-react–save-dev//首先移除原先安裝的babel#npminstallbabel-corebabel-loaderbabel-preset-react–g//全局安裝沒錯，問題解決了。但是我們不推薦使用這種方式。因為這樣不便於管理，所以還是使用其他的方式。方式二此種方式和方式一大同小異。方式一是改變babel的安裝位置，而這里是改變webpack的安裝位置。原先webpack是安裝到全局位置的，所以找不到安裝到本地項目目錄下的babel-preset-react。因此我們可以改變webpack的位置。#npmremovewebpack–g//移除原先的webpack#npminstallwebpack–save-dev//將webpack安裝到本地位置——也就是項目目錄下的node_moles中#ln–s/項目根目錄/node_moles/webpack/bin/webpack.js/usr/bin/webpack//為了使用webpack方便，在這里我們在/usr/bin目錄下建立軟連接（也就是快捷方式）//這樣我們就可以在任意位置直接使用webpack命令了。此時我們已經改變了webpack的安裝位置。現在二者同在項目目錄下安裝。所以可以正確編譯了。此種方式較方式一，我個人比較推薦這種方式，這樣比較方便管理。但是，這種方式也不是沒有弊端。如果我們有多個項目，那我們就需要在每個項目下都安裝webpack，那豈不是很麻煩。所以這種方式也不是很好。方式三該方式應該說是最值得推薦的，因為不需要改變webpack和babel的安裝位置。webpack還是在全局位置，babel還是在本地項目位置下。我們需要做的就是修改webpack的配置文件，在代碼一的基礎上添加一句代碼。代碼二mole:{loaders:[{test:/\.js$/,loader:'babel',exclude:/node_moles/,query:{presets:['react']}}]}
⑶ webpack工作流程
Webpack 的運行流程是一個串列的過程,從啟動到結束會依次執行以下流程 :
1.初始化參數：從配置文件和 Shell 語句中讀取與合並參數,得出最終的參數。
2.開始編譯：用上一步得到的參數初始化 Compiler 對象,載入所有配置的插件,執行對象的 run 方法開始執行編譯。
3.確定入口：根據配置中的 entry 找出所有的入口文件。
4.編譯模塊：從入口文件出發,調用所有配置的 Loader 對模塊進行翻譯,再找出該模塊依賴的模塊,再遞歸本步驟直到所有入口依賴的文件都經過了本步驟的處理。
5.完成模塊編譯：在經過第 4 步使用 Loader 翻譯完所有模塊後,得到了每個模塊被翻譯後的最終內容以及它們之間的依賴關系。
6.輸出資源：根據入口和模塊之間的依賴關系,組裝成一個個包含多個模塊的 Chunk,再把每個 Chunk 轉換成一個單獨的文件加入到輸出列表,這步是可以修改輸出內容的最後機會。
7.輸出完成：在確定好輸出內容後,根據配置確定輸出的路徑和文件名,把文件內容寫入到文件系統。
在以上過程中,Webpack 會在特定的時間點廣播出特定的事件,插件在監聽到感興趣的事件後會執行特定的邏輯,並且插件可以調用 Webpack 提供的 API 改變 Webpack 的運行結果。
⑷ webpack的基礎，看懂webpack如何編譯bundle everything
這篇文章簡單概述webpack構建編譯各種資源的通天本領，幫大家簡單理解webpack如何強大到編譯各種資源（es6/es7、jsx、vue、less、scss、image...）。
webpack天生支持有且只支持以下模塊打包編譯
糟糕，我們發現它只能讀懂 .js、.json文件 。沒有看到它支持 jsx、TypeScript 或者我們經常寫的 sass、less樣式 等的編譯處理啊！比如less樣式寫法並不是原生css支持的，所以他怎麼處理非原生模塊的語法並進行模塊化？
沒錯，就是用這些裝載器把這些非原生樣式語法寫法轉成單純原生的css規則： index.less => index.css ，現在通過這些loader的編譯轉換，瀏覽器可以讀懂了。
那麼還有哪些常用的loader？
以babel-loader為例，為什麼需要它。
例如我們開發中常寫的 es6、es7、n... ，所以需要 babel 來編譯進行轉換為ES5兼容的語法。
對於語法轉換，往更深層次的奧義，就是涉及babel原理， AST語法樹 ，一般loader都會經過3個步驟：
篇幅概念性太強，請看總結。
參考：
⑸ 丁鹿學堂：webpack下使用ts開發編譯
webpack結合ts使用
1.初始化webpack， npm init -y 生成package.json 文件
自己加一個打包命令 "build": "webpack"
2.安裝開發依賴 npm i -D webpack webpack-cli typescript ts-loader
3.自己創建配置文件webpack.config.js
4.創建tsconfig配置文件，這個相關配置在上個文章中已經介紹過了，我們只簡單選擇三項，開啟嚴格模式。
5.都配置好以後，再編譯ts 就可以直接使用 npm run bulid 去編譯了。
以上就是最簡單的webpack打造的ts開發編譯環境。
⑹ webpack的打包配置-1修改版
1、現在本地創建項目目錄
2、然後在index.html中寫入html的結構
3、想要先安裝jquery，先npm init -y一下， npm install jquery -S 【項目目錄安裝，必須是小寫的jquery，否則會報錯】，在index.html引入main.js
4、在main.js中寫入內容如下：
使用webpack處理一下，轉換成瀏覽器可以識別的文件 ：
a: 先全局安裝一下webpack=> npm install [email protected] -g
b: 在終端中執行： webpack ./src/main.js【要處理的文件的目錄】 ./dist/bundle.js【要輸出的文件的目錄以及文件名】 ，會在dist中生成一個bundle.js文件，然後在 index.html中引入的main.js文件改成 bundle.js
這樣的話每次打包時候都需要執行 webpack ./src/main.js ./dist/bundle.js
c: 為了不手動指定入口和出口文件，在項目根目錄中新建一個webpack.config.js（基於node的，所以** **node.js的命令都可以識別）
這樣的話，就可以在終端中直接執行命令：webpack就可以直接打包了，但是還有個小問題。就是它不 會自動更新，需要手動刷新一下。下面我們就來解決這個問題。來配置webpack-dev-server
4、使用webpack-dev-server實現自動打包編譯
直接安裝webpack最高版本的時候，可能會遇到報錯的情況，如果對於版本沒有要求的話，可以降低版本：
npm install [email protected] -D 如果還會有報錯出現的話，可以試試使用cnpm安裝
需要先在終端中安裝webpack-dev-server：具體操作如下：
4.1 npm/cnpm install webpack-dev-server -D 出現下面的提示：【其實此步驟容易出現報錯，所以呢，把webpack-dev-server版本修改為@2.9.1=>[email protected]時，就不會報錯】
4.2 npm/cnpm install webpack -D 【此步驟也是容易出錯的，所以安裝的時候要和上邊的版本保持一致，[email protected]版本】
4.3 需要在package.json中配置dev
最後直接執行：npm run dev運行成功，但是需要注意的是此時打包成的bundle.js文件不是磁碟中存在bundle.js文件，而是一個與src dist node_mole同級的看不見的文件，在index.html引入的路徑也要修改以下=》<script src="/bunlde.js"></script>
此時，正常打包，但是不自動打開瀏覽器
發布出來，方便自己查看，有什麼不對的地方，希望留言糾正修改。（程序員菜鳥一枚）
⑺ webpack+vue怎麼編譯全部改動的文件
p@ build /Users/raywill/code/vue/shop
> cross-env NODE_ENV=proction webpack --progress --hide-moles
Hash: d902d9dc5e1698eaa9ea
Version: webpack 1.12.14
Time: 6584ms
Asset Size Chunks Chunk Names
build.js 80.7 kB 0 [emitted] main
build.js.map 690 kB 0 [emitted] main 12345678910111234567891011
通過引入組件的方式
⑻ webpack打包vue項目，可修改配置文件
vue項目打包完成後，如需改變配置文件中的信息，比如域名修改（如下圖config.js），是不可能在配置文件中直接更改的，因為配置文件是前端寫死的，這時只能手動更改項目中的配置，然後重新打包npm run build
var packConfig = require('../src/config')//引入原配置文件
var GenerateAssetPlugin = require('generate-asset-webpack-plugin')//引入插件
var createServerConfig = function(compilation){//聲明轉換函數，將對象轉為json字元串
return JSON.stringify(packConfig)
}
plugins里添加
new GenerateAssetPlugin({//生成文件，並添加入內容
filename: 'config.json',
fn: (compilation, cb) => {
cb(null, createServerConfig(compilation));
},
extraFiles: []
})
import axios from 'axios'//引入一個ajax封裝工具
import storage from 'services/storage'//引入對緩存操作的封裝工具
var getConfigJson = function () {
//聲明一個函數，用來讀取json文件並將其內容存入緩存
axios.get('config.json').then((result) => {
//讀取文件
storage.setItem('config', result.data)
}).catch((error) => {
console.log(error)
})
}