玩轉(zhuǎn)Vue_Webpack

在網(wǎng)頁中會引用哪些常見的靜態(tài)資源？?

  • JS
  • .js .jsx .coffee .ts（TypeScript 類 C# 語言）
  • CSS
  • .css .less .sass .scss
  • Images
  • .jpg .png .gif .bmp .svg
  • 字體文件（Fonts）
  • .svg .ttf .eot .woff .woff2
  • 模板文件
  • .ejs .jade .vue【這是在webpack中定義組件的方式，推薦這么用】

網(wǎng)頁中引入的靜態(tài)資源多了以后有什么問題？？？

  1. 網(wǎng)頁加載速度慢， 因為 我們要發(fā)起很多的二次請求；
  2. 要處理錯綜復(fù)雜的依賴關(guān)系

如何解決上述兩個問題

  1. 合并、壓縮、精靈圖、圖片的Base64編碼
  2. 使用requireJS、也可以使用webpack可以解決各個包之間的復(fù)雜依賴關(guān)系；

什么是webpack?

webpack 是前端的一個項目構(gòu)建工具，它是基于 Node.js 開發(fā)出來的一個前端工具；安裝Node

如何完美實現(xiàn)上述的2種解決方案

  1. 使用Gulp， 是基于 task 任務(wù)的；

  2. 使用Webpack， 是基于整個項目進行構(gòu)建的；

  • 借助于webpack這個前端自動化構(gòu)建工具，可以完美實現(xiàn)資源的合并、打包、壓縮、混淆等諸多功能。

  • 根據(jù)官網(wǎng)的圖片介紹webpack打包的過程

  • webpack官網(wǎng)

webpack安裝的兩種方式

  1. 運行cnpm i webpack -g全局安裝webpack，這樣就能在全局使用webpack的命令
  2. 在項目根目錄中運行cnpm i webpack --save-dev安裝到項目依賴中

初步使用webpack打包構(gòu)建列表隔行變色案例

  1. 運行cnpm init初始化項目，使用cnpm管理項目中的依賴包
  2. 創(chuàng)建項目基本的目錄結(jié)構(gòu)
  3. 使用cnpm i jquery --save安裝jquery類庫
  4. 創(chuàng)建main.js并書寫各行變色的代碼邏輯：
// 導(dǎo)入jquery類庫
import $ from 'jquery'

// 設(shè)置偶數(shù)行背景色，索引從0開始，0是偶數(shù)
$('#list li:even').css('backgroundColor', 'lightblue');
// 設(shè)置奇數(shù)行背景色
$('#list li:odd').css('backgroundColor', 'pink');

5.直接在頁面上引用main.js會報錯，因為瀏覽器不認識import這種高級的JS語法，需要使用webpack進行處理，webpack默認會把這種高級的語法轉(zhuǎn)換為低級的瀏覽器能識別的語法；
6.運行webpack 入口文件路徑 輸出文件路徑對main.js進行處理：

webpack src/js/main.js -o dist/bundle.js

7.項目結(jié)構(gòu)


image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul id="list">
        <li>這是第1個li</li>
        <li>這是第2個li</li>
        <li>這是第3個li</li>
        <li>這是第4個li</li>
        <li>這是第5個li</li>
        <li>這是第6個li</li>
        <li>這是第7個li</li>
        <li>這是第8個li</li>
        <li>這是第9個li</li>
        <li>這是第10個li</li>
    </ul>
    <script src="../dist/bundle.js"></script>
</body>
</html>

瀏覽器打開頁面看到帶有顏色的li
缺點：每次修改main.js需要重新打包

使用webpack的配置文件簡化打包時候的命令

1.在項目根目錄中創(chuàng)建webpack.config.js
2.由于運行webpack命令的時候，webpack需要指定入口文件和輸出文件的路徑，所以，我們需要在webpack.config.js中配置這兩個路徑：

// 導(dǎo)入處理路徑的模塊
var path = require('path');

// 導(dǎo)出一個配置對象，將來webpack在啟動的時候，會默認來查找webpack.config.js，并讀取這個文件中導(dǎo)出的配置對象，來進行打包處理
module.exports = {
    entry: path.resolve(__dirname, 'src/js/main.js'), // 項目入口文件
    output: { // 配置輸出選項
        path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
        filename: 'bundle.js' // 配置輸出的文件名
    }
}

這樣每次需要重新打包時，只需要執(zhí)行webpack命令即可
缺點 ： 打包不是自動的，依然需要執(zhí)行命令

實現(xiàn)webpack的實時打包構(gòu)建

  1. 由于每次重新修改代碼之后，都需要手動運行webpack打包的命令，比較麻煩，所以使用webpack-dev-server來實現(xiàn)代碼實時打包編譯，當(dāng)修改代碼之后，會自動進行打包構(gòu)建。

  2. 運行cnpm i webpack-dev-server --save-dev安裝到開發(fā)依賴

  3. 安裝完成之后，在命令行直接運行webpack-dev-server來進行打包，發(fā)現(xiàn)報錯，此時需要借助于package.json文件中的指令，來進行運行webpack-dev-server命令，在scripts節(jié)點下新增"dev": "webpack-dev-server"指令

4.執(zhí)行命令cnpm i webpack-cli --save-dev安裝腳手架工具，之后執(zhí)行cnpm run dev執(zhí)行腳本命令，發(fā)現(xiàn)可以進行實時打包，但是dist目錄下并沒有生成bundle.js文件，這是因為webpack-dev-server將打包好的文件放在了內(nèi)存中

  • 把bundle.js放在內(nèi)存中的好處是：由于需要實時打包編譯，所以放在內(nèi)存中速度會非?？?/li>
  • 這個時候訪問webpack-dev-server啟動的http://localhost:8080/網(wǎng)站，發(fā)現(xiàn)是一個文件夾的面板，需要點擊到src目錄下，才能打開我們的index首頁，此時引用不到bundle.js文件，需要修改index.html中script的src屬性為:<script src="../bundle.js"></script>
  • 為了能在訪問http://localhost:8080/的時候直接訪問到index首頁，可以使用--contentBase src指令來修改dev指令，指定啟動的根目錄：
"dev": "webpack-dev-server --contentBase src"

同時修改index頁面中script的src屬性為<script src="bundle.js"></script>

使用html-webpack-plugin插件配置啟動頁面

由于使用--contentBase指令的過程比較繁瑣，需要指定啟動的目錄，同時還需要修改index.html中script標簽的src屬性，所以推薦大家使用html-webpack-plugin插件配置啟動頁面.

  1. 運行cnpm i html-webpack-plugin --save-dev安裝到開發(fā)依賴
  2. 修改webpack.config.js配置文件如下：
// 導(dǎo)入處理路徑的模塊
var path = require('path');
// 導(dǎo)入自動生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');

// 導(dǎo)出一個配置對象，將來webpack在啟動的時候，會默認來查找webpack.config.js，并讀取這個文件中導(dǎo)出的配置對象，來進行打包處理
module.exports = {
    entry: path.resolve(__dirname, 'src/main.js'), // 項目入口文件
    output: { // 配置輸出選項
        path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
        filename: 'bundle.js' // 配置輸出的文件名
    },
    plugins:[ // 添加plugins節(jié)點配置插件
        new htmlWebpackPlugin({
            template:path.resolve(__dirname, 'src/index.html'),//模板路徑
            filename:'index.html'//自動生成的HTML文件的名稱
        })
    ]
}

3.修改package.json中script節(jié)點中的dev指令如下：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  }

4.將index.html中script標簽注釋掉，因為html-webpack-plugin插件會自動把bundle.js注入到index.html頁面中！

實現(xiàn)自動打開瀏覽器、熱更新和配置瀏覽器的默認端口號

注意：熱更新在JS中表現(xiàn)的不明顯，可以從一會兒要講到的CSS身上進行介紹說明

方式1：

修改package.json的script節(jié)點如下，其中--open表示自動打開瀏覽器，--port 4321表示打開的端口號為4321，--hot表示啟用瀏覽器熱更新：

"dev": "webpack-dev-server --hot --port 9999 --open"

方式2：

1.修改webpack.config.js文件，新增devServer節(jié)點如下：

devServer:{
    hot:true,
    open:true,
    port:4321
}

2.在頭部引入webpack模塊：

var webpack = require('webpack');

3.在plugins節(jié)點下新增：

new webpack.HotModuleReplacementPlugin()

使用webpack打包css文件

1.運行cnpm i style-loader css-loader --save-dev
2.修改webpack.config.js這個配置文件：

    module: { // 用來配置第三方loader模塊的
        rules: [ // 文件的匹配規(guī)則
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//處理css文件的規(guī)則
        ]
    }

3.注意：use表示使用哪些模塊來處理test所匹配到的文件；use中相關(guān)loader模塊的調(diào)用順序是從后向前調(diào)用的；

使用webpack打包less文件

1.運行cnpm i less-loader less --save-dev
2.在webpack.config.js中修改

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

使用webpack打包sass文件

1.運行cnpm i sass-loader node-sass --save-dev
2.在webpack.config.js中添加處理sass文件的loader模塊：

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

使用webpack處理css中的路徑

默認情況下，webpack不能處理css文件中的url地址，包括字體庫，只要是url都處理不了
1.運行cnpm i url-loader file-loader --save-dev
2.在webpack.config.js中添加處理url路徑的loader模塊：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }

3.可以通過limit指定進行base64編碼的圖片大小；只有小于指定字節(jié)（byte）的圖片才會進行base64編碼：
圖片名字會自動重命名，防止重名，如果想保持原名需要加另一個參數(shù)name，

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960&name=[hash:8]-[name].[ext]' },

使用babel處理高級JS語法

  1. 運行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安裝babel的相關(guān)loader包
  2. 運行cnpm i babel-preset-env babel-preset-stage-0 --save-dev安裝babel轉(zhuǎn)換的語法
  3. 在webpack.config.js中添加相關(guān)loader模塊，其中需要注意的是，一定要把node_modules文件夾添加到排除項：
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

4.在項目根目錄中添加.babelrc文件，并修改這個配置文件如下：

{
    "presets":["env", "stage-0"],
    "plugins":["transform-runtime"]
}

5.注意：語法插件babel-preset-es2015可以更新為babel-preset-env，它包含了所有的ES相關(guān)的語法；

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容