摘要：我們可以使用內置的為所有的依賴定義這個變量這是開發環境這是生產環境作者正兒八經的嬌嬌鏈接來源掘金著作權歸作者所有。

WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。

構建就是把源代碼轉換成發布到線上的可執行 JavaScrip、CSS、HTML 代碼，包括如下內容：

代碼轉換：TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS 等。
文件優化：壓縮 JavaScript、CSS、HTML 代碼，壓縮合并圖片等。
代碼分割：提取多個頁面的公共代碼、提取首屏不需要執行部分的代碼讓其異步加載。
模塊合并：在采用模塊化的項目里會有很多個模塊和文件，需要構建功能把模塊分類合并成一個文件。
自動刷新：監聽本地源代碼的變化，自動重新構建、刷新瀏覽器。
代碼校驗：在代碼被提交到倉庫前需要校驗代碼是否符合規范，以及單元測試是否通過。
自動發布：更新完代碼后，自動構建出線上發布代碼并傳輸給發布系統。
構建其實是工程化、自動化思想在前端開發中的體現，把一系列流程用代碼去實現，讓代碼自動化地執行這一系列復雜的流程。 構建給前端開發注入了更大的活力，解放了我們的生產力。

初始化package.json

npm init -y 

package.json 文件中

"scripts": {
"build": "webpack  --profile --progress --colors --display-error-details",
"dev": "webpack  --display-modules --profile --progress --colors --display-error-details"
},

color 輸出結果帶彩色，比如：會用紅色顯示耗時較長的步驟

profile 輸出性能數據，可以看到每一步的耗時

progress 輸出當前編譯的進度，以百分比的形式呈現

display-modules 默認情況下 node_modules 下的模塊會被隱藏，加上這個參數可以顯示這些被隱藏的模塊

display-error-details 輸出詳細的錯誤信息

全局安裝

npm install webpack -g

本地安裝

npm install webpack webpack-cli -D//-D是指開發環境需要，上線不需要，下同

一般推薦本地安裝，安裝在自己的項目中，不然版本不同會有不兼容。

Entry：入口，Webpack 執行構建的第一步將從 Entry 開始，可抽象成輸入。

Module：模塊，在 Webpack 里一切皆模塊，一個模塊對應著一個文件。Webpack 會從配置的 Entry 開始遞歸找出所有依賴的模塊。

Chunk：代碼塊，一個 Chunk 由多個模塊組合而成，用于代碼合并與分割。

Loader：模塊轉換器，用于把模塊原內容按照需求轉換成新內容。

Plugin：擴展插件，在 Webpack 構建流程中的特定時機注入擴展邏輯來改變構建結果或做你想要的事情。

Output：輸出結果，在 Webpack 經過一系列處理并得出最終想要的代碼后輸出結果。

npm install webpack webpack-cli -D

創建src
創建dist
創建index.html
配置文件webpack.config.js

entry：配置入口文件的地址
output：配置出口文件的地址
module：配置模塊,主要用來配置不同文件的加載器
plugins：配置插件
devServer：配置開發服務器
// 基于node的 遵循commonjs規范的

let path = require("path");//node的模塊
module.exports = {
entry:"./src/index.js", // 入口
output:{

filename:"build.js",
// 這個路徑必須是絕對路徑
path: path.resolve("./dist")
}, // 出口
devServer:{

contentBase:"./dist",
port:8080,
compress:true,// 服務器壓縮
open:true,// 自動打開瀏覽器
// hot:true//熱更新
},// 開發服務器
module:{}, // 模塊配置
plugins:[], // 插件的配置
mode:"development", // 可以更改模式
resolve:{}, // 配置解析
}
// 在webpack中如何配置開發服務器 webpack-dev-server

配置開發服務器

npm i webpack-dev-server –D

contentBase 配置開發服務運行時的文件根目錄
host：開發服務器監聽的主機地址
compress 開發服務器是否啟動gzip等壓縮
port：開發服務器監聽的端口

devServer:{

contentBase:path.resolve(__dirname,"dist"),

host:"localhost",

compress:true,

port:8080

}//開發服務器

"scripts": {

"build": "webpack --mode development",

"dev": "webpack-dev-server --open --mode development "

}//開啟本地服務 npm run dev

入口文件的類型

這種情況很少，一般就以字符串的形式出現即可,例如：

entry: "./src/index.js",

entry:["./src/index.js","./src/a.js"]

有時候我們的頁面可以不止一個HTML頁面，會有多個頁面，所以就需要多入口

entry: {

   index: "./src/index.js",
   main:"./src/main.js"
},
output: {
       path: path.resolve(__dirname, "dist"),
       filename: "[name].[hash].js",
       publicPath:PUBLIC_PATH
  },
   new HtmlWebpackPlugin({
               minify: {
                   removeAttributeQuotes:true
               },
               hash: true,
               template: "./src/index.html",
               chunks:["index"],
                filename:"index.html"
           }),
            new HtmlWebpackPlugin({
                minify: {
                   removeAttributeQuotes:true
                },
               hash: true,
               chunks:["main"],
               template: "./src/main.html",
               filename:"main.html"
           })],

支持加載css文件

通過使用不同的Loader，Webpack可以要把不同的文件都轉成JS文件,比如CSS、ES6/7、JSX等

test：匹配處理文件的擴展名的正則表達式
use：loader名稱，就是你要使用模塊的名稱
include/exclude:手動指定必須處理的文件夾或屏蔽不需要處理的文件夾
query：為loaders提供額外的設置選項
loader三種寫法

use
loader
use+loader

npm i style-loader css-loader -D

配置加載器

module: {
rules:[

{

test:/.css$/,

use:["style-loader","css-loader"],//從右往左寫，webpack特性

include:path.join(__dirname,"./src"),

exclude:/node_modules/

}

]
},

支持圖片

npm i file-loader url-loader -D

file-loader 解決CSS等文件中的引入圖片路徑問題
url-loader 當圖片較小的時候會把圖片BASE64編碼，大于limit參數的時候還是使用file-loader 進行拷貝

let logo=require("./images/logo.png");
let img=new Image();
img.src=logo;
document.body.appendChild(img);
{
test:/.(jpg|png|gif|svg)$/,
use:"url-loader",
include:path.join(__dirname,"./src"),
exclude:/node_modules/
}

還可以在CSS文件中引入圖片

.img-bg{
background: url(./images/logo.png);
width:173px;
height:66px;
}

自動產出html

插件是 wepback 的支柱功能。webpack 自身也是構建于，你在 webpack 配置中用到的相同的插件系統之上！

插件使用
npm install 插件名 -D
因為插件都是類，引用方式，在plugins數組中 new 插件名 即可使用。

npm i html-webpack-plugin -D

minify 是對html文件進行壓縮，removeAttrubuteQuotes是去掉屬性的雙引號
hash 引入產出資源的時候加上哈希避免緩存
template 模版路徑

plugins: [
new HtmlWebpackPlugin({

minify: {

removeAttributeQuotes:true

},

hash: true,

template: "./src/index.html",

filename:"index.html"
})]

分離CSS

因為CSS的下載和JS可以并行,當一個HTML文件很大的時候，我們可以把CSS多帶帶提取出來加載，webpack4中mini-css-extract-plugin也可以實現，但是目前bug比較多，不能分成多個css。

npm install --save-dev extract-text-webpack-plugin@next

{

test:/.css$/,
use: ExtractTextWebpackPlugin.extract({
    use:"css-loader"
}),
include:path.join(__dirname,"./src"),
exclude:/node_modules/
},

plugins: [

new ExtractTextWebpackPlugin("css/index.css"),
]

處理圖片路徑問題

const PUBLIC_PATH="/";

output: {

path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
publicPath:PUBLIC_PATH
},
// 指定打包后的圖片位置

use: [

{
 loader: "url-loader",
 options: {
   limit: 1024,
  outputPath:"images/"
 }
}
],

在HTML中使用圖片

npm i html-withimg-loader -D

{

test:/.(html|html)$/,

use:"html-withimg-loader",

include:path.join(__dirname,"./src"),

exclude:/node_modules/
}

編譯less 和 sass

npm i less less-loader -D
npm i node-saas sass-loader -D
@color:orange;
.less-container{

border:1px solid @color;
}

$color:green;
.sass-container{

border:1px solid $color;
}
const cssExtract=new ExtractTextWebpackPlugin("css.css");
const lessExtract=new ExtractTextWebpackPlugin("less.css");
const sassExtract=new ExtractTextWebpackPlugin("sass.css");

        {

            test:/.less$/,
            use: lessExtract.extract({
                use:["css-loader","less-loader"]
            }),
            include:path.join(__dirname,"./src"),
            exclude:/node_modules/
        },
        {
            test:/.scss$/,
            use: sassExtract.extract({
                use:["css-loader","sass-loader"]
            }),
            include:path.join(__dirname,"./src"),
            exclude:/node_modules/
        },

處理CSS3屬性前綴

為了瀏覽器的兼容性，有時候我們必須加入-webkit,-ms,-o,-moz這些前綴

Trident內核：主要代表為IE瀏覽器, 前綴為-ms
Gecko內核：主要代表為Firefox, 前綴為-moz
Presto內核：主要代表為Opera, 前綴為-o
Webkit內核：產要代表為Chrome和Safari, 前綴為-webkit

npm i postcss-loader autoprefixer -D
postcss-loader

postcss.config.js

module.exports={

plugins:[require("autoprefixer")]
}
.circle {

transform: translateX(100px);

{

            test:/.css$/,
            use: cssExtract.extract({
use:["css-loader","postcss-loader"]

}),
include:path.join(__dirname,"./src"),
exclude:/node_modules/
},
}

轉義ES6/ES7/JSX

Babel其實是一個編譯JavaScript的平臺,可以把ES6/ES7,React的JSX轉義為ES5

npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-react -D
    {

    test:/.jsx?$/,
    use: {
        loader: "babel-loader",
        options: {
            presets: ["env","stage-0","react"]
        }
    },
    include:path.join(__dirname,"./src"),
    exclude:/node_modules/
    },

webapck通過配置可以自動給我們source maps文件，map文件是一種對應編譯文件和源文件的方法

source-map 把映射文件生成到多帶帶的文件，最完整最慢
cheap-module-source-map 在一個多帶帶的文件中產生一個不帶列映射的Map
eval-source-map 使用eval打包源文件模塊,在同一個文件中生成完整sourcemap
cheap-module-eval-source-map sourcemap和打包后的JS同行顯示，沒有映射列
devtool:"eval-source-map"

拷貝靜態文件

有時項目中沒有引用的文件也需要打包到目標目錄

npm i copy-webpack-plugin -D
new CopyWebpackPlugin([{

        from: path.join(__dirname,"public"),//靜態資源目錄源地址
        to:"./public" //目標地址，相對于output的path目錄
    }]),

打包前先清空輸出目錄

npm i clean-webpack-plugin -D
new cleanWebpaclPlugin(path.join(__dirname,"dist"))

壓縮CSS

webpack可以消除未使用的CSS

npm i -D purifycss-webpack purify-css glob
new PurifyCSSPlugin({//purifycss根據這個路徑配置遍歷你的HTML文件，查找你使用的CSS
paths:require("glob").sync(path.join(__dirname,"src/*.html"))
}),

resolve解析

指定extension之后可以不用在require或是import的時候加文件擴展名,會依次嘗試添加擴展名進行匹配

resolve: {

//自動補全后綴，注意第一個必須是空字符串,后綴一定以點開頭
extensions: [" ",".js",".css",".json"],
},

配置別名可以加快webpack查找模塊的速度

每當引入jquery模塊的時候，它會直接引入jqueryPath,而不需要從node_modules文件夾中按模塊的查找規則查找
不需要webpack去解析jquery.js文件

const bootstrap=path.join(__dirname,"node_modules/bootstrap/dist/css/bootstrap.css")
resolve: {

alias: {

"bootstrap": bootstrap

}
},

區分環境變量

許多 library 將通過與 process.env.NODE_ENV 環境變量關聯，以決定 library 中應該引用哪些內容。例如，當不處于生產環境中時，某些 library 為了使調試變得容易，可能會添加額外的日志記錄(log)和測試(test)。其實，當使用 process.env.NODE_ENV === "production" 時，一些 library 可能針對具體用戶的環境進行代碼優化，從而刪除或添加一些重要代碼。我們可以使用 webpack 內置的 DefinePlugin 為所有的依賴定義這個變量：

npm install cross-env -D
"scripts": {

"build": "cross-env NODE_ENV=production webpack --mode development",

"dev": "webpack-dev-server --open --mode development "
},
plugins: [

new webpack.DefinePlugin({

NODE_ENV:JSON.stringify(process.env.NODE_ENV)

}),

if (process.env.NODE_ENV == "development") {

console.log("這是開發環境");
} else {

console.log("這是生產環境");
}

作者：正兒八經的嬌嬌
鏈接：https://juejin.im/post/5af8fa806fb9a07ac162876d
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處