1.當(dāng)前項(xiàng)目存在的問(wèn)題

存在大量靜態(tài)文件不好管理，要修改一個(gè)地方的地址就要在項(xiàng)目中找哪些地方用了這個(gè)資源
包之間的引入順序沒(méi)辦法做到百分之百正確，需要很大精力去整理
沒(méi)有一個(gè)具體的流程告訴我們一個(gè)網(wǎng)頁(yè)應(yīng)該怎么架構(gòu)
文件模塊化程度不高，需要在很多地方寫(xiě)大量重復(fù)代碼
一些 ES6 的新語(yǔ)法不能夠兼容瀏覽器，在開(kāi)發(fā)中帶來(lái)不好的體驗(yàn)
網(wǎng)頁(yè)加載速度慢，會(huì)在無(wú)意中發(fā)起很多的二次請(qǐng)求，所以只請(qǐng)求一次會(huì)解決很多問(wèn)題

2. 什么是 webpack

是基于 Node.js 開(kāi)發(fā)出來(lái)的前端構(gòu)建工具
webpack 是從一個(gè)項(xiàng)目的整個(gè)生命周期出發(fā)的，因此會(huì)使我們的開(kāi)發(fā)更加規(guī)范化
webpack 會(huì)將所有錯(cuò)綜復(fù)雜的關(guān)系處理好，解決好依賴關(guān)系，并進(jìn)行合并，減少不必要的網(wǎng)絡(luò)請(qǐng)求加快頁(yè)面的啟動(dòng)

3. webpack 的使用

webpack 的安裝

可以使用以下命令進(jìn)行全局安裝

npm install webpack -g

也可以使用下面的命令進(jìn)行項(xiàng)目中的安裝

npm install webpack --save-dev

我們?cè)陂_(kāi)發(fā)的時(shí)候一般會(huì)建立以下幾個(gè)目錄
src 目錄：頁(yè)面的源代碼，一般在里面包含以下幾個(gè)文件跟目錄
- css 目錄：用于存放 css 樣式
- images 目錄：用于存放項(xiàng)目用到的圖片資源文件夾
- js 目錄：用于存放頁(yè)面的處理邏輯，工具函數(shù)等
- index.html 文件：用于作為頁(yè)面的首頁(yè)
- main.js 文件：用于寫(xiě)頁(yè)面的主要邏輯，項(xiàng)目的 js 入口文件
dist 目錄：將來(lái)開(kāi)發(fā)完成之后發(fā)布出來(lái)的文件，整個(gè)文件才是給用戶的內(nèi)容
package.json 文件：用于描述整個(gè)項(xiàng)目的文件
node_modules 目錄：用于存放項(xiàng)目中用到的包文件
package_lock.json 文件：用于存放項(xiàng)目中依賴的庫(kù)的版本的文件，之后在其他地方開(kāi)發(fā)相同的內(nèi)容的話只需要在此文件存在的目錄下敲擊 npm install 命令即可將之前項(xiàng)目中用到的包依賴進(jìn)行安裝
其實(shí)還有很多目錄沒(méi)有涉獵到，在之后的開(kāi)發(fā)中我們將會(huì)在用到的地方介紹其作用

通過(guò) npm 安裝 vue 框架

在項(xiàng)目根目錄敲擊 npm install vue 即可完成 vue 的安裝
之后將項(xiàng)目結(jié)構(gòu)構(gòu)建好即可
就按照上面所說(shuō)的目錄結(jié)構(gòu)進(jìn)行構(gòu)建

使用 webpack 的規(guī)范寫(xiě)代碼

webpack 不允許在 html 頁(yè)面中引包，所有引包，引樣式相關(guān)的操作都要 webpack 自己進(jìn)行構(gòu)建，因此不需要在 html 頁(yè)面中引入樣式文件跟腳本文件，這些我們都會(huì)在 main 函數(shù)中使用 import * from xxxx 的方式來(lái)引入
我們只需要將所有的東西都寫(xiě)在 main 文件里面即可，將來(lái)頁(yè)面構(gòu)建完成之后只需要請(qǐng)求 main 文件即可

語(yǔ)法知識(shí)點(diǎn) 1. 用 es6 的規(guī)范引入文件,es6 導(dǎo)入模塊的方式

我們可以使用 import vue from 'Vue'來(lái)引包
這非常類似于我們?cè)?node.js 中的 let path=require('path')
也就是我們用 vue 變量來(lái)接收 Vue 這個(gè)包里面的內(nèi)容
也就是我們同時(shí)進(jìn)行了變量的聲明跟賦值
之后在 vue 使用的地方我們就按正常的 vue 的使用來(lái)使用即可
我們?cè)谶@個(gè) main.js 里面寫(xiě)完代碼之后需要在 index.html 里面請(qǐng)求一下這個(gè)資源
之后只用請(qǐng)求這一次就可以了
但是我們請(qǐng)求完在瀏覽器里面一跑起來(lái)發(fā)現(xiàn)顯示瀏覽器不支持 import 語(yǔ)法
這里就到我們 webpack 出場(chǎng)了
- 我們?cè)谖覀兊捻?xiàng)目根目錄里面執(zhí)行以下命令
- webpack ./src/main.js ./dist/bundle.js
- 這條命令的作用是，全局運(yùn)行 webpack 命令，并且用它來(lái)處理 src 目錄下面的 main.js 文件，并將處理結(jié)果輸出為./dist 目錄下面的 bundle.js
- 之后我們?cè)陧?yè)面中請(qǐng)求這個(gè) bundle.js 即可實(shí)現(xiàn)我們的 es6 腳本的執(zhí)行
- 這種情況下因?yàn)闆](méi)有 webpack 的配置文件，因此我們需要在 dist 文件目錄下面自己構(gòu)建一個(gè) budle.js 文件
- 之后的文件會(huì)同級(jí)出現(xiàn)在此目錄下面
- 但是這樣就有一個(gè)很嚴(yán)重的問(wèn)題就是我們每次需要打包的時(shí)候都需要運(yùn)行webpack ./src/main.js ./dist/bundle.js來(lái)構(gòu)建文件
- 所以我們之后就學(xué)會(huì)了配置 webpack 的配置文件，這里面包含了 webpack 的常用配置文件
- 在 webpack 的 4 版本以上的版本都需要安裝 webpack-cli 才能進(jìn)行構(gòu)建，因此我們也要同時(shí)將 webpack-cli 進(jìn)行安裝
- 安裝命令為： npm install webpack-cli才能進(jìn)行后期的開(kāi)發(fā)
- 一般配置文件必須要的內(nèi)容有 entry 入口，output 出口
- output 里面還包含文件的名字 filename 屬性跟 path 屬性
- entry 對(duì)象只有 path 屬性
- 配置文件里面我們可以使用 node.js 的語(yǔ)法來(lái)構(gòu)建，也就是模塊化處理,我們直接向外暴露一個(gè)配置對(duì)象就可以了

// 請(qǐng)求path核心模塊
const path = require("path");

module.exports = {
  entry: path.join(__dirname, "./src/index.js"),
  output: {
    path: path.join(__dirname, "./dist"),
    filename: "bundle.js"
  }
};

這樣就完成了我們配置，這個(gè)配置文件的名稱叫做 webpack.config.js 在項(xiàng)目的根目錄下面
之后我們直接執(zhí)行 webpack 命令就可以了，所產(chǎn)生的文件會(huì)出現(xiàn)在我們指定的目錄下面

4. webpack dev server 的基本使用

我們要知道現(xiàn)在的項(xiàng)目中我們只要發(fā)生一次變化都要去重新執(zhí)行一次 webpack 命令
這樣做非常麻煩，所以我們非常需要一個(gè)實(shí)時(shí)檢測(cè)我們的文檔變化并只要發(fā)生變化就出發(fā)我們 webpack 命令的東西
我們需要先安裝 webpack-dev-server
可以通過(guò)這個(gè)npm install webpack-dev-server -D命令將這個(gè)依賴安裝到項(xiàng)目的開(kāi)發(fā)依賴
安裝完畢之后這個(gè)命令的用法跟 webpack 的用法一模一樣
由于我們?cè)陧?xiàng)目中本地安裝的 dev-server 因此我們不能將其作為我們的腳本命令直接用在 powershell 中
因?yàn)?dev-server 依賴 webpack，因此需要在開(kāi)發(fā)環(huán)境依賴中安裝 webpack 也就是需要在后面加上一個(gè)-D 來(lái)安裝 webpack
所以我們就要在 package 配置對(duì)象中配置我們的命令
我們可以在 script 對(duì)象中添加"dev":"webpack-dev-server --mode development"屬性，之后就會(huì)實(shí)現(xiàn)對(duì)我們的代碼的監(jiān)視
之后我們就可以啟動(dòng) npm run dev 就可以監(jiān)視了
在 webpack4 之后需要在后面加上模式選項(xiàng)才能打包
之后的打包工作都會(huì)由 webpack-dev-server 幫我們完成,需要知道的是 webpack-dev-server 生成的文件會(huì)在其打開(kāi)的本地服務(wù)器根目錄下一個(gè)叫 bundle.js 文件里面，不會(huì)直接打包到我們項(xiàng)目指定的位置，所以需要在頁(yè)面請(qǐng)求的時(shí)候注意一下需要這樣請(qǐng)求<script src="/bundle.js"></script>
dev-server 幫我們打包生成的文件并沒(méi)有存放到實(shí)際的本地物理磁盤上，而是直接托管到電腦的內(nèi)存里面了，所以在文件目錄里面找不到這個(gè)被打包的文件
我們可以認(rèn)為這個(gè) dev-server 在瀏覽器中給我們創(chuàng)建了跟 src，dist 文件同級(jí)的一個(gè)虛擬目錄，專門存放我們打包的內(nèi)容，這樣會(huì)非?？欤⑶視?huì)減少因?yàn)轭l繁保存編譯帶來(lái)的磁盤損耗

webpack-dev-server 常用的命令學(xué)習(xí)

需要傳入在 package.json 文件里面的 dev 屬性中，跟 webpack-dev-server 同級(jí)存放，只要加空格即可

打包完文件自動(dòng)打開(kāi)瀏覽器指令--open
指定端口號(hào)打開(kāi)--port 3000
打開(kāi)站點(diǎn)之后打開(kāi)指定目錄--contentBase src
使用熱重載方式打開(kāi)--hot（也就是不用每次都打包，直接在原有的基礎(chǔ)上修改，減少不必要的代碼更新，對(duì)樣式的更改甚至可以做到瀏覽器無(wú)刷新）

以上這些方式都需要在 package.json 文件里面操作，不免有點(diǎn)多了，我們有第二種配置的方式
我們可以以配置文件的形式放入到 webpack.config.js 里面
我們?cè)?webpack 的配置對(duì)象里面再加一個(gè) devServer 的屬性，這個(gè)里面就可以對(duì)我們的配置進(jìn)行修改了
里面的熱更新會(huì)有點(diǎn)區(qū)別，需要三步來(lái)對(duì)其進(jìn)行配置，
- 第一步是 hot:ture
- 第二部把 webpack 模塊導(dǎo)進(jìn)來(lái)，就用 require 就可以了
- 第三步在 entry，output，devServer 屬性同級(jí)的 plugins（數(shù)組）配置插件屬性中放一個(gè)new webpack.HotModuleReplacementPlugin()字段，這是一個(gè)熱更新的模塊對(duì)象
開(kāi)發(fā)中更推薦第一種方式來(lái)配置

第一種配置方式

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --mode development --open --port 3000 --contentBase src --hot"
  }

第二種配置方式

//webpack配置文件
const path = require("path");
// 第二部，用于熱更新的內(nèi)容
const webpack = require("webpack");

module.exports = {
  entry: path.join(__dirname, "./src/main.js"),
  output: {
    path: path.join(__dirname, "./dist"),
    filename: "bundle.js"
  },
  devServer: {
    open: true,
    port: 3000,
    contentBase: "src",
    hot: true // 第一步，設(shè)置使用
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin() // 第三步，配置插件
  ]
};

在現(xiàn)在的開(kāi)發(fā)中我們的 html 頁(yè)面沒(méi)有做到直接放在內(nèi)存中更新，我們想要實(shí)現(xiàn)同樣的效果的話需要借助 webpack 的 html-webpack-plugin 插件來(lái)實(shí)現(xiàn)，可以通過(guò)npm install html-webpack-plugin -D來(lái)進(jìn)行安裝
之后再我們 config 文件里面導(dǎo)入這個(gè)插件const htmlWebPackPlugin=requie(html-webpack-plugin)
記住，只要是插件，都一定要在 config 文件中進(jìn)行設(shè)置
向之前的方式在插件節(jié)點(diǎn)插入我們的插件即可，與之前的不同的是它有配置對(duì)象
new htmlWebPackPlugin({}),第一個(gè)是指定根據(jù)誰(shuí)來(lái)生成我們的模板頁(yè)面
也就是{template:path.join(__dirname,'./src/index.html')}將來(lái)生成頁(yè)面的時(shí)候會(huì)根據(jù)這個(gè)路徑來(lái)生成
第二個(gè)配置項(xiàng)就是生成的文件名稱,{filename:"index.html"}
如果我們不改這個(gè)名字的話，我們?cè)L問(wèn)的頁(yè)面就會(huì)是內(nèi)存中的頁(yè)面，并且內(nèi)存中的頁(yè)面默認(rèn)請(qǐng)求內(nèi)存中的 bundle.js，所以會(huì)給我們帶來(lái)很多好處，如果改這個(gè)名字的話就會(huì)訪問(wèn)本地磁盤中的文件，并且本地磁盤中必須要有引用
所以他有兩個(gè)顯著好處，一是幫我們?cè)趦?nèi)存中自動(dòng)生成文件，第二個(gè)是默認(rèn)幫我們自動(dòng)獲取內(nèi)存中的 js

<!-- 不用去請(qǐng)求路徑，直接在內(nèi)存中自動(dòng)加 -->
<!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></body>
</html>

//webpack.config.js
//webpack配置文件
const path = require("path");
// 第二部，用于熱更新的內(nèi)容
const webpack = require("webpack");
//html的自動(dòng)構(gòu)建插件
const htmlWebackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.join(__dirname, "./src/main.js"),
  output: {
    path: path.join(__dirname, "./dist"),
    filename: "bundle.js"
  },
  devServer: {
    open: true,
    port: 3000,
    contentBase: "src",
    hot: true // 第一步，設(shè)置使用
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(), // 第三步，配置插件
    new htmlWebackPlugin({
      template: path.join(__dirname, "./src/index.html"),
      filename: "index.html"
    })
  ]
};

document.write("all");
window.alert("okk");

這樣開(kāi)發(fā)大大減少了我們?cè)谖募僮魃系木?/li>

5. css 的打包

如果我們按傳統(tǒng)的方式在頁(yè)面中請(qǐng)求樣式資源的話，我們就相當(dāng)于回到了從前，就發(fā)起了二次請(qǐng)求
webpack 可以幫我們減少這一步驟
我們可以直接在 main 文件中導(dǎo)入我們的樣式文件，因?yàn)闃邮轿募](méi)有什么需要操作的內(nèi)容，因此只要導(dǎo)入其文件就可以了，不用將其綁定到一個(gè)變量身上之類的
使用import '../../main.css'的方式來(lái)導(dǎo)入
直接在 main 文件的上方添加這一段即可完成導(dǎo)入
我們的 webpck 默認(rèn)只能打包 js 類型的文件，我們直接放著一段代碼我們會(huì)發(fā)現(xiàn)報(bào)錯(cuò)顯示您可能需要適合的 loader 來(lái)處理這類文件
也就是說(shuō)我們需要一個(gè)加載器來(lái)加載我們 css 文件
如果單純只想加載 css 的話我們需要安裝兩個(gè) loader，分別為 style-loader ,css-loader 都需要用 npm 進(jìn)行安裝
之后再打開(kāi) webpack 配置文件加入一個(gè)配置屬性叫做 module{}，在這個(gè)對(duì)象上有一個(gè) rules 屬性，這個(gè)屬性是一個(gè)數(shù)組，這個(gè)數(shù)組中存放了所有第三方文件的匹配和處理規(guī)則
其中的每一個(gè)內(nèi)容都是一個(gè)對(duì)象，分別有 test 屬性，也就是試探屬性，這是一個(gè)正則表達(dá)式的屬性，用于定義匹配規(guī)則，比如我們想要匹配后綴名為.css 的話我們就需要給 test 傳入匹配.css 字段的正則表達(dá)式
后面的 use 屬性即為使用那個(gè)第三方文件來(lái)進(jìn)行處理

plugins: [
        new webpack.HotModuleReplacementPlugin(), // 第三步，配置插件
        new htmlWebackPlugin({
            template: path.join(__dirname, './src/index.html'),
            filename: 'index.html'
        })
    ],
    module: {
        rules: [{
            test: /\.css$/,//兩個(gè)斜杠中間是匹配的內(nèi)容，第一個(gè)反斜杠表示遇到.就開(kāi)始匹配，并以css結(jié)尾
            use: ['style-loader', 'css-loader']
        }]
    }

我們的 loader 的調(diào)用規(guī)則是從右到左的，也就是會(huì)先交給 cssloader 去處理，并將處理結(jié)果交給 styleloader 處理，之后還有的話就繼續(xù)處理
下面我們來(lái)配置處理 less 文件的 loader
我們只需要安裝 less-loader 即可,還需要安裝一個(gè)他的依賴項(xiàng) less 包
之后就按之前的方式來(lái)完成即可

module: {
  rules: [
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"]
    },
    {
      test: /\.less$/,
      use: ["style-loader", "css-loader", "less-loader"]
    }
  ];
}

下面我們來(lái)看一下配置 scss 文件的 loader
這個(gè) loader 在安裝的時(shí)候也需要一個(gè)依賴項(xiàng)為 node-sass,這個(gè)依賴項(xiàng)只有 cnpm 才能下載，因此務(wù)必要把 npm 設(shè)置成淘寶鏡像
之后就是先安裝 sass-loader，之后又安裝 node-sass 這樣的操作了
需要注意的是這里的 scss 文件是由 sass-loader 來(lái)加載的，因此后面在使用的時(shí)候引起警惕

6. url-loader 的使用

在日常開(kāi)發(fā)中我們會(huì)遇到給頁(yè)面中某個(gè)元素設(shè)置背景圖片的場(chǎng)景，這個(gè)時(shí)候我們會(huì)在background:url('xxx.jpg')里面設(shè)置我們要獲取的圖片的地址，但是我們現(xiàn)在的 webpack 不能夠處理這類請(qǐng)求，
因此我們需要安裝 url-loader 這一個(gè)加載器
這個(gè)加載器會(huì)幫我們對(duì) url 請(qǐng)求的內(nèi)容進(jìn)行打包，通常 url 請(qǐng)求的內(nèi)容格式有.jpg,.gif,.ttf,.svg 等等
這類資源身上還存在的一個(gè)問(wèn)題就是命名沖突的問(wèn)題，我們會(huì)遇到在兩個(gè)地方使用名稱相同的資源，但內(nèi)容不一樣，按照傳統(tǒng)的方式我們會(huì)在兩個(gè)目錄里面存放這類資源，但是我們發(fā)現(xiàn) webpack 打包出來(lái)后的文件都會(huì)將資源存放在我們的虛擬內(nèi)存里面，這樣就不允許我們有相同名稱的資源
慶幸的是我們的 url-loader 就可以解決這個(gè)命名沖突問(wèn)題按照傳統(tǒng)慣例，第一步就是安裝我們的 loader，第二部就是在 module 里面定義我們的匹配規(guī)則
說(shuō)到匹配規(guī)則，url-loader 會(huì)需要一些配置項(xiàng)，就是在 use 里面配置 url-loader 的時(shí)候需要將這個(gè) loader 的配置項(xiàng)也配置進(jìn)去
安裝命令npm install url-loader file-loader -D同時(shí)它會(huì)依賴一個(gè) file-loader 加載器，因此我們也需要在 url-loader 之后將 file-loader 安裝進(jìn)去,但在配置項(xiàng)內(nèi)部不用對(duì)其進(jìn)行配置
對(duì)配置項(xiàng)進(jìn)行匹配：{test: /\.(jpg|svg|png|bmp|jpeg)$/,use: 'url-loader'}
這樣就解決了我們圖片路徑的請(qǐng)求問(wèn)題，但是，我們后面發(fā)現(xiàn)在頁(yè)面中的圖片竟然是 base64 格式的
也就是說(shuō)我們的 webpack 將我們的圖片直接轉(zhuǎn)換成 base64 直接放在頁(yè)面中了，這樣就不用二次請(qǐng)求
這樣操作固然是有好處的，但是對(duì)于一些體積比較龐大的圖片我們這樣操作會(huì)很浪費(fèi)我們的帶寬資源
因此我們最好是在配置項(xiàng)里面設(shè)置一個(gè)閾值，用于對(duì)圖片的大小進(jìn)行控制，如果超過(guò)這個(gè)閾值，我們就直接請(qǐng)求圖片，如果不超過(guò)，我們就轉(zhuǎn)為 base64
所以我們就要看 url-loader 的配置選項(xiàng)了，這些加載器的傳參方式與 url 地址的傳參方式非常類似，我們只需要在請(qǐng)求的內(nèi)容后面用問(wèn)號(hào)加我們的配置選線就可以了類似于use:'url-loader?limit=1024'之后超過(guò)這個(gè)閾值的圖片就會(huì)請(qǐng)求圖片資源，而不是 base64，但是我們發(fā)現(xiàn)我們請(qǐng)求到的圖片名稱直接改變了，竟然是一堆哈希值，所以我們就得出結(jié)論為，url-loader 默認(rèn)會(huì)將圖片名稱進(jìn)行重命名，并且用哈希值來(lái)代替，但是我們想要改變這種方式，又不想出現(xiàn)兩個(gè)文件相同名稱的情況怎么辦
還好，我們的 url-loader 幫我們?cè)O(shè)置了這類問(wèn)題的解決方法，我們可以對(duì)其 name 配置項(xiàng)進(jìn)行配置use:'url-loader?limit=1024&[name].[ext]'
這里的[name]是說(shuō)保留原有的名稱.[ext]表示保留原有的后綴，我們可以在這個(gè)前面再加一個(gè)[hash]用于表示還有哈希值名稱，并將其接到前面我們可以規(guī)定哈希的長(zhǎng)度為 8 位，即[hash:8]就可以完成了

module: {
  rules: [
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"]
    },
    {
      test: /\.less$/,
      use: ["style-loader", "css-loader", "less-loader"]
    },
    {
      test: /\.scss$/,
      use: [
        {
          loader: "style-loader" // creates style nodes from JS strings
        },
        {
          loader: "css-loader" // translates CSS into CommonJS
        },
        {
          loader: "sass-loader" // compiles Sass to CSS
        }
      ]
    },
    {
      test: /\.(jpg|png|bmp|gif|svg)/,
      use: "url-loader?limit=2048&name=[hash:4]-[name].[ext]"
    }
  ];
}

url-loader 處理字體文件，也就是我們會(huì)有一些字體圖標(biāo)，這些內(nèi)容我們就可以使用它來(lái)處理
我們可以使用以下 bootstrap 的字體圖標(biāo)，首先就是安裝 bootstrap
安裝命令： npm install bootstrap -s
之后再頁(yè)面直接用使用 bootstrap 的方式使用
但我們沒(méi)有處理字體文件，因此會(huì)報(bào)錯(cuò)，所以我們需要在 module 里面處理字體文件，這類文件是由 url-loader 來(lái)進(jìn)行處理的，因此我們哦欸之好配置選項(xiàng)即可
因?yàn)?bootstrap4 需要依賴 jqurey 跟 popper.js，因此需要將這兩個(gè)也進(jìn)行安裝
npm install --save jquery popper.js
{test: /\.(ttf|eot|svg|woff|woff2)$/,use: 'url-loader'}
如果有不顯示的情況，就把目錄中的 node_modules 刪掉，重新安裝即可
需要知道的是 json 文件中不能有注釋

7. webpack 中使用 Babel

我們?cè)跇?gòu)架我們工程的時(shí)候經(jīng)常會(huì)遇到需要使用 ES6 的新語(yǔ)法的場(chǎng)景
但是我們的 webpack 對(duì)于這類請(qǐng)求無(wú)能為力，webpack 只能處理部分 es6 代碼
但是我們可以使用第三方編譯器將我們用 ES6 語(yǔ)法寫(xiě)的內(nèi)容編譯出來(lái)，并交給 webpack 進(jìn)行打包處理
今天我們要學(xué)習(xí)的這個(gè) loader 就是能狗完成這一功能的 loader
就是 Babel，它可以將我們寫(xiě)的高級(jí)語(yǔ)法代碼轉(zhuǎn)換成低級(jí)的代碼
按慣例，我們需要在工程依賴中安裝 babel
我們需要兩套代碼來(lái)進(jìn)行部署
第一套：babel-core babel-loader babel-plugin-transform-runtime，這套代碼是有關(guān)編譯器的包
第二套：babel-preset-env babel-preset-stage-0，這套代碼是有關(guān)編譯庫(kù)的包
我們用的 preset 位 env，里面包含了最新的 es 語(yǔ)法
安裝完成之后我們需要在我們的配置文件中添加一個(gè)新的匹配規(guī)則
{test:/\.js\$/,use:'babel-loader',exclude:/node_modules/}
這段代碼的意義就是，遇到.js 文件就用 babel-loader 進(jìn)行編譯，但是我們的 node_modules 除外，這樣就保證了不會(huì)對(duì)一些不必要的內(nèi)容進(jìn)行編譯的情況
這些完成之后我們需要在根目錄下面創(chuàng)建 Babel 的配置文件，也就是創(chuàng)建一個(gè).babelrc的文件
這個(gè)文件內(nèi)部是 json 格式，所以寫(xiě)入的時(shí)候需要遵循 json 的寫(xiě)法
這個(gè)配置文件的內(nèi)部有以下屬性
presets:["env","stage-0"]，我們之前安裝的 preset 就要寫(xiě)在這個(gè)里面，我們可以安裝自己的語(yǔ)法包，并配置在這個(gè)里面
plugins:["transform-runtime"],我們只裝了一個(gè)插件，那就是我們安裝的內(nèi)容里面帶有 plugin 的那個(gè)，就是我們的 transform-runtime 這個(gè)插件
之后我們就可以在項(xiàng)目中直接使用我們的 es6 語(yǔ)法了

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

8.使用webpack進(jìn)行項(xiàng)目的構(gòu)建

8.使用webpack進(jìn)行項(xiàng)目的構(gòu)建

1.當(dāng)前項(xiàng)目存在的問(wèn)題

2. 什么是 webpack

3. webpack 的使用

webpack 的安裝

通過(guò) npm 安裝 vue 框架

使用 webpack 的規(guī)范寫(xiě)代碼

語(yǔ)法知識(shí)點(diǎn) 1. 用 es6 的規(guī)范引入文件,es6 導(dǎo)入模塊的方式

4. webpack dev server 的基本使用

webpack-dev-server 常用的命令學(xué)習(xí)

第一種配置方式

第二種配置方式

5. css 的打包

6. url-loader 的使用

7. webpack 中使用 Babel

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

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

8.使用webpack進(jìn)行項(xiàng)目的構(gòu)建

1.當(dāng)前項(xiàng)目存在的問(wèn)題

2. 什么是 webpack

3. webpack 的使用

webpack 的安裝

通過(guò) npm 安裝 vue 框架

使用 webpack 的規(guī)范寫(xiě)代碼

語(yǔ)法知識(shí)點(diǎn) 1. 用 es6 的規(guī)范引入文件,es6 導(dǎo)入模塊的方式

4. webpack dev server 的基本使用

webpack-dev-server 常用的命令學(xué)習(xí)

第一種配置方式

第二種配置方式

5. css 的打包

6. url-loader 的使用

7. webpack 中使用 Babel

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

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av