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

    a. 對(duì)網(wǎng)頁(yè)性能不友好：要發(fā)起很多的靜態(tài)資源請(qǐng)求吐葱，降低頁(yè)面的加載效率蔫敲，用戶體驗(yàn)差叶圃；
    b. 對(duì)程序開(kāi)發(fā)不友好：前端程序員要處理復(fù)雜的文件之間的依賴關(guān)系接癌；
如何解決上述兩個(gè)問(wèn)題
    a. 對(duì)于 JS 文件 或 CSS 文件耻姥，可以合并和壓縮似忧；小圖片適合轉(zhuǎn) Base64 格式的編碼；
    b. 通過(guò)一些工具严拒，讓工具自動(dòng)維護(hù)文件之間的依賴關(guān)系；

2.webpack?

    Webpack4以上的版本要安裝webpack-cli
    1.什么是webpack：webpack是一個(gè)現(xiàn)代javascript應(yīng)用程序的模塊打包器,分析你的項(xiàng)目結(jié)構(gòu),找到j(luò)avascript模塊以及其他的一些瀏覽器不能直接直接運(yùn)行的拓展語(yǔ)言,并將其轉(zhuǎn)換和打包為合適的格式工瀏覽器使用,把瀏覽器不能識(shí)別的文件轉(zhuǎn)換成瀏覽器能識(shí)別的文件,webpack 是前端項(xiàng)目的構(gòu)建工具；前端的項(xiàng)目椅贱，都是基于 webpack 進(jìn)行 構(gòu)建和運(yùn)行的睡雇；
    2.什么項(xiàng)目適合使用webpack：
        webpack 非常適合與單頁(yè)面應(yīng)用程序結(jié)合使用；
        不太適合與多頁(yè)面的普通網(wǎng)站結(jié)合使用；
    3.為什么要使用webpack: 
        如果項(xiàng)目使用 webpack 進(jìn)行構(gòu)建，我們可以書(shū)寫(xiě)高級(jí)的ES代碼，且不用考慮兼容性免姿；
        webpack 能夠優(yōu)化項(xiàng)目的性能；
        基于webpack肢础，程序員可以把 自己的開(kāi)發(fā)重心，放到功能上敛瓷；
        webpack把瀏覽器不能識(shí)別的文件進(jìn)行打包合并成瀏覽器不能識(shí)別的文件
        1.把多個(gè)文件合并成一個(gè)文件,使用,打包的是一個(gè)入口文件,入口文件已經(jīng)引入了好多文件
        2.把瀏覽器不能識(shí)別的文件轉(zhuǎn)換成瀏覽器能識(shí)別的文件,

3.webpack-cli

使用命令：webpack 輸入文件路徑 打包后文件路徑將一個(gè)文件打包成另外一個(gè)文件

4.在項(xiàng)目中安裝和配置webpack

    webpack 就是前端的一個(gè)工具叁巨，這個(gè)工具，已經(jīng)被托管到了NPM官網(wǎng)上呐籽；
    a. 新建一個(gè)項(xiàng)目的空白目錄锋勺，并在在終端中，cd到項(xiàng)目的根目錄狡蝶，執(zhí)行npm init -y 初始化項(xiàng)目
    b. 裝包：運(yùn)行 cnpm i webpack webpack-cli -D 安裝項(xiàng)目構(gòu)建所需要的 webpack
    c. 打開(kāi) package.json文件庶橱，在 scripts 節(jié)點(diǎn)中，新增一個(gè) dev 的節(jié)點(diǎn)：

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

    d. 在項(xiàng)目根目錄中贪惹，新建一個(gè) webpack.config.js 配置文件苏章，內(nèi)容如下：

    // 這是 使用 Node 語(yǔ)法， 向外導(dǎo)出一個(gè) 配置對(duì)象

   module.exports = {
          mode: 'production' // production    development
     }
    e. 在項(xiàng)目根目錄中，新增一個(gè) src 目錄枫绅，并泉孩，在 src 目錄中，新建一個(gè) index.js 文件并淋，作為 webpack 構(gòu)建的入口寓搬；
    f. 在終端中，直接運(yùn)行 npm run dev 啟動(dòng)webpack進(jìn)行項(xiàng)目構(gòu)建县耽；

思路:當(dāng)在命令行輸入npm run dev,webpack就被run 起來(lái)了,它會(huì)先檢查有沒(méi)有webpack.config.js文件,如果有,就去執(zhí)行這個(gè)文件,,文件里面有一個(gè)對(duì)象,根據(jù)這個(gè)配置文件進(jìn)行相應(yīng)的打包,生成dist文件,還有下面的main.js文件
    //這是使用node語(yǔ)法,向外導(dǎo)出一個(gè)配置對(duì)象
    module.exports={
    mode:"production"http://生產(chǎn)環(huán)境,運(yùn)行環(huán)境
    //development開(kāi)發(fā)環(huán)境,不會(huì)壓縮代碼
    }
注意:webpack從4.x版本開(kāi)始,提供了一些默認(rèn)的約定:
    1.如果程序員在webpack.config.js這個(gè)配置文件中,沒(méi)有提供entry入口文件,則webpack默認(rèn)去打包src目錄下的index.js文件
    2.如果程序員沒(méi)有在配置文件,提供output輸入選項(xiàng),則webpack默認(rèn),會(huì)把打包構(gòu)建好的代碼文件,放到dist目錄下的main.js文件中

1.需要對(duì)src下面的哪個(gè)文件進(jìn)行打包,就在webpack.config.js文件中使用entry指定打包的入口文件,
2.要把打包好的文件放到哪里,就要在webpack.config.js文件中使用output輸出的配置對(duì)象,并指定輸出的文件名稱

5.webpack-config

1.先創(chuàng)建一個(gè)webpack-config的文件,在里面配置webpack.config.js和index.html平級(jí)
2.運(yùn)行webpack,就會(huì)生成一個(gè)dist文件,dist文件里面有一個(gè)bundle.js文件,這就是打包后的文件
    var path = require('path')
    
    module.exports = {
          // 入口文件配置
          entry: "./src/app.js",
        
          // 出口文件配置項(xiàng)
          output: {
            // 輸出的路徑句喷，webpack2起就規(guī)定必須是絕對(duì)路徑
            path: path.join(__dirname, 'dist'),
            // 輸出文件名字
            filename: "bundle.js"
          }
    }
3.在inden.html文件中引入bundle.js
    
4.在命令行運(yùn)行webpack就可以了,,打開(kāi)瀏覽器,,修改一次值,就要運(yùn)行一次webpack再打開(kāi)瀏覽器

6.webpack-dev-server
webpack-dev-server作用:實(shí)時(shí)監(jiān)聽(tīng)代碼的改變,實(shí)時(shí)打包構(gòu)建,自動(dòng)幫我們打包并刷新瀏覽器,但是,它打包好的main.js并不會(huì)直接存放到物理磁盤(pán) src->main.js中,而是托管到了內(nèi)存中,大家可以認(rèn)為,在項(xiàng)目根目錄中,有一個(gè)看不見(jiàn)的main.js文件

1. 運(yùn)行：npm init -y
2. 運(yùn)行：npm i webpack-dev-server@2.9.7 webpack@3.11.0 -D
      var path = require('path')
    ?
     module.exports = {
           // 入口文件配置
           entry: "./src/app.js",
        ?
           // 輸出配置
           output: {
             // 輸出的路徑
             path: path.join(__dirname, 'dist'),
             // 靜態(tài)資源在服務(wù)器上運(yùn)行時(shí)的訪問(wèn)路徑，可以直接http://localhost:8080/dist/bundle.js訪問(wèn)到服務(wù)器中的bundle.js文件
             publicPath: '/dist',
             // 輸出文件名字
             filename: "bundle.js"
           }
    }
3. index.html中修改 <script src="/dist/bundle.js"></script>
4. 運(yùn)行：webpack-dev-server
5. 運(yùn)行：webpack-dev-server --inline(支持hash#值) --hot --open --port 8090

6. 配置script："dev": "webpack-dev-server --inline --hot --open --port 8090"配置腳本
7. npm run dev跑配置的腳本,以后再修改值,保存后直接刷新瀏覽器,不用再運(yùn)行命令

7.webpack-css
Css-loader可以解析js入口文件中的css文件

1.安裝npm install css-loader style-loader --save-dev
2.在根目錄下創(chuàng)建一個(gè)styles文件夾,在這個(gè)文件里面創(chuàng)建a.css文件,并在a.css文件寫(xiě)一點(diǎn)樣式,在入口文件app.js中引入a.css文件
    require("../styles/a.css")
2.在webpack.config.js文件中加入模塊打包器
        
          module: { //模塊打包器
            rules: [
           8   // 配置的是用來(lái)解析.css文件的loader(style-loader和css-loader)
              {
                // 1.0 用正則匹配當(dāng)前訪問(wèn)的文件的后綴名是  .css
                test: /\.css$/,
                use: ['style-loader', 'css-loader'] //webpack底層調(diào)用這些包的順序是從右到左
              }
            ]
          }

8.webpack-less&webpack-sass

1.安裝npm install less less-loader sass-loader node-sass --save-dev
2.在根目錄下的styles文件夾里面創(chuàng)建b.less和c.scss文件,這兩個(gè)文件都寫(xiě)一些樣式,在入口文件app.js中引入b.less和c.scss文件
    require("../styles/b.less")
    require("../styles/c.scss")
3.在webpack.config.js文件的module的rules中加入模塊打包器
    {
        test: /\.less$/,
        use: [{
            loader: 'style-loader'
        }, {
            loader: 'css-loader'
        }, {
            loader: 'less-loader'
        }]
    },
    
    {
        test: /\.scss$/,
        use: [{
            loader: 'style-loader'
        }, {
            loader: 'css-loader'
        }, {
            loader: 'sass-loader'
        }]
    }

9.webpack-圖片&字體

1.圖片
    1.安裝npm install file-loader url-loader --save-dev
    2.在跟目錄下創(chuàng)建img文件,里面放好圖片
    3.在a.css文件中使用圖片


        之前引好的文件
        
        
    4.webpack.config.js文件的module的rules中加入模塊打包器
        
            {
               test: /\.(png|jpg|gif)/,
               use: [{
                   loader: 'url-loader',//默認(rèn)以base64處理圖片
                   options: {
                     // limit表示如果圖片大于50000byte兔毙，就以路徑形式展示file-loader唾琼，//小于的話就用base64格式展示,url-loader
                       limit: 50000
                   }
               }]
            }
2.字體
    1.在icomoon上下載好字體包,解壓,將fonts文件夾放在根目錄下,將style.css文件放在styles文件下
                
                                
    
    2.在styles文件下的style.css文件中在設(shè)置如下
        
        
    3.在字體圖片頁(yè)面中,點(diǎn)擊getcode會(huì)出現(xiàn)代碼,將代碼粘貼至index.html文件
        
        
        
        
        
        
        
    4.在src文件下的app.js文件中,引入style.css文件
        
    5.在webpack.config.js文件的module的rules的圖片和字體圖標(biāo)部分,在test中加入fonts中文件的后綴名
        
    6.運(yùn)行npm run dev命令就可以了

10.webpack-html
在html中自動(dòng)引入打包好的js文件,不用在Html中引入,如果打包的js文件名改變,輸出文件output中的filename把打包好的js文件名改變,也會(huì)自動(dòng)生成改變,不用手動(dòng)改

1. 注意需要注釋掉publicPath，不然會(huì)沖突
    
2.在webpack.config.js文件中引入插件
    var HtmlWebpackPlugin = require('html-webpack-plugin')
    
3.在webpack.config.js文件的output中寫(xiě)入
    根據(jù)template.html生成一個(gè)index.html文件,在內(nèi)存中,所以看不到index.html
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'template.html'
        })
    ]
    
4.將index.html重命名為template.html
5.在template.html中刪除引入的打包好的js文件'
    
    
    
6.在template.html的title中,添加<%= htmlWebpackPlugin.options.title %>
    
7.在webpack.config.js文件中的pligins中設(shè)置title,會(huì)出現(xiàn)下圖效果

11.webpack-babel
處理ES6語(yǔ)法瀏覽器不能解析的問(wèn)題

1.在src的calc.js的文件中寫(xiě)ES6語(yǔ)法代碼
    
2.在src文件下的app.js中引入calc.js文件
    
3.在webpack.config.js文件中的module中rules中引入,刪掉options的代碼
    
4.在根目錄下 新建.babelrc文件,寫(xiě)入

12.webpack-vue,結(jié)合webpack處理單文件組件

1.從第5天拷貝webpack-babel,,文件名改為webpack-vue
    
    
    
2.安裝配置webpack相關(guān)loader
    1. 已經(jīng)從第5天的node_modules中全部拷過(guò)來(lái),這里面所有包都有,有一個(gè)老師發(fā)的包,全部包都有,都下載好了,在老師發(fā)的資料里面
    2. npm install vue --save
    3. npm install vue-loader vue-template-compiler --save-dev
    
3.創(chuàng)建一個(gè)components文件夾,在這個(gè)文件夾中創(chuàng)建App.vue文件創(chuàng)建vue組件
    
    <!-- App.vue -->
        <template>
              <div>{{msg}}</div>
            </template>
        <script>
            export default {
              data () {
                return {
                  msg: 'hello world'
                }
              }
            }
        </script>
        <style>
              div {
                color: red;
              }
        </style>
    
4.在根目錄下創(chuàng)建app.js文件,用來(lái)引入App.vue組件,并將組件渲染到頁(yè)面
    
        // app.js
        import Vue from 'vue'
        import App from './App.vue'
        
        new Vue({
            el: '#app',
            render: h=> h(App)
        })
    

5.在template.html文件中刪除之前的代碼,寫(xiě)入以下代碼
    
6.在webpack.config.js文件的module的rules中寫(xiě)入以下代碼,module用來(lái)掛載模塊
    
    
    
7.修改webpack.config.js文件中的入口文件
    
8.webpack.config.js完整代碼
    
    var path=require("path")
    var HtmlWebpackPlugin = require('html-webpack-plugin')
    module.exports={
    //配置入口文件
    entry:'./app.js',
    //配置輸出文件
    output:{
    path:path.join(__dirname,"dist"),
    // 靜態(tài)資源在服務(wù)器上運(yùn)行時(shí)的訪問(wèn)路徑澎剥，可以直接http://localhost:8080/dist/bundle.js
    //訪問(wèn)到服務(wù)器中的bundle.js文件
    // publicPath: '/dist',
    //表示輸出文件的名字
    filename:'bundle.js'
    },
    module: {
    rules: [
    // 配置的是用來(lái)解析.css文件的loader(style-loader和css-loader)
    {
    // 1.0 用正則匹配當(dāng)前訪問(wèn)的文件的后綴名是 .css
    test: /\.css$/,
    use: ['style-loader', 'css-loader'] //webpack底層調(diào)用這些包的順序是從右到左
    },
    {
    test: /\.less$/,
    use: [{
    loader: 'style-loader'
    }, {
    loader: 'css-loader'
    }, {
    loader: 'less-loader'
    }]
    },
    {
    test: /\.scss$/,
    use: [{
    loader: 'style-loader'
    }, {
    loader: 'css-loader'
    }, {
    loader: 'sass-loader'
    }]
    },
    {
    test: /\.(png|jpg|gif|eot|svg|ttf|woff)/,
    use: [{
    loader: 'url-loader',//默認(rèn)以base64處理圖片
    options: {
    // limit表示如果圖片大于50000byte父叙，就以路徑形式展示file-loader，
    //小于的話就用base64格式展示,url-loader
    limit: 50000
    }
    }]
    },
    {
    test: /\.js$/,
    // Webpack2建議盡量避免exclude肴裙，更傾向于使用include
    // exclude: /(node_modules)/, // node_modules下面的.js文件會(huì)被排除
    include: [path.resolve(__dirname, 'src')],
    use: {
    loader: 'babel-loader',
    // options里面的東西可以放到.babelrc文件中去
    // options: {
    // presets: ['env']
    // }
    }
    },
    {
    test: /\.vue$/,
    loader: 'vue-loader'
    }
    ]
    }, 
    plugins: [
    new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'template.html',
    title:'html-webpack-plugin'
    })
    ]
    }

13.webpack-router

1.安裝路由npm install vue-router --save
2.在components文件中新建Login.vue文件,在文件中寫(xiě)入模板,樣式
    
3.在app.js中設(shè)置路由
    1.思路步驟
        1.引入vue-router路由
        2.啟用路由插件
        3.創(chuàng)建路由對(duì)象,配置路由規(guī)則
        4.引入路由組件,在components的Login.vue文件中
        5.注入router路由對(duì)象,掛載路由
        6.給組件挖坑,在在components的App.vue文件中通過(guò)router-view挖坑,路徑匹配到的組件都會(huì)渲染在這里,會(huì)隨path路徑的變化,顯示不同的組件
            
        7.在Login.vue文件中的樣式style上設(shè)置scoped讓樣式變?yōu)榻M件內(nèi)部使用的局部樣式
                
    2.代碼
        
    
        
        import Vue from "vue"
        import App from "./components/App.vue"
        //4.引入路由組件,在components的Login.vue文件中
        import Login from "./components/Login.vue"
        //1.引入vue-router路由
        import VueRouter from "vue-router"
        //2.啟用路由插件
        Vue.use(VueRouter)
        //3.創(chuàng)建路由對(duì)象,配置路由規(guī)則
        var router=new VueRouter({
        routes:[
        {name:"Login",path:"/login",component:Login}
        ]
        })
        new Vue({
        el:"#app",
        //render將組建渲染到頁(yè)面中去
        // render:function(h){
        // //h表示要渲染的組件
        // return h(App)
        // }
        //5.注入router路由對(duì)象,掛載路由
        router,
        render:h => h(App)
        })