之前寫業務都是webpack-cli自己打包的，最近有個專案需要自行打包，然後就稍微學習了一下，發現webpack版本之間差別稍大，這一塊講的不多，因為研究不深、

webpack是一個模組打包器，能夠將任何資源如js 或者非js，比如說css和圖片打包成一個或者多個檔案

為什麼要用webpack呢？

1 可以將多個資源模組打包成一個或幾個檔案

2 webpack會將你的資源轉換成最適合瀏覽器的格式，提升應用效能，比如只引用被應用 使用的資源，剔除未被使用的程式碼，懶載入資源。

webpack,gulp/grunt ,npm 之間的區別

webpack 是模組打包器，把所有的模組打包成一個只需載入少量檔案即可執行整個應用，無需像之前那樣載入大量檔案，字型檔案等，。而gulp/grunt是自動化構建工具。或者叫任務執行起（task runner）是把你所有重複的手動操作讓程式碼來做，例如壓縮js程式碼，css程式碼，程式碼檢查、程式碼表一等，自動化構建工具並不能把所有模組打包到一起，也不能構建不同模組的依賴圖，兩者來比較的話，gulp/grunt無法做模組打包的事，webpack雖然油loader和plugin可以做一部分gulp/grunt能做的，但是外掛不如gulp/grunt豐富，更好的方法是甩npm scripts取代gulp/grunt，npm是node的包管理器(node package manager)，用於管理node的第三方軟體包，npm對於任務命令的良好支援讓你最終省卻了編寫任務程式碼的必要，取而代之的是命令列，足以完成你的模組打包和自動化構建的所有需求

webpack的最基本應用

全域性安裝 npm i webpack -g

建立專案 mkdir app

在app目錄下新增test.js document.write('HELLO WORLD')

在 app 目錄下新增 index.html 檔案，程式碼如下：

接下來使用webpack命令打包

webpack test.js -o bundle.js

執行以上命令會編譯 test.js 檔案並生成bundle.js 檔案

在瀏覽器開啟index.html,輸出結果

webpack 的使用，最複雜的一部分莫過於它的配置項。webpack通過你的配置項，放置所有與打包相關的資訊基本配置包括:

entry 是打包指定檔案的地址，打包之後放的位置是output，rules是打包過程檔案的處理，根據rules的loader處理，plugins是webpack的外掛

安裝到本專案

npm i -D

npm i webpack -D

安裝完成後可以通過以下途徑執行安裝到本專案的webpack

根專案目錄下對應的命令列裡通過".\node_modules\.bin\webpack"(注意：不是"./node_modules/.bin/webpack")執行webpack的可執行檔案。

在npm script裡定義的任務會優先使用本專案下的webpack

一個是全域性安裝 npm i xxx -g 本專案安裝npm i xx -D 推薦安裝到本專案，原因是可防止不同的專案因依賴不同版本的webpack而導致衝突

CommonJS優點在於：1程式碼可符用於Node.js環境下執行，2 通過npm釋出的很多第三方模組都採用了CommonJS規範

CommonJS缺點，無法直接執行在瀏覽器，必須轉換成ES5

AMD 與CommonJS最大的不同是採用了非同步的方式去載入依賴的模組

採用AMD匯入匯出的程式碼如下：

define('module',['dep'],function(dep){ //定義一個模組

　　return exports

})

require(‘module’,function(module){ //匯入

})

AMD的優點：可在不轉換程式碼的情況下直接在瀏覽器中執行；

可非同步載入依賴；可並行載入多個依賴；程式碼可執行在瀏覽器環境和Node.js環境下。

缺點：JavaScript執行環境沒有原生支援AMD，需要先匯入實現了AMD的庫後才能正常使用。

es6 模組化

es6模組化是國際標準化組織ECMA提出的js模組化規範，語言層面上實現了模組化，瀏覽器廠商和Node.js宣佈要原生支援該規範，它將逐漸取代CommonJS 和AMD規範，成為瀏覽器和伺服器通用的模組解決方案

ES6模組化匯入 import xxx from 'xxx'

匯出 export function fun(){} export default {}

樣式檔案中的模組化

除了js開始進行模組化改造，前端開發的樣式檔案也支援模組化，以scss為例，將一些常用的樣式片段放進一個通用的檔案裡，在另一個檔案裡通過@import語句匯入和使用這些樣式片段

@xxx center{}

@import xxx.scss

#box{

　　@include center

}

webpack版本不同，使用方式可能也會不同，下面來看下webpack3的使用：

webpack3的使用

普通打包：穿件一個目錄，比如test1.0 npm 初始化目錄: npm init，完成後在test目錄生一個pack.json的檔案

本機區域性安裝webpack：npm install webpack@3.10.0 --save-dev

--save-dev會做為開發依賴來安裝webpack。安裝成功後，在package.json中會多了一項配置：

"devDependencies" : {

　　"webpack": "^3.10.0",

}

此時的package.json檔案為：

看到"devDependencies"中含有webpack，就說明已經安裝成功了，很快就可以啟動一個webpack工程。

接下來新建一個src目錄並且在src目錄下新建main.js檔案console.log("hello webpack");

新建index.html

專案結構

執行以下命令打包main.js：webpack src/main.js dist/bundle.js

如果有webpack.config.js 則至二級輸入webpack 命令即可打包

webpack.config.js 配置

通過npm run build 命令打包

修改package.json中的script命令：

然後命令列輸入npm run buidl 也可以打包

實現自定監聽 可以新增watch

命令列輸入：npm run watch 打包

二、webpack4 使用

首先，建立一個目錄，比如demo，使用npm初始化目錄npm init

之後在本機區域性安裝webpacknpm install webpack --save-dev

還需安裝webpack-cli：npm install webpack-cli --save-dev

建立 webpack.config.js 檔案作為webpack的配置檔案

新建index.html檔案

新建main.js 檔案document.write("test webpack4.0");

使用webpack：設定開發或者生產模式：設定開發或者生產模式：

在 webpack.config.js 裡設定mode: 'development'

為了方便使用，我們在package.json里加入webpack打包的命令方便我們使用修改script項

然後npm run build

webpack.config.js

ebpack就是一個.js配置檔案，我們建立一個webpack.config.js檔案，我們可以在其中進行各項配置。

比如我們想要使用一個熱載入網頁的框架webpack-dev-server(webpack-dev-server是一個輕量級的伺服器，修改檔案原始碼後，自動重新整理頁面將修改同步到頁面上)，我們先安裝：

npm install webpack@4.6.0 webpack-cli@2.0.15 webpack-dev-server@3.1.3 --save-dev（這邊會有一個版本不相容問題）

然後在package.json的"scripts"裡增加一個快速啟動webpack-dev-server服務的指令碼：

package.json的詳細配置如下：

在webpack.config.js中對webpack.config.js中新增devServer選項對webpack-dev-server進行詳細配置：

執行 npm run dev 執行webpack-dev-server --open --config webpack.config.js

其中--config是指向webpac-dev-server讀取的配置檔案路徑，這裡直接讀取我們在上一步建立的webpack.config.js檔案。

--open會在執行命令時自動在瀏覽器中開啟頁面，預設地址是127.0.0.1:8080，不過ip和埠都是可以配的

webpack配置中最重要的也是必選的兩項是入口和出口，入口的作用是告訴webpack從哪裡開始尋找依賴，並且編譯。出口則用來配置編譯後的檔案儲存位置和檔名。

在終端執行 npm run dev

三、完善配置檔案

在webpack的世界裡，每一個檔案都是一個模組，比如.css，.js，.html，jpg,.less對於不同的模組需要用不同的載入器來處理，而載入器就是webpack最重要的功能。通過安裝不同的載入器可以對各種不同字尾名的檔案進行處理，比如現在要一個一個css樣式就要用到css-loader和style-loader,

npm install css-loader --save-dev

npm install style-loader --save-dev

安裝完成後，在webpack.config.js 檔案裡配置loader。增加.css檔案的處理

module:{

　　rules:[

　　{

　　　　test:/\.css$/,

　　　　use:[
　　　　'style-loader','css-loader'
　　　　]

　　}

　　]

}

webpack看似複雜，但它不過是一個js配置檔案，只要搞清楚入口、出口、載入器、外掛這四個概念，使用起來就不那麼困惑了

Loaders

oaders是webpack提供的最激動人心的功能之一了。通過使用不同的loader，webpack有能力呼叫外部的指令碼或工具，實現對不同格式的檔案的處理，比如說分析轉換scss為css，或者把下一代的JS檔案（ES6，ES7)轉換為現代瀏覽器相容的JS檔案，對React的開發而言，合適的Loaders可以把React的中用到的JSX檔案轉換為JS檔案。

Loaders需要單獨安裝並且需要在webpack.config.js中的modules關鍵字下進行配置，Loaders的配置包括以下幾方面：

test：一個用以匹配loaders所處理檔案的拓展名的正則表示式（必須）

loader：loader的名稱（必須）

include/exclude:手動新增必須處理的檔案（資料夾）或遮蔽不需要處理的檔案（資料夾）（可選）；
query：為loaders提供額外的設定選項（可選）

下面以css的處理為例來說明：

1,以es6方式匯入檔案

現在寫一些css，就需要用到style-loader和css-loader,現在通過npm來安裝：npm install css-loader style-loader --save-dev

安裝完成後，建立一個css檔案：body:{

　　background:#ddd

}

在main.js檔案中增加如下程式碼

import css from './app.css';
console.log("hello world");

執行npm run build

以CommonJS方式匯入檔案

檔案目錄

五 Babel

Babel是一個編譯js的憑他，它可以編譯程式碼幫你達到以下目的

讓你能使用最新的js程式碼 （ES6 ES7 ...）而不用管新標準是否被當前使用的瀏覽器完全支援；讓你能使用基於JavaScript進行了拓展的語言，比如React的JSX；Babel的安裝與配置

Babel其實是幾個模組化的包，其核心功能位於稱為babel-core的npm包中，webpack可以把其不同的包整合在一起使用，對於每一個你需要的功能或拓展，你都需要安裝單獨的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。

專案目錄結構如下

本文來源於https://blog.csdn.net/duansamve/article/details/81159107

實在是太長了，我想整理一下 發現沒法壓縮，都是精華，明天去配置