webpack基礎 | 8月更文挑戰

這是我參與8月更文挑戰的第4天，活動詳情查看：8月更文挑戰

簡介

官網：nodejs.org/en/

Webpack是一個JavaScript應用程序的靜態模塊打包器（module bundler）,當webpack處理應用程序時，它會遞歸的構建一個依賴關係圖，當包含的應用程序須要的每一個模塊，而後將全部這些模塊打包成一個bundle.js或者多個。webpack是一個模塊化打包工具，他會從入口模塊出發，識別出源碼鐘模塊化導入的語句，並找出入口文件中全部依賴，最後打包到一個單獨的文件中。

環境搭建

// 安裝方式
npm init -y// 初始化npm配置⽂件npm install --save-dev webpack // 安裝核⼼庫npm install --save-dev webpack-cli // 安裝命令⾏⼯具// 安裝最新的4.x穩定版本
npm i -D webpack@4.44.0
// 安裝指定版本
npm i -D webpack@
// 安裝webpack V4+版本時，須要額外安裝webpack-cli
npm install webpack webpack-cli -g
// 檢查版本
webpack -v
// 卸載
npm uninstall webpack webpack-cli -g
複製代碼

注：不推薦全局安裝，由於全局安裝，會把項目中的webpack指定一個固定版本，會影響其餘項目的使用，衝突構建失敗

實際運用

一、建立index.js
const json = require("./index.json");//commonJS
import { add } from "./other.js";//es module
console.log(json, add(2, 3));
二、建立index.json
{
 "name": "JOSN"
}
三、建立other.js
export function add(n1, n2) {
 return n1 + n2;
}
四、執行構建
npm run test
五、修改package.json文件
"scripts": {
 "test": "webpack"
},
//注：原理就是經過shell腳本在node_modules/.bin⽬錄下建立⼀個軟連接。
六、構建成功後會多出⼀個dist⽬錄，裏面有一個main.js，這個文件是一個可執行的js文件，包含webpackBootstrao啓動函數等
七、默認配置
const path = require("path");
module.exports = {
     // 必填 webpack執⾏構建⼊⼝
     entry: "./src/index.js",
     output: {
         // 將全部依賴的模塊合併輸出到main.js
         filename: "main.js",
         // 輸出⽂件的存放路徑，必須是絕對路徑
         path: path.resolve(__dirname, "./dist")
     }
};
複製代碼

webpack配置概念

//總體配置
module.exports = {
     entry: "./src/index.js", //打包⼊⼝⽂件
     output: "./dist", //輸出結構
     mode: "production", //打包環境，production、development、nonee能夠⾃動觸發webpack內置的函數，達到優化的效果
     module: {
         rules: [//loader模塊處理
             {
                 test: /\.css$/,
                 use: "style-loader"
             }
         ]
     },
     plugins: [new HtmlWebpackPlugin()] //插件配置
};
//mode:開發階段的開啓會有利於熱更新的處理，識別哪一個模塊變化、⽣產階段的開啓會有幫助模塊壓縮，處理副做⽤等⼀些功能
複製代碼

chunk: 一個chunk由多個模塊組合而成，也用於代碼合併和分割

bundle：編譯後生成的核心打包文件。

entry：指定打包的入口文件，用來告訴webpack用哪一個文件做爲構建依賴的起點，每一個依賴都會被它遞歸處理，最終輸出到打包結果中。

//單⼊⼝ SPA，本質是個字符串
entry:{
 main: './src/index.js'
}
//支持簡寫
entry:"./src/index.js"
//多⼊⼝ entry是個對象
entry:{
 index:"./src/index.js",
 login:"./src/login.js"
}
複製代碼

output：配置描述了webpack打包的輸出配置，包含輸出文件名配置，位置等

output: {
     filename: "bundle.js",//輸出⽂件的名稱
     path: path.resolve(__dirname, "dist")//輸出⽂件到磁盤的⽬錄，必須是絕對路徑
},
//多⼊⼝的處理
output: {
     filename: "[name][chunkhash:8].js",//利⽤佔位符，⽂件名稱不要重複
     path: path.resolve(__dirname, "dist")//輸出⽂件到磁盤的⽬錄，必須是絕對路徑
},
複製代碼

loder：模塊解析，經過loader解析更多類型的文件，把模塊原內容按照需求轉換成新內容

//經常使用loader
style-loader、css-loader、less-loader、sass-loader、ts-loader //將Ts轉換成js、
babel-loader//轉換ES六、7等js新特性語法
file-loader//處理圖⽚⼦圖
eslint-loader
……
複製代碼

plugin：控制構建流程，從而執行一些特殊任務，⽤於整個構建過程。

        htmlwebpackplugin會在打包結束後，⾃動⽣成⼀個html⽂件，並把打包⽣成的js模塊引⼊到該html 中。 

npm install --save-dev html-webpack-plugin

        clean-webpack-plugin

cleanOnceBeforeBuildPatterns: ["/*", "!dll", "!dll/"],
！感嘆號至關於exclude 排除，意思是清空操做排除dll⽬錄，和dll⽬錄下全部⽂件。
注意：數組列表⾥的「*/」是默認值，不可忽略，不然不作清空操做。
複製代碼

        ……

注：從4.0開始webpack支持零配置，雖然是這樣，仍是要本身配置，同時加入mode的概念，用於指定打包的目標環境，以便在打包的過程當中啓用webpack針對不一樣的環境下內置的優化。

最後交一個腦圖