WebPack 基本配置

Webpack

在網(wǎng)頁(yè)中會(huì)引用哪些常見的靜態(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 開發(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開始，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安裝到開發(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目錄下并沒有生成bundle.js文件，這是因?yàn)?code>webpack-dev-server將打包好的文件放在了內(nèi)存中
  • 把bundle.js放在內(nèi)存中的好處是：由于需要實(shí)時(shí)打包編譯，所以放在內(nèi)存中速度會(huì)非常快
  • 這個(gè)時(shí)候訪問(wèn)webpack-dev-server啟動(dòng)的http://localhost:8080/網(wǎng)站，發(fā)現(xiàn)是一個(gè)文件夾的面板，需要點(diǎn)擊到src目錄下，才能打開我們的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安裝到開發(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)打開瀏覽器、熱更新和配置瀏覽器的默認(rèn)端口號(hào)

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

方式1：

  • 修改package.json的script節(jié)點(diǎn)如下，其中--open表示自動(dòng)打開瀏覽器，--port 4321表示打開的端口號(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ǔ)法

注:下面安裝babel-loader方法是使用babel-loader老版本

  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ǔ)法；

webpack.config.js代碼

const path = require('path')
// 啟用熱更新的 第2步
const webpack = require('webpack')
// 導(dǎo)入在內(nèi)存中生成 HTML 頁(yè)面的 插件
// 只要是插件，都一定要 放到 plugins 節(jié)點(diǎn)中去
// 這個(gè)插件的兩個(gè)作用：
//  1. 自動(dòng)在內(nèi)存中根據(jù)指定頁(yè)面生成一個(gè)內(nèi)存的頁(yè)面
//  2. 自動(dòng)，把打包好的 bundle.js 追加到頁(yè)面中去
const htmlWebpackPlugin = require('html-webpack-plugin')

// 這個(gè)配置文件，起始就是一個(gè) JS 文件，通過(guò) Node 中的模塊操作，向外暴露了一個(gè) 配置對(duì)象
module.exports = {
  // 大家已經(jīng)學(xué)會(huì)了舉一反4， 大家覺得，在配置文件中，需要手動(dòng)指定 入口 和 出口
  entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪個(gè)文件
  output: { // 輸出文件相關(guān)的配置
    path: path.join(__dirname, './dist'), // 指定 打包好的文件，輸出到哪個(gè)目錄中去
    filename: 'bundle.js' // 這是指定 輸出的文件的名稱
  },
  devServer: { // 這是配置 dev-server 命令參數(shù)的第二種形式，相對(duì)來(lái)說(shuō)，這種方式麻煩一些
    //  --open --port 3000 --contentBase src --hot
    open: true, // 自動(dòng)打開瀏覽器
    port: 3000, // 設(shè)置啟動(dòng)時(shí)候的運(yùn)行端口
    contentBase: 'src', // 指定托管的根目錄
    hot: true // 啟用熱更新 的 第1步
  },
  plugins: [ // 配置插件的節(jié)點(diǎn)
    new webpack.HotModuleReplacementPlugin(), // new 一個(gè)熱更新的 模塊對(duì)象， 這是 啟用熱更新的第 3 步
    new htmlWebpackPlugin({ // 創(chuàng)建一個(gè) 在內(nèi)存中 生成 HTML  頁(yè)面的插件
      template: path.join(__dirname, './src/index.html'), // 指定 模板頁(yè)面，將來(lái)會(huì)根據(jù)指定的頁(yè)面路徑，去生成內(nèi)存中的 頁(yè)面
      filename: 'index.html' // 指定生成的頁(yè)面的名稱
    })
  ],
  module: { // 這個(gè)節(jié)點(diǎn)，用于配置 所有 第三方模塊 加載器 
    rules: [ // 所有第三方模塊的 匹配規(guī)則
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //  配置處理 .css 文件的第三方loader 規(guī)則
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置處理 .less 文件的第三方 loader 規(guī)則
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置處理 .scss 文件的 第三方 loader 規(guī)則
    ]
  }
}

// 當(dāng)我們?cè)?控制臺(tái)，直接輸入 webpack 命令執(zhí)行的時(shí)候，webpack 做了以下幾步：
//  1. 首先，webpack 發(fā)現(xiàn)，我們并沒有通過(guò)命令的形式，給它指定入口和出口
//  2. webpack 就會(huì)去 項(xiàng)目的 根目錄中，查找一個(gè)叫做 `webpack.config.js` 的配置文件
//  3. 當(dāng)找到配置文件后，webpack 會(huì)去解析執(zhí)行這個(gè) 配置文件，當(dāng)解析執(zhí)行完配置文件后，就得到了 配置文件中，導(dǎo)出的配置對(duì)象
//  4. 當(dāng) webpack 拿到 配置對(duì)象后，就拿到了 配置對(duì)象中，指定的 入口  和 出口，然后進(jìn)行打包構(gòu)建；

// 由于 webpack 是基于Node進(jìn)行構(gòu)建的，所有，webpack的配置文件中，任何合法的Node代碼都是支持的
var path = require('path')
// 在內(nèi)存中，根據(jù)指定的模板頁(yè)面，生成一份內(nèi)存中的首頁(yè)，同時(shí)自動(dòng)把打包好的bundle注入到頁(yè)面底部
// 如果要配置插件，需要在導(dǎo)出的對(duì)象中，掛載一個(gè) plugins 節(jié)點(diǎn)
var htmlWebpackPlugin = require('html-webpack-plugin')

// 當(dāng)以命令行形式運(yùn)行 webpack 或 webpack-dev-server 的時(shí)候，工具會(huì)發(fā)現(xiàn)，我們并沒有提供 要打包 的文件的 入口 和 出口文件，此時(shí)，他會(huì)檢查項(xiàng)目根目錄中的配置文件，并讀取這個(gè)文件，就拿到了導(dǎo)出的這個(gè) 配置對(duì)象，然后根據(jù)這個(gè)對(duì)象，進(jìn)行打包構(gòu)建
module.exports = {
  entry: path.join(__dirname, './src/main.js'), // 入口文件
  output: { // 指定輸出選項(xiàng)
    path: path.join(__dirname, './dist'), // 輸出路徑
    filename: 'bundle.js' // 指定輸出文件的名稱
  },
  plugins: [ // 所有webpack  插件的配置節(jié)點(diǎn)
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'), // 指定模板文件路徑
      filename: 'index.html' // 設(shè)置生成的內(nèi)存頁(yè)面的名稱
    })
  ],
  module: { // 配置所有第三方loader 模塊的
    rules: [ // 第三方模塊的匹配規(guī)則
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 處理 CSS 文件的 loader
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 處理 less 文件的 loader
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 處理 scss 文件的 loader
      { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 處理 圖片路徑的 loader
      // limit 給定的值，是圖片的大小，單位是 byte， 如果我們引用的 圖片，大于或等于給定的 limit值，則不會(huì)被轉(zhuǎn)為base64格式的字符串， 如果 圖片小于給定的 limit 值，則會(huì)被轉(zhuǎn)為 base64的字符串
      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 處理 字體文件的 loader 
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 來(lái)轉(zhuǎn)換高級(jí)的ES語(yǔ)法
    ]
  }
}

.babelsrc配置

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

main.js代碼

// 這是 main.js 是我們項(xiàng)目的JS入口文件

// 1. 導(dǎo)入 Jquery
// import *** from *** 是ES6中導(dǎo)入模塊的方式
// 由于 ES6的代碼，太高級(jí)了，瀏覽器解析不了，所以，這一行執(zhí)行會(huì)報(bào)錯(cuò)
import $ from 'jquery'
// const $ = require('jquery')

// 使用 import 語(yǔ)法，導(dǎo)入 CSS樣式表
import './css/index.css'
import './css/index.less'
import './css/index.scss'
// 注意： webpack, 默認(rèn)只能打包處理 JS 類型的文件，無(wú)法處理 其它的非 JS 類型的文件；
// 如果要處理 非JS類型的文件，我們需要手動(dòng)安裝一些 合適 第三方 loader 加載器；
// 1. 如果想要打包處理 css 文件，需要安裝 cnpm i style-loader css-loader -D
// 2. 打開 webpack.config.js 這個(gè)配置文件，在 里面，新增一個(gè) 配置節(jié)點(diǎn)，叫做 module, 它是一個(gè)對(duì)象；在 這個(gè) module 對(duì)象身上，有個(gè) rules 屬性，這個(gè) rules 屬性是個(gè) 數(shù)組；這個(gè)數(shù)組中，存放了，所有第三方文件的 匹配和 處理規(guī)則；


// 注意： webpack 處理第三方文件類型的過(guò)程：
// 1. 發(fā)現(xiàn)這個(gè) 要處理的文件不是JS文件，然后就去 配置文件中，查找有沒有對(duì)應(yīng)的第三方 loader 規(guī)則
// 2. 如果能找到對(duì)應(yīng)的規(guī)則， 就會(huì)調(diào)用 對(duì)應(yīng)的 loader 處理 這種文件類型；
// 3. 在調(diào)用loader 的時(shí)候，是從后往前調(diào)用的；
// 4. 當(dāng)最后的一個(gè) loader 調(diào)用完畢，會(huì)把 處理的結(jié)果，直接交給 webpack 進(jìn)行 打包合并，最終輸出到  bundle.js 中去




$(function () {
  $('li:odd').css('backgroundColor', 'yellow')
  $('li:even').css('backgroundColor', function () {
    return '#' + 'D97634'
  })
})


// 經(jīng)過(guò)剛才的演示，Webpack 可以做什么事情？？？
// 1. webpack 能夠處理 JS 文件的互相依賴關(guān)系；
// 2. webpack 能夠處理JS的兼容問(wèn)題，把 高級(jí)的、瀏覽器不是別的語(yǔ)法，轉(zhuǎn)為 低級(jí)的，瀏覽器能正常識(shí)別的語(yǔ)法

// 剛才運(yùn)行的命令格式：    webpack  要打包的文件的路徑  打包好的輸出文件的路徑



// 使用 webpack-dev-server 這個(gè)工具，來(lái)實(shí)現(xiàn)自動(dòng)打包編譯的功能
// 1. 運(yùn)行 npm i webpack-dev-server -D 把這個(gè)工具安裝到項(xiàng)目的本地開發(fā)依賴
// 2. 安裝完畢后，這個(gè) 工具的用法， 和 webpack 命令的用法，完全一樣
// 3. 由于，我們是在項(xiàng)目中，本地安裝的 webpack-dev-server ， 所以，無(wú)法把它當(dāng)作 腳本命令，在powershell 終端中直接運(yùn)行；（只有那些 安裝到 全局 -g 的工具，才能在 終端中正常執(zhí)行）
// 4. 注意： webpack-dev-server 這個(gè)工具，如果想要正常運(yùn)行，要求，在本地項(xiàng)目中，必須安裝 webpack
// 5. webpack-dev-server 幫我們打包生成的 bundle.js 文件，并沒有存放到 實(shí)際的 物理磁盤上；而是，直接托管到了 電腦的內(nèi)存中，所以，我們?cè)?項(xiàng)目根目錄中，根本找不到 這個(gè)打包好的 bundle.js;
// 6. 我們可以認(rèn)為， webpack-dev-server 把打包好的 文件，以一種虛擬的形式，托管到了 咱們項(xiàng)目的 根目錄中，雖然我們看不到它，但是，可以認(rèn)為， 和 dist  src   node_modules  平級(jí)，有一個(gè)看不見的文件，叫做 bundle.js



// 項(xiàng)目的JS入口文件
console.log('ok')

import './css/index.css'
import './css/index.scss'
// 注意： 如果要通過(guò)路徑的形式，去引入 node_modules 中相關(guān)的文件，可以直接省略 路徑前面的 node_modules 這一層目錄，直接寫 包的名稱，然后后面跟上具體的文件路徑
// 不寫 node_modules 這一層目錄 ，默認(rèn) 就會(huì)去 node_modules 中查找
import 'bootstrap/dist/css/bootstrap.css'

// class 關(guān)鍵字，是ES6中提供的新語(yǔ)法，是用來(lái) 實(shí)現(xiàn) ES6 中面向?qū)ο缶幊痰姆绞?class Person {
  // 使用 static 關(guān)鍵字，可以定義靜態(tài)屬性
  // 所謂的靜態(tài)屬性，就是 可以直接通過(guò) 類名， 直接訪問(wèn)的屬性
  // 實(shí)例屬性： 只能通過(guò)類的實(shí)例，來(lái)訪問(wèn)的屬性，叫做實(shí)例屬性
  static info = { name: 'zs', age: 20 }
}

// 訪問(wèn) Person 類身上的  info 靜態(tài)屬性
console.log(Person.info)
// 在 webpack 中，默認(rèn)只能處理 一部分 ES6 的新語(yǔ)法，一些更高級(jí)的ES6語(yǔ)法或者 ES7 語(yǔ)法，webpack 是處理不了的；這時(shí)候，就需要 借助于第三方的 loader，來(lái)幫助webpack 處理這些高級(jí)的語(yǔ)法，當(dāng)?shù)谌絣oader 把 高級(jí)語(yǔ)法轉(zhuǎn)為 低級(jí)的語(yǔ)法之后，會(huì)把結(jié)果交給 webpack 去打包到 bundle.js 中
// 通過(guò) Babel ，可以幫我們將 高級(jí)的語(yǔ)法轉(zhuǎn)換為 低級(jí)的語(yǔ)法
// 1. 在 webpack 中，可以運(yùn)行如下兩套 命令，安裝兩套包，去安裝 Babel 相關(guān)的loader功能：
// 1.1 第一套包： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
// 1.2 第二套包： cnpm i babel-preset-env babel-preset-stage-0 -D
// 2. 打開 webpack 的配置文件，在 module 節(jié)點(diǎn)下的 rules 數(shù)組中，添加一個(gè) 新的 匹配規(guī)則：
// 2.1 { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }
// 2.2 注意： 在配置 babel 的 loader規(guī)則的時(shí)候，必須 把 node_modules 目錄，通過(guò) exclude 選項(xiàng)排除掉：原因有倆：
// 2.2.1 如果 不排除 node_modules， 則Babel 會(huì)把 node_modules 中所有的 第三方 JS 文件，都打包編譯，這樣，會(huì)非常消耗CPU，同時(shí)，打包速度非常慢；
// 2.2.2 哪怕，最終，Babel 把 所有 node_modules 中的JS轉(zhuǎn)換完畢了，但是，項(xiàng)目也無(wú)法正常運(yùn)行！
// 3. 在項(xiàng)目的 根目錄中，新建一個(gè) 叫做 .babelrc  的Babel 配置文件，這個(gè)配置文件，屬于JSON格式，所以，在寫 .babelrc 配置的時(shí)候，必須符合JSON語(yǔ)法規(guī)范： 不能寫注釋，字符串必須用雙引號(hào)
// 3.1 在 .babelrc 寫如下的配置：  大家可以把 preset 翻譯成 【語(yǔ)法】 的意思
        // {
        //   "presets": ["env", "stage-0"],
        //   "plugins": ["transform-runtime"]
        // }
// 4. 了解： 目前，我們安裝的 babel-preset-env, 是比較新的ES語(yǔ)法， 之前， 我們安裝的是 babel-preset-es2015, 現(xiàn)在，出了一個(gè)更新的 語(yǔ)法插件，叫做 babel-preset-env ，它包含了 所有的 和 es***相關(guān)的語(yǔ)法



// Java  C#  實(shí)現(xiàn)面向?qū)ο蟮姆绞酵耆粯恿耍?  class 是從后端語(yǔ)言中借鑒過(guò)來(lái)的， 來(lái)實(shí)現(xiàn)面向?qū)ο?// var p1 = new Person()


// function Animal(name){
//   this.name  = name
// }
// Animal.info = 123

// var a1 = new Animal('小花')

// // 這是靜態(tài)屬性：
// // console.log(Animal.info)
// // 這是實(shí)例屬性：
// console.log(a1.name)

index.html頁(yè)面

<!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>
  <!-- 注意： 不推薦直接在這里引用任何包和任何CSS文件 -->

  <!-- 因?yàn)?main 中的代碼，涉及到了ES6的新語(yǔ)法，但是瀏覽器不識(shí)別 -->
  <!-- <script src="./main.js"></script> -->
  <!-- 通過(guò) webpack 這么一個(gè)前端構(gòu)建工具， 把 main.js 做了一下處理，生成了一個(gè) bundle.js 的文件 -->
  <!-- <script src="../dist/bundle.js"></script> -->

  <!-- 當(dāng)使用 html-webpack-plugin 之后，我們不再需要手動(dòng)處理 bundle.js 的引用路徑了，因?yàn)?這個(gè)插件，已經(jīng)幫我們自動(dòng) 創(chuàng)建了一個(gè) 合適的 script , 并且，引用了 正確的路徑 -->
  <!-- <script src="/bundle.js"></script> -->

  <!-- css 或發(fā)起二次請(qǐng)求，不推薦這么搞 -->
  <!-- <link rel="stylesheet" href="./css/index.css"> -->

</head>

<body>
  <ul>
    <li>這是第1個(gè)li</li>
    <li>這是第2個(gè)li</li>
    <li>這是第3個(gè)li</li>
    <li>這是第4個(gè)li</li>
    <li>這是第5個(gè)li</li>
    <li>這是第6個(gè)li</li>
    <li>這是第7個(gè)li</li>
    <li>這是第8個(gè)li</li>
    <li>這是第9個(gè)li</li>
    <li>這是第10個(gè)li</li>
  </ul>
</body>

</html>

相關(guān)文章

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • webpack 前身 browserify，缺點(diǎn)只能轉(zhuǎn)化js 一、作用： 一切都是模塊化 webpack相當(dāng)于一個(gè)...
    前端小華子閱讀 1,191評(píng)論 0贊 1
  • webpack - 最熱門的前端資源模塊化管理和打包工具 簡(jiǎn)單設(shè)置(單頁(yè)面) 先安裝webpack npm ins...
    zz77zz閱讀 526評(píng)論 0贊 2
  • webpack 中間可能會(huì)出現(xiàn)cnpm , npm ,yarn等三種安裝方式,其實(shí)最終安裝的結(jié)果都是一樣的,只是安...
    諾克斯1閱讀 356評(píng)論 0贊 0
  • 一、入門loader可以看作是翻譯員，配置module.rules數(shù)組里的規(guī)則，告訴webpack遇到哪些文件使用...
    zx_lau閱讀 3,020評(píng)論 0贊 0
  • 事兒已經(jīng)過(guò)去若干天，偶爾還是會(huì)想起，每想一次，嘴角都不自覺上揚(yáng)，像在看笨手笨腳的小朋友搭了半天的積木忽然倒塌而摔打...
    神煩閱讀 279評(píng)論 0贊 0