webpack

一、當前 Web 開發面臨的困境

• 文件依賴關系錯綜復雜
• 靜態資源請求效率低
• 模塊化支持不友好
• 瀏覽器對高級 Javascript 特性兼容程度較低
• etc…

二、webpack 概述

webpack 是一個流行的前端項目構建工具（打包工具），可以解決當前 web 開發中所面臨的困境。 webpack 提供了友好的模塊化支持，以及代碼壓縮混淆、處理 js 兼容問題、性能優化等強大的功能，從而讓程序員把 工作的重心放到具體的功能實現上，提高了開發效率和項目的可維護性。

目前絕大多數企業中的前端項目，都是基于 webpack 進行打包構建的。

三、安裝webpack

1. 打開項目目錄終端，輸入命令:

npm install webpack webpack-cli -D

2. 然后在項目根目錄中，創建一個 webpack.config.js 的配置文件用配置webpack在 webpack.config.js 文件中編寫代碼進行webpack配置，如下：

module.exports = {
    mode:"development"//可以設置為development(開發模式)，production(發布模式)
}

補充：mode設置的是項目的編譯模式。
如果設置為development則表示項目處于開發階段，不會進行壓縮和混淆打包速度會快一些如果設置為production則表示項目處于上線發布階段，會進行壓縮和混淆打包速度會慢一些

3. 修改項目中的package.json文件添加運行腳本dev，如下：

"scripts":{
    "dev":"webpack"
}

注意：scripts節點下的腳本，可以通過 npm run 運行，如：運行終端命令：npm run dev將會啟動webpack進行項目打包

4. 運行dev命令進行項目打包，并在頁面中引入項目打包生成的js文件打開項目目錄終端，輸入命令:

npm run dev

等待webpack打包完畢之后，找到默認的dist路徑中生成的main.js文件將其引入到html頁面中。瀏覽頁面查看效果。

四、設置webpack的打包入口/出口

在webpack 4.x中，默認會將src/index.js 作為默認的打包入口js文件
默認會將dist/main.js 作為默認的打包輸出js文件
如果不想使用默認的入口/出口js文件，我們可以通過改變webpack.config.js 來設置入口/出口的js文件，如下：

const path = require("path");
module.exports = {
    mode:"development",
    //設置入口文件路徑
    entry: path.join(__dirname,"./src/xx.js"),
    //設置出口文件
    output:{
        //設置路徑
        path:path.join(__dirname,"./dist"),
        //設置文件名
        filename:"res.js"
    }
}

五、設置webpack的自動打包

默認情況下，我們更改入口js文件的代碼，需要重新運行命令打包webpack，才能生成出口的js文件
那么每次都要重新執行命令打包，這是一個非常繁瑣的事情，那么，自動打包可以解決這樣繁瑣的操作。
實現自動打包功能的步驟如下：

1.安裝自動打包功能的包:webpack-dev-server

npm install webpack-dev-server -D

2.修改package.json中的dev指令如下：

"scripts":{
    "dev":"webpack-dev-server"
}

3.將引入的js文件路徑更改為：

<script src="/bundle.js"></script>

4.運行npm run dev，進行打包

5.打開網址查看效果：

http://localhost:8080

注意：webpack-dev-server自動打包的輸出文件，默認放到了服務器的根目錄中.

補充：
在自動打包完畢之后，默認打開服務器網頁，實現方式就是打開package.json文件，修改dev命令：

"dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"

六、配置html-webpack-plugin

使用html-webpack-plugin 可以生成一個預覽頁面。
因為當我們訪問默認的 http://localhost:8080/的時候，看到的是一些文件和文件夾，想要查看我們的頁面
還需要點擊文件夾點擊文件才能查看，那么我們希望默認就能看到一個頁面，而不是看到文件夾或者目錄。
實現默認預覽頁面功能的步驟如下：

1.安裝默認預覽功能的包:html-webpack-plugin

npm install html-webpack-plugin -D

2.修改webpack.config.js文件，如下：

//導入包
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    //創建對象
    const htmlPlugin = new HtmlWebpackPlugin({
        //設置生成預覽頁面的模板文件
        template:"./src/index.html",
        //設置生成的預覽頁面名稱
        filename:"index.html"
    })

3.繼續修改webpack.config.js文件，添加plugins信息：

module.exports = {
    ......
    plugins:[ htmlPlugin ]
}
 

下一篇介紹webpack中的加載器