摘要：入門在逐漸成為一個成熟的青年路上，一直備受大家青睞，然而還在不斷的健身，希望以最好的姿態呈現給各位，如今他已經。比起又強化骨骼，變得更堅實。

webpack在逐漸成為一個成熟的青年路上，一直備受大家青睞，
然而還在不斷的健身，希望以最好的姿態呈現給各位，如今他已經v3。
比起1 、2又強化骨骼，變得更堅實。    

官方給出：

Webpack 是前端資源模塊化管理和打包工具
他可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源
還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。

個人理解：

首先，webpack其實就是前端工程的模塊化打包工具
他可以把復雜的程序細化為細小的文件，然后在讓各個模塊進行加載
其次，天生支持commenjs，因為他就是在nodejs下開發的，但也支持AMD/CMD，方便舊代碼的遷移
然后，他可以使得前端開發便捷，可以代替gulp/grunt(接下來會寫到)，
比如打包壓縮、啟動server模塊熱替換、編譯sass less 以及css的抽離、
mock數據、版本控制、devtool源碼映射、以及開發、生產環境的切換
最后，webpack的擴展性強，插件機制完善，有效提高開發效率。

入口 Entry
頁面中的入口文件，entry的值有三種類型：字符串、數組、對象

   1、字符串
       entry: "./app.js"
   2、數組
       當存在多chrunks時，可以采用數組的形式，比如第三方庫bootstrap
       {
         entry: ["./src/index.js", "./vendors/bootstrap.js"],
         output: {
           path: "./dist",
           filename: "index.js"
         }
       }
       會被打包到index.js中，但是數組的最后一個元素會被export
   3、對象
       設置多個打包的文件
           {   
               entry: {   
                   index: "./src/index.js",  
                   header: "./src/header.js"   
               } 
           }  

出口 Output

  指生成的文件要輸出的目錄， path、 filename
   output : {
       filename: "[name].js",
       path :__dirname + "/dev/scripts" //必須是絕對路徑 __dirname 指的是當前config.js路徑
   }
   如果加版本號的話
    filename ： "[name]@[chunk:6hash].js"
    注：版本號的配置有兩種方法，我會多帶帶寫一篇文章來介紹。。。

加載器 Loader
webpack本身只理解JavaScript，sass、css、html、jpg等文件需要loader進行處理，轉換為模塊
常用的有:
babel-loader

   用來編譯es6+ 
   1、下載：npm i babel-core babel-loader babel-preset-env -D
   注意以前用的是：npm i babel-core babel-loader babel-preset-es2015 babel-preset-state-0
   2、需要在項目根目錄創建.babelrc用來預設es6
   {
       "presets" : ["babel-preset-env"]
   }
   eg：
   3、{
       test: /.js$/,
       exclude : /node_modules/,排除不必要的js解析
       use : [
           {
               loader : "babel-loader",//解析es6解析具體通過babel-core
           }
       ]
   },
   

sass-loader、css-loader、style-loader
下載：npm i css-loader style-loader -D //css loader

    npm i sass-loader node-sass -D  //編譯成css
     eg:
     // 加載css
     {
       test: /.css$/,
       use: [
         { loader: "style-loader" },
         { loader: "css-loader" },//執行的時候從下往上執行
        {loader : "sass-loader"}
       ]
     }
     sass-loader是編譯 sass文件為css文件，css-loader是編譯css文件為字符串，
     最后 style-loader把css字符串打入html文件的style標簽里，讓頁面能加載樣式。

url-loader
下載：npm i url-loader -D

   圖片、字體圖標加載器，是對file-loader的上層封裝,
   支持base64編碼。傳入的size（也有的寫limit) 參數是告訴它圖片如果不大于 25KB 的話要自動在它從屬的 css 文件中轉成 BASE64 字符串。
file-loader: 
下載：npm i file-loader -D 
    加載一些 媒體文件 字體圖標等
    // 加載圖片
     {
       test: /.(png|jpe?g|gif|svg)(?.*)?$/,
       loader: "url-loader",
       options: {
         limit: 1000,
         name: "media/images/[name].[hash:7].[ext]"
       }
     },

     // 加載媒體文件
     {
       test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
       loader: "url-loader",
       options: {
         limit: 10000,
         name: "media/mp4/[name].[hash:7].[ext]"
       }
     },

     // 加載iconfont
     {
       test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
       loader: "url-loader",
       options: {
         limit: 10000,
         name: "media/iconfont/[name].[hash:7].[ext]"
       }
     }

vue-loader

 下載：npm i vue-loader -D    加載vue組件

postcss-loader

   css3加瀏覽器前綴

插件 Plugins

   插件可以幫助webpack進行輸出文文件

常用的插件有：
(1) html-webpack-plugin 它會在src目錄下自動生成一個index.html

   配置webpack.config.js中 
   var HtmlWebpackPlugin = require("html-webpack-plugin")
   在plugins : {
       //編譯html
       new HtmlWebpackPlugin({
           template : "./src/index.html", //源文件
           filename : "index.html"http://目標文件
       })
   }
   注：webpack怎么引入第三方的庫 例如jquery
   entry: {
       page: "path/to/page.js",
       jquery: "node_modules/jquery/dist/jquery.min.js"
   }
   new HtmlWebpackPlugin({
       filename: "index.html",
       template: "index.html",
       inject: true,
       chunks: ["jquery", "page"] // 按照先后順序插入script標簽
    })

(2) autoprefixer 自動檢測各個瀏覽器加個內核前綴的插件

  安裝：cnpm install --save-dev autoprefixer postcss-loader
  配置：
  var autoprefixer = require("autoprefixer");
   loaders:[
       {
         test:/.css$/,
         //在原有基礎上加上一個postcss的loader就可以了
         loaders:["style-loader","css-loader","postcss-loader"]
         }
     ]
 },
 postcss:[autoprefixer({browsers:["last 2 versions"]})]

(3) extract-text-webpack-plugin 將app.js里的css抽離成.css

 裝包 npm i extract-text-webpack-plugin -D
 1、var ExtractTextPlugin = require("extract-text-webpack-plugin")
  2、 配置插件 在module中
   module : {
       ...
       plugins : [
           //new 插件的實例
           new ExtractTextPlugin({
               filename : "style/app.css"
           })
       ]
   }
  3、 對scss進行改造
   {
       test : /.scss$/,
       use : [
           //css抽離
           ExtractTextPlugin.extract({
               fallback :"style-loader",  //style-loader是把文本放到頁面上
               use : ["css-loader","sass-loader"]  //從后往前執行
           })
       ] 
   }
   如果

(4)webpack.optimize.UglifyJsPlugin 代碼壓縮
內置核心插件 和 uglifyjs-webpack-plugin 這個插件一樣

   var webpack = require("webpack")
   在plugins中
   plugin ： {
       ...
       new webpack.optimize.UglifyJsPlugin({
           compress{
               warings:false    //去掉警告
           }, 
           output:{
               comments:false 
           }
       })
   }

(5) open-brower-webpack-plugin 自動在瀏覽器中打開頁面 方便開發

   下載：npm i open-browser-webpack-plugin -D
   var OpenBrowser = require("open-brower-webpack-plugin")

   plugins : [
       ...
       new OpenBrowser({
           url ： "http://localhost:4000"
       })
   ]

(6) on-build-webpack 刪除之前版本

   下載：npm install --save-dev on-build-webpack
   //webpack.config.js
   var WebpackOnBuildPlugin = require("on-build-webpack");
   var fs = require("fs");
   //設置為你的目標文件夾地址
   var buildDir = "./dist/";
   ...
   plugin:[
       new WebpackOnBuildPlugin(function(stats) {
           const newlyCreatedAssets = stats.compilation.assets;
           const unlinked = [];
           fs.readdir(path.resolve(buildDir), (err, files) => {
             files.forEach(file => {
               if (!newlyCreatedAssets[file]) {
                 fs.unlink(path.resolve(buildDir + file));
                 unlinked.push(file);
               }
             });
             if (unlinked.length > 0) {
               console.log("刪除文件: ", unlinked);
             }
         });    
       })
   ]
續...webpack二——一站到底