這可能是webpack最實用的文章了。抓緊上車。（二）

1.5. html-webpack-plugin

能夠將index.html自動拷貝到dist目錄，並在拷貝後的 html檔案中引入bundle.js檔案
下載npm包: npm install html-webpack-plugin --save-dev

修改 webpack.config.js檔案

     // 新增的程式碼
     const htmlPlugin = require('html-webpack-plugin')

     const path = require('path')
     const obj = {
       entry: {
         app 
: './app.js'
       },
       output: {
         path: path.join(__dirname, './dist'),
         filename: 'bundle.js'
       },
       module:{
               loaders:[
                  {
                    test: /\.less$/,
                    loader: 'style-loader!css-loader!less-loader'
                  }, 

                  {
                    // 即匹配被引入到js中的圖片
                    // 也匹配被引入到js中的css檔案中使用的圖片
                    test: /\.(jpg|jpeg|bmp|gif|png)$/,
                    // file-loader用於將 test規則匹配到的檔案與js合併在一起。
                    loader: 'file-loader'
                  }
                ]
        }, 


        // 新增的程式碼
        plugins:[
        new htmlPlugin({
            // 以./index.html為模板
            template: './index.html',
            // 生成一個為為index.html檔案到dist目錄
            // 並且在生成的檔案中引用bundle.js檔案
            filename: 'index.html'
            })]
     }
     module.exports = obj

刪除dist目錄，一會再重新生成

開啟cmd 執行 webpack

在瀏覽器中開啟重新生成後 dist目錄裡的index.html檢視效果

1.6. 整理一下檔案結構

目前來說，檔案結構太亂,我們稍微整理一下(這不是必需的,只是為了看起來舒服一些)

整理後的檔案結構圖:

這一步,並沒有做太多的事情, 僅僅是通過資料夾將不同型別的檔案做了分類
不過要注意，由於調整目標結構，所有程式碼中的路徑也需要做些許修改

從webpack.config.js開始將app: './app.js' 改為 app: './src/js/app.js'
將template: './index.html' 改為 template: './src/index.html' 然後是app.js
將require('./style.less') 改為 require('../less/style.less')
最後是style.less
將

    .dy {
      background: url(./duoyun.png);
    }

    .qg {
      background: url(./qing.png);
    }

    .qw {
      background: url(./qiwen.png);
    }

    .xue {
      background: url(./xue.png);
    }

    .yu {
      background: url(./yu.png);
    }

    .mai {
      background: url(./mai.png);
    }

改為:

    .dy {
      background: url(../img/duoyun.png);
    }

    .qg {
      background: url(../img/qing.png);
    }

    .qw {
      background: url(../img/qiwen.png);
    }

    .xue {
      background: url(../img/xue.png);
    }

    .yu {
      background: url(../img/yu.png);
    }

    .mai {
      background: url(../img/mai.png);
    }

記得刪除./src/index.html中對bundle.js引用的程式碼最後重新打包,開啟index.html檢視效果由於結果還是和之前一樣，就不放上截圖了!

在寫程式碼裡，如果引入的css檔案中使用了圖片，就需要在webpack.config.js中使用file-loader來處理。那麼如果在css中引入了字型檔案呢，是否也需要(是否也能)使用file-loader 來處理呢？？

1.7. 處理css中的字型檔案

js中引入的css檔案中，如果引用字型檔案，也需要使用file-loader來處理通過npm 下載 bootstrap，引入它的樣式，用於演示！
npm install bootstrap --save

修改 ./src/index.html , 新增一個bootstrap風格的按鈕

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>url-loader演示</title>
    </head>
    <body>
      <button class="btn btn-success">哈哈</button>
      <div class="box">
        <ul>
          <li><i class="icon dy"></i>多雲</li>
          <li><i class="icon qg"></i>晴</li>
          <li><i class="icon qw"></i>氣溫</li>
          <li><i class="icon xue"></i>雪</li>
          <li><i class="icon yu"></i>雨</li>
          <li><i class="icon mai"></i>霾</li>
        </ul>
      </div>
    </body>
    </html>

修改./js/app.js,在程式碼引入bootstrap的樣式

    // 這裡不加./字首的話，會自動到`node_modules`目錄中尋找 bootstrap
    require('bootstrap/css/bootstrap.css')
    require('../less/style.less')
    console.log('我是中國人，我愛自己的祖國!')
    console.log('我是中國人，我愛自己的祖國!')

開啟cmd執行webpack進行打包,發現報錯:

需要修改webpack.config.js 新增一些程式碼

    // 新增的程式碼---------
    const htmlPlugin = require('html-webpack-plugin')

    const path = require('path')
    const obj = {
      entry: {
        app: './src/js/app.js'
      },
      output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
      },
      module: {
        loaders: [{
          test: /\.less$/,
          loader: 'style-loader!css-loader!less-loader'
        },
        {
          // 即匹配被引入到js中的圖片
          // 也匹配被引入到js中的css檔案中使用的圖片
          test: /\.(jpg|jpeg|bmp|gif|png)$/,
          // file-loader用於將 test規則匹配到的檔案與js合併在一起。
          loader: 'file-loader'
        },

        // 新增的程式碼start--處理css檔案和css時引用的字型檔案================
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader'
        },
        {
          test:/\.(svg|eot|ttf|woff|woff2)$/,
          loader: 'file-loader'
        }
        // 新增的程式碼end--處理css檔案和css時引用的字型檔案================

        ]
      },
      plugins: [
        new htmlPlugin({
          // 以./index.html為模板
          template: './src/index.html',
          // 生成一個為為index.html檔案到dist目錄
          // 並且在生成的檔案中引用bundle.js檔案
          filename: 'index.html'
        })
      ]
    }
    module.exports = obj

開啟cmd 執行 webpack 進行打包

在瀏覽器中開啟dist目錄的index.html檢視效果

此時,所有的在app.js中被引入的資源(字型,樣式,圖片等), 都被生成到了dist目錄,只不過看起來感覺好像很亂似的，但是並不影響程式碼的執行, 對於瀏覽器,程式碼的結構並不影響執行，只需要在開發時的目錄結構是清晰的就可以了。

1.7.1. 調整生成的dist目錄檔案結構

當然，我們也是可以做些小的調整，來讓生成的程式碼的目錄結構清晰些的修改webpack.config.js中的程式碼 file-loader部分：

    {
      test: /\.(jpg|jpeg|bmp|gif|png)$/,
      // ?name=img/[hash].[ext]意思是:
      // 圖片會被生成到 ./dist/img目錄下，這裡的dist是obj.output.path的值
      // [hash] 表示是根據檔案生成的唯一標識(字串)
      // [ext]  表示原檔案的的副檔名
      loader: 'file-loader?name=img/[hash].[ext]'
    },
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    },
    {
      test:/\.(svg|eot|ttf|woff|woff2)$/,
      // 同上
      loader: 'file-loader?name=fonts/[hash].[ext]'
    }

刪除dist目錄,在cmd中重新執行webpack命令

下面是重新打包後生成的dist目錄的檔案結構

看起來，結構已經清晰好多好了。

1.7.2. 再次調整生成的dist目錄檔案結構

還可以進一步處理，讓檔名能夠和原來一樣，也能避免瀏覽器對圖片和字型檔案快取快取
只需要對前面的webpack.config.js裡的file-loader部分做進一步修改修改如下:

    {
      // 即匹配被引入到js中的圖片
      // 也匹配被引入到js中的css檔案中使用的圖片
      test: /\.(jpg|jpeg|bmp|gif|png)$/,
      // file-loader用於將 test規則匹配到的檔案與js合併在一起。

      // ?name=img/[hash].[ext]意思是:
      // 圖片會被生成到 ./dist/img目錄下，這裡的dist是obj.output.path的值
      // [hash] 表示是根據檔案生成的唯一標識(字串)
      // [ext]  表示原檔案的的副檔名
      // [name] 這裡的[name]表示的是原檔名,表明生成到dist目錄的
      // 檔案的檔名，和src中原來檔案的檔名相同
      // 例如:原來檔案是: ./src/img/qing.png，就會生成到 ./dist/img/qing.png
      // 其實就是把檔案拷貝過去了
      // 最後的?[hash]表示會在css中使用圖片的位置，新增一個唯標識:
      // 例如:原來css中程式碼是: background:url('../img/qing.png')
      // 這裡加上?[hash]就會變為: 
      // background:url('../img/qing.png?唯一標識')
      // 這裡的唯一標識是file-loader計算生成，
      // 只要檔案內容不變,唯一標識就不會變
      loader: 'file-loader?name=img/[name].[ext]?[hash]'
    },
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    },
    {
      test:/\.(svg|eot|ttf|woff|woff2)$/,
      // 同上
      loader: 'file-loader?name=fonts/[name].[ext]?[hash]'
    }

然後刪除dist目錄，開啟cmd,重新執行webpack命令
執行完成之後的dist目錄結構如下:

這樣看起來就清晰多了!
在瀏覽器中開啟 dist目錄的index.html檢視效果

還可以進一步優化，將一些圖片轉換為base64編碼的形式，這樣可以減少網路請求

1.8. 將小圖片轉換為base64編碼的形式

還可以進一步優化，將一些圖片轉換為base64編碼的形式，這樣可以減少網路請求
什麼？還不清楚什麼是圖片的base64編碼? 可以寫一個文章來介紹需要用到url-loader

1.9. 將es6語法轉換為es5語法

import

1.10. webpack 命令引數補充

--progress
在打包裡可以看到進度條: webpack --progress
-p
壓縮程式碼: webpack -p
--watch/-w
實時監視，監視會被打包的檔案的變化。一旦變化，就自動重新打包。

以上引數可以組合使用同

1.11. webpack-dev-server

相關推薦

這可能是webpack最實用的文章了。抓緊上車。（二）

1.5. html-webpack-plugin 能夠將index.html自動拷貝到dist目錄，並在拷貝後的 html檔案中引入bundle.js檔案下載npm包: npm install

這可能是最早的RxDart使用入門教程。。。

原文地址：RxDart: Magical transformations of Streams （國際慣例，英文好的請去看原文，我的翻譯可能會省去一些東西，同時加入一些自己的想法，便於自己理解。與其說是一篇翻譯，不如說是一份自己的學習筆記。）在這篇文章中，我們將來談一

這篇部落格記錄廖雪峰python教程的習題（二）

函數語言程式設計高階函式—–sorted 首先我們需要明確一點就是sorted()函式是作用於一個列表，對列表中的每一項元素進行排序，因為sorted本身的作用就是對元素排序，如果後面還有key=function ,則是先對列表中的每一項元素按照fun

【webpack系列】從零搭建 webpack4+react 腳手架（二）

html檔案如何也同步到dist目錄？bundle.js檔案修改了，萬一被瀏覽器快取了怎麼辦？如何為匯出的檔案加md5？如何把js引用自動新增到html？非業務程式碼和業務程式碼如何分開打包？如何搭建開發環境？如何實現開發環境的熱更新？在上一節我們已經搭建了一個最基本的webpack環境，

月薪上萬，卻依然不被世界所理解。程式設計師訪談（二）

點選上方關注我們，讓小care關愛你！有一個“月入五萬卻像月入五千樣子”的群體，以“收入高”、“腦回路簡單”、“一成不變”等

我終於弄懂了Python的裝飾器（二）

**此係列文件：** [1. 我終於弄懂了Python的裝飾器（一）](https://www.bigyoung.cn/posts/91/) [2. 我終於弄懂了Python的裝飾器（二）](https://www.bigyoung.cn/posts/92/) [3. 我終於弄懂了Python的裝飾器（

這可能是最簡單實現自定義註解的文章了

public @interface Log { } 它的關鍵字和介面定義方式差不多，只不過前面多了一個@符號註解的應用註解的應用方式很簡單在類或者方法的上方加一@xx就好了，具體的後面講 public class Controller { @Log public void test()

這可能是最簡明扼要的 js事件冒泡機制+阻止默認事件講解了

不支持自身 eve font def back 綁定向上版本哎 js事件冒泡機制和阻止冒泡阻止默認行為好像永遠也整不清楚，記了忘忘了記。。。醉了這篇文章寫完以後下次再忘記就呼自己一巴掌，忘一次一巴掌　　首先要明白兩個概念——事件和事件流　　事件指的

rabbitmq2-這可能是最全的rabbitmq概覽了

在學習一個技術的時候，首先想到的應該是應用場景，然後在對比技術和技術選型的時候應該結合自己的業務，再結合每一個技術的特點進行技術的選擇，這篇博文就詳細的描述一下rabbitmq的特性一、rabbitmq的總體模型圖 1、一些名詞解釋：生產者（P）：

這可能是最全面的CSS基礎佈局文章

前言這是一篇基礎CSS佈局的內容，可能內容比較的簡單。但是很適合查缺補漏的閱讀。這篇文章來自於網際網路（掘金：Sweet_KK）。我簡單的自己跑了一遍，添加了一些自己的看法，刪了一些個人感覺不重要的，重新排版了一下。當然，如果原作者感覺不妥，私信就刪

[Android開源]：EasyGuideLayer: 這可能是最簡單、靈活、強大的頁面蒙層元件了！

顧名思義，EasyGuideLayer是用於進行Android頁面蒙層引導的元件。特性鏈式呼叫。呼叫邏輯清晰直觀支援同時設定多個引導層支援高亮區域的自定義繪製支援高亮區域點選監聽支援指定任意View設定蒙層引導支援進行蒙層展示、隱藏事件監聽支援直接使用draw

這可能是最囉嗦的Python爬蟲入門教程了 5-100

重要的事情說100遍：爬蟲入門，爬蟲入門，爬蟲入門，爬蟲入門，爬蟲入門，爬蟲入門，爬蟲入門，爬蟲入門爬蟲入門，爬蟲入門，爬蟲入門，爬蟲入門，爬蟲入門，爬蟲入門，爬蟲入門，爬蟲入門爬蟲入門，爬蟲入門，爬蟲入門，爬蟲入門，爬蟲入門，爬蟲入門，爬蟲入門，爬蟲入門獲取

這可能是最囉嗦的Python爬蟲入門教程了 6-100

1. 簡介國慶假日結束了，新的工作又開始了，今天我們繼續爬取一個網站，這個網站為 http://image.fengniao.com/ ，蜂鳥一個攝影大牛聚集的地方，本教程請用來學習，不要用於商業目的，不出意外，蜂鳥是有版權保護的網站。 2. 網站分析

這可能是最囉嗦的Python爬蟲入門教程了 8-100

囉嗦兩句前幾天的教程內容量都比較大，今天寫一個相對簡單的，爬取的還是蜂鳥，依舊採用aiohttp 希望你喜歡爬取頁面https://tu.fengniao.com/15/ 本篇教程還是基於學習的目

這可能是最全的Redis叢集方案介紹了

來源　　由於Redis出眾的效能，其在眾多的移動網際網路企業中得到廣泛的應用。Redis在3.0版本前只支援單例項模式，雖然現在的伺服器記憶體可以到100GB、200GB的規模，但是單例項模式限制了Redis沒法滿足業務的需求（例如新浪微博就曾經用Redis儲存了超過

錯過這篇文章，可能你這輩子不懂什麼叫傅立葉變換了（二）

作者：Heinrich，上一篇文章發出來之後，為了掐死我，大家真是很下工夫啊，有拿給姐姐看的，有拿給妹妹看的，還有拿給女朋友看的，就是為了聽到一句“完全看不懂啊”。幸虧我留了個心眼，不然就真的像標題配圖那樣了。我的文章題目是，如果看了這篇文章你“還”不懂就過來掐死我

這可能是最精簡的Android6.0執行時許可權處理，70行程式碼的工具類。附:各種許可權詳細處理

0x00:前言對於Android6.0執行時許可權的處理方式網上有很多，包括註解，RxJava等等。一直沒有正面提到我關心的問題--如果我不在Activity或者Fragment裡面，需要執行時許可權該怎麼去做？導致我開始一直以為執行時許可權的處理必需要在Activity

這可能是最全的Android:Process （程序）講解了

官方是這樣描述的： Tools for managing OS processes. 管理作業系統程序的工具類。下面就來詳細介紹下關於Process的點滴：概述預設情況下，同一應用的所有元件均在相同的程序中執行，且大多數應用都不會改變這一點。

這可能是最詳細的一線大廠Mysql面試題詳解了

1、MySQL的複製原理以及流程基本原理流程，3個執行緒以及之間的關聯；主：binlog執行緒——記錄下所有改變了資料庫資

這可能是最容易入門的socket教程了

前言：　　如今，網路程式設計已然成為了一個後端開發工程師需要具備的核心技能之一。因此，該部落格力求提供最簡單、通俗的描述方式，來描繪網路程式設計中常見的知識點，同時附帶程式碼示例，後期會加上具體的抓包分析，實際專案、框架案例，希望可以和大家共同探索網路世界。什麼是socket？　　在計算機通訊領域，