【點贊收藏加關注，前端技術不迷路~】

一、webpack基礎

1.核心概念

1）entry：定義入口，webpack構建的第一步

module.exports ={entry:'./src/xxx.js'
}

2）output：出口（輸出）

3）loader：模塊加載器，用戶將模塊的原內容按照需求加載成新內容

        比如文本加載器raw-loader（安裝：npm add raw-loader -d;）

在webpack中，引用 .js文件、.json文件時不需要定義加載器，是webpack內置功能。因為webpack就是為了cjs結構來打包的。因為支持cjs，所以只支持js，json。除這兩種文件，webpack不知道如何加載，需要指定加載器：webpack.config.js

module: {rules: [{ test: /\.txt$/, use:'raw-loader' }]// 指定.txt文件使用文本加載器raw-loader來打包
}

4）plugin：插件

        擴展插件，在webpack構建過程的特定時機注入擴展邏輯，用來改變或優化構建結果

        比如html出口打包插件html-webpack-plugin（安裝：npm add html-webpack-plugin -d;）

        使用插件需要引入：const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" });
],

        將src/index.html作為dist/index.html輸出文件的模板，并將打包的main.js以延遲加載defer的方式引入html；

5）mode：打包環境，通過選擇development、production或none之中的一種，來設置mode參數

        mode可以啟用webpack內置的，在相應環境下的優化，默認值是production。

6）DevServer：開發服務器

        提供了一個基本的web server，并具有live reloading(實時重新加載)功能；

                1.靜態服務比如：圖片