從0搭建本身的webpack開發環境（一）

上期文章：前端自動化測試

又一個連載來啦！此次咱們將分四篇文章來介紹如何從0構建一個webpack開發環境，瞭解其內部機制和原理，從而讓咱們更準確的掌握和使用webpack，下面開始咱們的起步：

1.什麼是Webpack?

webpack是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)，當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle

使用Webpack做爲前端構建工具：

• 代碼轉換：TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS 等；
• 文件優化：壓縮 JavaScript、CSS、HTML 代碼，壓縮合並圖片等；
• 代碼分割：提取多個頁面的公共代碼、提取首屏不須要執行部分的代碼讓其異步加載；
• 模塊合併：在採用模塊化的項目裏會有不少個模塊和文件，須要構建功能把模塊分類合併成一個文件；
• 自動刷新：監聽本地源代碼的變化，自動從新構建、刷新瀏覽器；
• 代碼校驗：在代碼被提交到倉庫前須要校驗代碼是否符合規範，以及單元測試是否經過；
• 自動發佈：更新完代碼後，自動構建出線上發佈代碼並傳輸給發佈系統。

在webpack應用中有兩個核心:

• 1. 模塊轉換器，用於把模塊原內容按照需求轉換成新內容，能夠加載非 JS 模塊；
• 2. 擴展插件，在 Webpack 構建流程中的特定時機注入擴展邏輯來改變構建結果或作你想要的事情。

2.初始化項目

├── src   # 源碼目錄
│   ├── a-module.js
│   └── index.js
複製代碼

編寫 a-module.js

module.exports = 'hello';
複製代碼

編寫 index.js

let a = require('./a-module');
console.log(a);
複製代碼

這裏咱們使用CommonJS模塊的方式引入，這種方式默認在瀏覽器上是沒法運行的，咱們但願經過 webpack 來進行打包！

3.webpack快速上手

3.1 安裝

npm init -y
npm install webpack webpack-cli --save-dev
複製代碼

webpack默認支持0配置，配置scripts腳本

"scripts": {
  "build": "webpack"
}
複製代碼

執行npm run build，默認會調用 node_modules/.bin下的webpack命令，內部會調用webpack-cli解析用戶參數進行打包。默認會以 src/index.js 做爲入口文件。

這裏也可使用npx webpack，npx 是 5.2版本以後npm提供的命令能夠執行.bin下的可執行文件

咱們發現已經產生了dist目錄，此目錄爲最終打包出的結果。main.js能夠在html中直接引用，這裏還提示咱們默認mode 爲production。

3.2 webpack.config.js

咱們打包時通常不會採用0配置，webpack在打包時默認會查找當前目錄下的 webpack.config.js or webpackfile.js 文件。

經過配置文件進行打包：

const path = require('path');
module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'bundle.js', 
        // 打包出的結果文件
        path:path.resolve(__dirname,'dist')// 打包到dist目錄下
    }
}
複製代碼

3.3 配置打包的mode

咱們須要在打包時提供mode屬性來區分是開發環境仍是生產環境，來實現配置文件的拆分。

├── build
│   ├── webpack.base.js
│   ├── webpack.dev.js
│   └── webpack.prod.js
複製代碼

咱們能夠經過指定不一樣的文件來進行打包

配置scripts腳本：

"scripts": {
  "build": "webpack --config ./build/webpack.prod",
  "dev": "webpack --config ./build/webpack.dev"
}
複製代碼

能夠經過 config 參數指定，使用哪一個配置文件來進行打包。

經過env參數區分

"scripts": {
    "build": "webpack --env.production --config ./build/webpack.base",
    "dev": "webpack --env.development --config ./build/webpack.base"
}
複製代碼

改造webpack.base文件默認導出函數，會將環境變量傳入到函數的參數中。

module.exports = (env)=>{
    console.log(env); // { development: true }
}
複製代碼

合併配置文件

咱們能夠判斷當前環境是不是開發環境來加載不一樣的配置，這裏咱們須要作配置合併 安裝webpack-merge:

npm install webpack-merge --save-dev
複製代碼

webpack.dev配置

module.exports = {
    mode:'development'
}
複製代碼

webpack.prod配置

module.exports = {
    mode:'production'
}
複製代碼

webpack.base配置

const path = require('path');
const merge = require('webpack-merge');
// 開發環境
const dev = require('./webpack.dev');
// 生產環境
const prod = require('./webpack.prod');
const base = { 
    // 基礎配置
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'../dist')
    }
}
module.exports = (env) =>{
    if(env.development){
        return merge(base,dev);
    }else{
        return merge(base,prod);
    }
}
複製代碼

後續開發中，咱們會將公共的邏輯放到base中，開發和生產中的配置也分別進行存放！

4.webpack-dev-server

配置開發服務器，能夠在實如今內存中打包，而且自動啓動服務。

npm install webpack-dev-server --save-dev
複製代碼

"scripts": {
    "build": "webpack --env.production --config ./build/webpack.base",
    "dev": "webpack-dev-server --env.development --config ./build/webpack.base"
}
複製代碼

經過執行npm run dev來啓啓動開發環境：

默認會在當前根目錄下啓動服務

配置開發服務的配置

const path = require('path')
module.exports = {
    mode:'development',
    devServer:{
        // 更改靜態文件目錄位置
        contentBase:path.resolve(__dirname,'../dist'),
        compress:true, // 開啓gzip
        port:3000, // 更改端口號
    }
}
複製代碼

5.打包Html插件

5.1 單入口打包

自動產生html，而且引入打包後的文件

編輯webpack.base文件

const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
    new HtmlWebpackPlugin({
        filename:'index.html', // 打包出來的文件名
        template:path.resolve(__dirname,'../public/index.html'),
        hash:true, // 在引用資源的後面增長hash戳
        minify:{
            removeAttributeQuotes:true // 刪除屬性雙引號
        }
    })
]
複製代碼

5.2 多入口打包

根據不一樣入口生成多個js文件，引入到不一樣html中：

── src
    ├── entry-1.js
    └── entry-2.js
複製代碼

多入口須要配置多個entry

entry:{
    jquery:['jquery'], // 打包jquery
    entry1:path.resolve(__dirname,'../src/entry-1.js'),
    entry2:path.resolve(__dirname,'../src/entry-2.js')
},
output:{
    filename:'[name].js',
    path:path.resolve(__dirname,'../dist')
},
複製代碼

產生多個html文件

new HtmlWebpackPlugin({
    filename:'index.html',
    template:path.resolve(__dirname,'../public/template.html'),
    hash:true,
    minify:{
        removeAttributeQuotes:true
    },
    chunks:['jquery','entry1'], // 引入的chunk 有jquery,entry
}),
new HtmlWebpackPlugin({
    filename:'login.html',
    template:path.resolve(__dirname,'../public/template.html'),
    hash:true,
    minify:{
        removeAttributeQuotes:true
    },
    inject:false, // inject 爲false表示不注入js文件
    chunksSortMode:'manual', // 手動配置代碼塊順序
    chunks:['entry2','jquery']
})
複製代碼

以上的方式不是很優雅，每次都須要手動添加HtmlPlugin應該動態產生html文件，像這樣:

let htmlPlugins = [
  {
    entry: "entry1",
    html: "index.html"
  },
  {
    entry: "entry2",
    html: "login.html"
  }
].map(
  item =>
    new HtmlWebpackPlugin({
      filename: item.html,
      template: path.resolve(__dirname, "../public/template.html"),
      hash: true,
      minify: {
        removeAttributeQuotes: true
      },
      chunks: ["jquery", item.entry]
    })
);
plugins: [...htmlPlugins]
複製代碼

6.清空打包結果

可使用clean-webpack-plugin手動清除某個文件夾內容:

安裝

npm install --save-dev clean-webpack-plugin
複製代碼

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
new CleanWebpackPlugin({
    // 清空匹配的路徑
    cleanOnceBeforeBuildPatterns: [path.resolve('xxxx/*'),'**/*'],
})
複製代碼

這樣就能夠清空指定的目錄了，咱們能夠看到webpack插件的基本用法就是 new Plugin而且放到plugins中。

7.小結

如今是否是對webpack的使用有了初步印象或更多的想法了呢？大神們的大刀是否是快要按捺不住了呢？下期介紹webpack不得不會的各類配置，敬請期待！

---