webpack基礎(chǔ)

• 什么是webpack坷随？
  webpack是前端的一個項目構(gòu)建工具典鸡，它是基于Node.js開發(fā)出來的一個前端工具

• webpack安裝

  • 全局安裝：npm install webpack -g
  • 安裝到項目依賴中（在項目根目錄）：npm install webpack --save-dev

• mac安裝注意碗脊，需要root權(quán)限窝爪，如果安裝不npm成功塘匣，可能就是國內(nèi)網(wǎng)絡(luò)問題顾画，可以使用代理鏡像如：npm config set registry http://registry.npm.taobao.org

• 瀏覽器目前解析不了ES6的代碼取劫，所以需要使用類似webpack這樣的工具來使es6的代碼轉(zhuǎn)換成瀏覽器可以執(zhí)行的代碼

• webpack 打包

  • webpack ./src/main.js ./dist/bundle.js
  • 命令 打包的文件 打包后存放的目錄和名字

• webpack可以做的事情

  • 能夠處理JS文件之間的互相依賴關(guān)系
  • webpack能夠處理JS的兼容問題，把高級的瀏覽器不識別的語法轉(zhuǎn)為低級別的瀏覽器能識別的語法

• 示例：初步使用webpack隔行漸變功能

• 安裝webpack遇到的問題

  • 直接使用npm install webpack -g命令安裝的時候研侣，默認當前用戶是沒有權(quán)限的谱邪，需要使用sudo npm install webpack -g或者sudo npm install webpack -g --unsafe-perm=true --allow-root命令獲取root權(quán)限安裝
  • 使用安裝的時候會出現(xiàn)在 “node-gyp r” 卡住，需要手動安裝node-gyp庶诡，建議使用淘寶的npm源,也可以使用cnpm -g install node-gyp進行安裝node-gyp惦银，然后重新執(zhí)行sudo npm install webpack -g命令安裝即可成功
  • webpack打包前必須安裝webpack-cli，使用npm install webpack-cli -g末誓。注意安裝的webpack-cli必須匹配webpack版本扯俱，否則也會出現(xiàn)異常。安裝webpack-cli加版本號命令如：npm install webpack@3.0.0 -g

• webpack配置文件的使用

  • 在當前項目根目錄基显，創(chuàng)建webpack.config.js
  • 有了配置文件以后，就可以直接使用webpack命令打包

• 使用webpack-dev-server來自動實現(xiàn)打包編譯的功能

  • 運行npm install webpack-dev-server -D 把這個工具安裝到項目的本地開發(fā)依賴
  • 安裝完畢善炫，這個工具的用法和webpack命令的用法撩幽，完全一樣
  • 由于我們是在項目中，本地安裝的webpack-dev-server,所以無法把它當做腳本命令，在shell終端直接運行窜醉；（只有那些安裝到全局 -g的功能句宪萄，才能在終端中正常執(zhí)行）
  • 在package.json 中scripts中添加"dev":"webpack-dev-server",然后執(zhí)行命令：npm run dev。
  • 注意：webpack-dev-server這個工具榨惰，如果想要正常運行拜英，要求在本地項目中必須安裝webpack,使用命令：npm install webpack -D
  • webpack-dev-server幫我們打包生成的bundle.js文件，并沒有存放到實際的物理磁盤上琅催，而是居凶，直接托管到了電腦的內(nèi)存中，所以我們在項目根目錄中藤抡，根本找不到這個打包好的bundle.js
  • 我們可以認為webpack-dev-server把打包好的文件侠碧，以一種虛擬的形式，托管到了咱們項目的根目錄中缠黍，雖然我們看不到它弄兜，但是可以認為它和dist,src,node_modules平級，有一個看不見的文件叫做bundle.js瓷式。在需要引用js的文件的地方引用方式就是/bundle.js
  • webpack命令配置參數(shù)一：在package.json 中scripts中添加"dev":"webpack-dev-server --open --port 3000 --contentBase src --hot" 替饿。
  • webpack命令配置參數(shù)二：在webpack.config.js中exports下添加：devServer:{
    open: true,//自動打開瀏覽器
    port: 3000,//設(shè)置啟動時候運行的端口
    contentBase: 'src', //指定托管的根目錄
    hot: true //啟用熱更新第1步
    }
    const webpack = require('webpack'); // 熱更新的第2步
    plugins:[ //配置插件節(jié)點
    new webpack.HotModuleReplacementPlugin() //new 一個熱更新的模塊對象，啟用熱更新的第三步
    ]
  • 將html頁面放入內(nèi)存中
    1.npm install html-webpack-plugin -D
    2.在webpack.config.js中
    const htmlWebpackPlugin = require('html-webpack-plugin')
    在plugins節(jié)點中
    new htmlWebpackPlugin({
    template: path.join(__dirname,'./src/index.html'),//指定模板頁面贸典，將來根據(jù)指定的路徑頁面视卢，去生成內(nèi)存中的頁面
    filename: 'index.html' //內(nèi)存中的頁面名稱
    })
    3.當使用html-webpack-plugin之后，我們不需要再手動引入bundle.js文件了瓤漏，因為這個插件已經(jīng)幫我們自動引入內(nèi)存中的bundle.js

• css加載器

  • 注意：webpack默認只打包處理js類型的文件腾夯，無法處理其他的非js類型的文件
  • 如果要處理費Js類型的文件，我們需要手動安裝一些合適的第三方Loader加載器
  • 如果要打包處理css文件蔬充，需要安裝cnpm install style-loader css-loader -D
  • 打開webpack.config.js這個配置文件蝶俱，在里面新增一個配置節(jié)點，叫做module,它是一個對象饥漫；在這個module對象身上榨呆，有一個rules屬性，這個rules屬性是一個數(shù)組庸队，在這個數(shù)組中存放了所有第三方文件的匹配和處理規(guī)則
  • 在webpack.config.js配置對象代碼示例：

     module:{ //這個節(jié)點配置所有第三方的加載器
         rules:[
             {test: /\.css$/, use:['style-loader','css-loader']}, // 配置處理.css文件 
            {test: /\.less$/, use: ['style-loader','css-loader','less-loader']}, //配置處理.less文件的第三方loader規(guī)則
            {test"/\.cscss$/, use: ['style-loader','css-loader','sass-loader']}, //配置處理.scss文件的第三方loader規(guī)則
            {test"/\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]'}, //配置處理圖片路徑的第三方loader規(guī)則,limit設(shè)置圖片大小积蜻，如果引用的圖片小于給定值使用base64編碼字符串，否則使用圖片路徑彻消。
            {test"/\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'},// 處理字體文件的loader
         ]
     }
    

  • 在main.js中使用css:

      import 'path/name.css'
  

• webpack處理第三方文件類型的過程：

  1. 發(fā)現(xiàn)這個處理的文件不是JS竿拆，然后就去webpack.config.js配置文件中，查找有沒有對應(yīng)的第三方loader規(guī)則
  2. 如果找到規(guī)則宾尚，就會調(diào)用對應(yīng)的Loader處理這種文件類型
  3. 在調(diào)用Loader的時候丙笋，是從后往前調(diào)用的
  4. 當最后一個Loader調(diào)用完畢谢澈，會把處理的結(jié)果，直接交給webpack進行打包合并御板，最終輸出到bundle.js中去

• 配置處理less文件

  • npm install less -D
  • npm install less-loader -D

• 配置處理scss文件

  • npm install node-sass -D
  • npm install sass-loader -D

• 初始化項目：npm init -y 锥忿。如果包名含有中文，不能使用-y 怠肋。盡量不使用中文的包名

• 由于webpack是基于Node進行構(gòu)建的敬鬓，所以webpack的配置文件中，任何合法的node代碼都是支持的

• webpack中使用url-loader處理字體文件

  • 默認情況下笙各，webpack無法處理css文件中的url地址钉答，不管是圖片還是字體庫。只要是url地址都處理不了
  • 安裝loader: npm install url-loader file-loader -D
  • 使用url-loader處理字體文件
  1. npm install bootstrap -S
  2. 如果要通過路徑的形式酪惭，去引入node_modules中相關(guān)的文件希痴，可以直接省略路徑前面的node_modules這一層目錄，直接寫包的名稱春感，然后后面跟上具體的文件路徑

• webpack中的babel的配置

  • class關(guān)鍵字是ES6中提供的新語法砌创，用來創(chuàng)建ES6中面向?qū)ο缶幊谭绞健lass是從后端語言中借鑒過來實現(xiàn)面向?qū)ο?/li>
  • static 關(guān)鍵字鲫懒，可以定義靜態(tài)屬性嫩实，可以通過類名直接訪問
  • 在webpack中，默認只能處理一部分ES6語法或者ES7語法窥岩，一個更高級的語法webpack是處理不了的甲献；這時候，就需要借助第三方loader來幫助webpack處理這些高級的語法颂翼，當?shù)谌絣oader把語法轉(zhuǎn)為低級語法之后晃洒，會把結(jié)果交給webpack去打包到bundle.js中。
  • 通過Babel可以幫我們將高級語法轉(zhuǎn)換為低級語法朦乏。在webpack中球及，可以運行如下兩套命令，安裝兩套包去安裝babel相關(guān)的loader功能
  1. 安裝第一套包：npm install babel-core babel-loader babel-plugin-transform-runtime -D
  2. 安裝第二套包：npm install babel-preset-env babel-preset-stage-0 -D
  3. 打開webpack的配置文件呻疹，在module節(jié)點下的rules數(shù)組中进鸠，添加一個新的匹配規(guī)則结榄。配置規(guī)則時必須把node_modules排除掉：如果不排除，Babel會把node_modules中素有的第三方JS文件费薄，都打包編譯扔傅，這樣會非常消耗CPU,同時打包非常慢冯遂。如果不排除档冬，node_module中的js被轉(zhuǎn)換了也無法正常運行：

   {
       test:/\.js$/, use: 'babel-loader', exclude:/node_modules/
   } //轉(zhuǎn)換ES高級語法
  

  4. 在項目目錄中瞧柔，新建一個較重.babelrc的Babel配置文件，這個是json格式文件宋彼，內(nèi)容必須符合JSON語法規(guī)范弄砍，不能寫注釋颅筋，字符必須使用雙引號
  5. .babelrc中配置如下：

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

  6. 目前我們安裝的babel-preset-env是比較新的ES語法插件，之前安裝的是babel-preset-es2015∈淇荩現(xiàn)在出了一個更新的語法插件babel-preset-env，它包含了所有和es**相關(guān)的語法

• 使用Vue實例的render方法渲染組件

  • 在頁面中渲染基本的組件（component）
  • 在頁面中使用render函數(shù)渲染組件

• 在普通網(wǎng)頁中使用vue

  • 使用script標簽占贫，引入vue包
  • 在index頁面中桃熄，創(chuàng)建一個id為app的div容器
  • 通過new vue 得到一個vm的實例

• 在webpack中使用vue

  • 安裝包vue包：npm install vue -S
  • 使用vue示例代碼：

  import Vue from 'vue' // 這個引入方式無法正常執(zhí)行
  import Vue from '../node_modules/vue/dist/vue.js' //這種引入方式可以正常執(zhí)行
  import login from './login.vue' // 導(dǎo)入vue模板

  var vm = new Vue({
      el: '#app', //指定容器，需要在頁面中頂一個id為app的div
      data: {
          msg: '123'
      },
      components:{ //在webpack中無法使用組件方式型奥，展示vue模板
          login
      },
      render: function(createElements){ // 在webpack 中瞳收，如果想通過vue，把一個組件放到頁面中去展示厢汹，vm 實例中的render函數(shù)可以實現(xiàn)
          return createElements(login)
      }

      render: c => c(login) //render簡寫
  })

• 注意：在webpack中螟深，使用import Vue from 'vue'都的Vue構(gòu)造函數(shù)，功能不完整烫葬，只提供了runtime-only的方式并沒有提供像網(wǎng)頁中那樣的使用方式界弧。解決這個問題，可以使用兩種方式：

1. 修改導(dǎo)入包：import Vue from '../node_modules/vue/dist/vue.js'
2. 不修改導(dǎo)入包（推薦）搭综，在webpack.config.js中添加新的模塊

 resolve: {
     alias:{
         "vue$": "vue/dist/vue.js", //修改vue被導(dǎo)入時候的包的路徑
     }
 }

• .vue文件定義組件模板對象內(nèi)容：
  • html內(nèi)容在<template></template>中
  • js業(yè)務(wù)邏輯在<sccript></sccript>中
  • 樣式內(nèi)容在<style></style>中
• 使用webpack處理.vue文件垢箕，需要在webpack.config.js中配置加載插件，否則無法解析.vue文件中的內(nèi)容
  • 添加加載插件：const VueLoaderPlugin = require('vue-loader/lib/plugin');
  • 在plugins添加定義的插件：new VueLoaderPlugin()
• webpack如果要打包處理.vue文件兑巾，需要一些操作：
  • 需要安裝相關(guān)的loader: npm install vue-loader vue-template-compiler -D
  • 在配置文件中条获，新增loader配置項：{test:/.vue$/, use: 'vue-loader'}
• 向外暴露成員的方式
  • node中向外暴露成員的方式：module.exports = {}，使用require導(dǎo)入
  • ES6中：使用export default和export向外暴露成員蒋歌，使用import導(dǎo)入
  • export default {},可以使用任意變量來接收帅掘。而且在同一個js文件中只能使用一次export default來暴露成員變量
  • 在一個js文件中可以同時使用export default和export暴露成員變量
  • 使用export向外暴露的成員，只能使用{}的形式接收堂油，這種形式叫做按需導(dǎo)出修档。
  • export可以向外寶暴露多個成員，同時如果某些成員称诗，我們在import的時候不需要萍悴，則可以不在{}中定義
  • 使用export導(dǎo)出的成員，必須嚴格按照導(dǎo)出時的名稱在{}按需導(dǎo)入
  • 使用export導(dǎo)出的成員寓免，如果就想換個名稱來接收癣诱，可以使用as來啟別名
• 結(jié)合webpack使用vue-router
  • 安裝vue-router: npm install vue-router
  • 導(dǎo)入vue-router: import VueRouter from 'vue-router'
  • 手動安裝vueRouter: Vue.use(VueRouter)
  • 使用：

    var router = new VueRouter({
        routes: [
            //acount goodslist
            { path: '/account',component: account }
            { path: '/goodslist',component: goodslist }
        ]
    })
  
    var vm = new Vue({
        el: '#app',
        render: c => c(app), //render會把el中指定的容器中的內(nèi)容都清空，所以不要把router-view和router-link直接填寫到el中
        router //將路由掛載到vm上
    })
  
    //html中使用組件
  
    <div id="app">
        <router-link to="/account">Account</router-link>
        <router-link to="/goodslist">goodslist</router-link>
  
        <router-view></router-view>
    </div>
  

  • app這個組件是通過VM實例的render函數(shù)袜香，render函數(shù)如果需要渲染組件撕予，渲染出來的組件，只能放到el：'#app'所指定的元素中
  • Account和Goodslist組件蜈首，是通過路由匹配監(jiān)聽到的实抡，所以這兩個組件欠母，只能展示到屬于路由的<router-view></router-view>中去
• 結(jié)合webpack實現(xiàn)children子路由（路由嵌套）
  • vsCode安裝vue插件Vetur和 Vue 2 Snippets

    import login 'sub/login.vue'
    import login 'sub/register.vue'
  
    var router = new VueRouter({
        routes: [
            //acount goodslist
            { path: '/account',component: account,
                children: [
                    {path: 'login',component: login},
                    {path: 'register',component: register}
                ]
             },
            { path: '/goodslist',component: goodslist }
        ]
    })
  

• 組件中style標簽屬性和scoped屬性的介紹
  • 使用

    <style scoped>
        div {
            color:red
        }
    </style>
  

  • 普通的style標簽只支持普通的樣式，如果要啟用scss或less需要為style元素設(shè)置lang屬性

    <style lang="scss" scoped>
        body {
            div{
                color: red
            }
        }
    </style>
  

  • 只要咱們的style標簽吆寨，是在.vue組件中定義的赏淌，那么推薦都為style開啟scoped屬性
• webpack路由嵌套
  • 創(chuàng)建router.js。將所有路由相關(guān)js都移動到這個文件中統(tǒng)一管理
  • 在router.js中添加： export default router
  • 導(dǎo)入路由 import router from './router.js'