Vue學(xué)習(xí):webpack

Webpack

在網(wǎng)頁(yè)中會(huì)引用哪些常見(jiàn)的靜態(tài)資源？

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

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

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

如何解決上述兩個(gè)問(wèn)題

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

什么是webpack?

webpack 是前端的一個(gè)項(xiàng)目構(gòu)建工具，它是基于 Node.js 開(kāi)發(fā)出來(lái)的一個(gè)前端工具；

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

  1. 使用Gulp， 是基于 task 任務(wù)的；
  2. 使用Webpack， 是基于整個(gè)項(xiàng)目進(jìn)行構(gòu)建的；
  • 借助于webpack這個(gè)前端自動(dòng)化構(gòu)建工具，可以完美實(shí)現(xiàn)資源的合并、打包、壓縮、混淆等諸多功能。
  • 根據(jù)官網(wǎng)的圖片介紹webpack打包的過(guò)程
  • webpack官網(wǎng)

webpack安裝的兩種方式

  1. 運(yùn)行npm i webpack -g全局安裝webpack，這樣就能在全局使用webpack的命令
  2. 在項(xiàng)目根目錄中運(yùn)行npm i webpack --save-dev安裝到項(xiàng)目依賴中

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

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

    // 設(shè)置偶數(shù)行背景色，索引從0開(kāi)始，0是偶數(shù)
    $('#list li:even').css('backgroundColor','lightblue');
    // 設(shè)置奇數(shù)行背景色
    $('#list li:odd').css('backgroundColor','pink');
  1. 直接在頁(yè)面上引用main.js會(huì)報(bào)錯(cuò)，因?yàn)闉g覽器不認(rèn)識(shí)import這種高級(jí)的JS語(yǔ)法，需要使用webpack進(jìn)行處理，webpack默認(rèn)會(huì)把這種高級(jí)的語(yǔ)法轉(zhuǎn)換為低級(jí)的瀏覽器能識(shí)別的語(yǔ)法；
  2. 運(yùn)行webpack 入口文件路徑 輸出文件路徑對(duì)main.js進(jìn)行處理：
webpack src/js/main.js dist/bundle.js

使用webpack的配置文件簡(jiǎn)化打包時(shí)候的命令

  1. 在項(xiàng)目根目錄中創(chuàng)建webpack.config.js
  2. 由于運(yùn)行webpack命令的時(shí)候，webpack需要指定入口文件和輸出文件的路徑，所以，我們需要在webpack.config.js中配置這兩個(gè)路徑：
    // 導(dǎo)入處理路徑的模塊
    var path = require('path');

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

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

  1. 由于每次重新修改代碼之后，都需要手動(dòng)運(yùn)行webpack打包的命令，比較麻煩，所以使用webpack-dev-server來(lái)實(shí)現(xiàn)代碼實(shí)時(shí)打包編譯，當(dāng)修改代碼之后，會(huì)自動(dòng)進(jìn)行打包構(gòu)建。
  2. 運(yùn)行cnpm i webpack-dev-server --save-dev安裝到開(kāi)發(fā)依賴
  3. 安裝完成之后，在命令行直接運(yùn)行webpack-dev-server來(lái)進(jìn)行打包，發(fā)現(xiàn)報(bào)錯(cuò)，此時(shí)需要借助于package.json文件中的指令，來(lái)進(jìn)行運(yùn)行webpack-dev-server命令，在scripts節(jié)點(diǎn)下新增"dev": "webpack-dev-server"指令，發(fā)現(xiàn)可以進(jìn)行實(shí)時(shí)打包，但是dist目錄下并沒(méi)有生成bundle.js文件，這是因?yàn)?code>webpack-dev-server將打包好的文件放在了內(nèi)存中
  • 把bundle.js放在內(nèi)存中的好處是：由于需要實(shí)時(shí)打包編譯，所以放在內(nèi)存中速度會(huì)非?？?/li>
  • 這個(gè)時(shí)候訪問(wèn)webpack-dev-server啟動(dòng)的http://localhost:8080/網(wǎng)站，發(fā)現(xiàn)是一個(gè)文件夾的面板，需要點(diǎn)擊到src目錄下，才能打開(kāi)我們的index首頁(yè)，此時(shí)引用不到bundle.js文件，需要修改index.html中script的src屬性為:<script src="../bundle.js"></script>
  • 為了能在訪問(wèn)http://localhost:8080/的時(shí)候直接訪問(wèn)到index首頁(yè)，可以使用--contentBase src指令來(lái)修改dev指令，指定啟動(dòng)的根目錄：
"dev": "webpack-dev-server --contentBase src"

同時(shí)修改index頁(yè)面中script的src屬性為<script src="bundle.js"></script>

使用html-webpack-plugin插件配置啟動(dòng)頁(yè)面

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

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

    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 項(xiàng)目入口文件
        output: { // 配置輸出選項(xiàng)
            path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
            filename: 'bundle.js' // 配置輸出的文件名
        },
        plugins:[ // 添加plugins節(jié)點(diǎn)配置插件
            new htmlWebpackPlugin({
                template:path.resolve(__dirname, 'src/index.html'),//模板路徑
                filename:'index.html'//自動(dòng)生成的HTML文件的名稱
            })
        ]
    }
  1. 修改package.json中script節(jié)點(diǎn)中的dev指令如下：
"dev": "webpack-dev-server"
  1. 將index.html中script標(biāo)簽注釋掉，因?yàn)?code>html-webpack-plugin插件會(huì)自動(dòng)把bundle.js注入到index.html頁(yè)面中！

實(shí)現(xiàn)自動(dòng)打開(kāi)瀏覽器、熱更新和配置瀏覽器的默認(rèn)端口號(hào)

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

方式1：

  • 修改package.json的script節(jié)點(diǎn)如下，其中--open表示自動(dòng)打開(kāi)瀏覽器，--port 4321表示打開(kāi)的端口號(hào)為4321，--hot表示啟用瀏覽器熱更新：
"dev": "webpack-dev-server --hot --port 4321 --open"

方式2：

  1. 修改webpack.config.js文件，新增devServer節(jié)點(diǎn)如下：
devServer:{
        hot:true,
        open:true,
        port:4321
    }
  1. 在頭部引入webpack模塊：
var webpack = require('webpack');
  1. 在plugins節(jié)點(diǎn)下新增：
new webpack.HotModuleReplacementPlugin()

使用webpack打包c(diǎn)ss文件

  1. 運(yùn)行cnpm i style-loader css-loader --save-dev
  2. 修改webpack.config.js這個(gè)配置文件：
module: { // 用來(lái)配置第三方loader模塊的
        rules: [ // 文件的匹配規(guī)則
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//處理css文件的規(guī)則
        ]
    }
  1. 注意：use表示使用哪些模塊來(lái)處理test所匹配到的文件；use中相關(guān)loader模塊的調(diào)用順序是從后向前調(diào)用的；

使用webpack打包less文件

  1. 運(yùn)行cnpm i less-loader less -D
  2. 修改webpack.config.js這個(gè)配置文件：
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

使用webpack打包sass文件

  1. 運(yùn)行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中的路徑

  1. 運(yùn)行cnpm i url-loader file-loader --save-dev
  2. 在webpack.config.js中添加處理url路徑的loader模塊：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }
  1. 可以通過(guò)limit指定進(jìn)行base64編碼的圖片大小；只有小于指定字節(jié)（byte）的圖片才會(huì)進(jìn)行base64編碼：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

使用babel處理高級(jí)JS語(yǔ)法

  1. 運(yùn)行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安裝babel的相關(guān)loader包
  2. 運(yùn)行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安裝babel轉(zhuǎn)換的語(yǔ)法
  3. 在webpack.config.js中添加相關(guān)loader模塊，其中需要注意的是，一定要把node_modules文件夾添加到排除項(xiàng)：
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
  1. 在項(xiàng)目根目錄中添加.babelrc文件，并修改這個(gè)配置文件如下：
{
    "presets":["es2015", "stage-0"],
    "plugins":["transform-runtime"]
}
  1. 注意：語(yǔ)法插件babel-preset-es2015可以更新為babel-preset-env，它包含了所有的ES相關(guān)的語(yǔ)法；

相關(guān)文章

babel-preset-env：你需要的唯一Babel插件
Runtime transform 運(yùn)行時(shí)編譯es6

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

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

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