摘要：入門在逐漸成為一個(gè)成熟的青年路上，一直備受大家青睞，然而還在不斷的健身，希望以最好的姿態(tài)呈現(xiàn)給各位，如今他已經(jīng)。比起又強(qiáng)化骨骼，變得更堅(jiān)實(shí)。

webpack在逐漸成為一個(gè)成熟的青年路上，一直備受大家青睞，
然而還在不斷的健身，希望以最好的姿態(tài)呈現(xiàn)給各位，如今他已經(jīng)v3。
比起1 、2又強(qiáng)化骨骼，變得更堅(jiān)實(shí)。    

官方給出：

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

個(gè)人理解：

首先，webpack其實(shí)就是前端工程的模塊化打包工具
他可以把復(fù)雜的程序細(xì)化為細(xì)小的文件，然后在讓各個(gè)模塊進(jìn)行加載
其次，天生支持commenjs，因?yàn)樗褪窃趎odejs下開發(fā)的，但也支持AMD/CMD，方便舊代碼的遷移
然后，他可以使得前端開發(fā)便捷，可以代替gulp/grunt(接下來(lái)會(huì)寫到)，
比如打包壓縮、啟動(dòng)server模塊熱替換、編譯sass less 以及css的抽離、
mock數(shù)據(jù)、版本控制、devtool源碼映射、以及開發(fā)、生產(chǎn)環(huán)境的切換
最后，webpack的擴(kuò)展性強(qiáng)，插件機(jī)制完善，有效提高開發(fā)效率。

入口 Entry
頁(yè)面中的入口文件，entry的值有三種類型：字符串、數(shù)組、對(duì)象

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

出口 Output

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

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

   用來(lái)編譯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、需要在項(xiàng)目根目錄創(chuàng)建.babelrc用來(lái)預(yù)設(shè)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" },//執(zhí)行的時(shí)候從下往上執(zhí)行
        {loader : "sass-loader"}
       ]
     }
     sass-loader是編譯 sass文件為css文件，css-loader是編譯css文件為字符串，
     最后 style-loader把css字符串打入html文件的style標(biāo)簽里，讓頁(yè)面能加載樣式。

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

   圖片、字體圖標(biāo)加載器，是對(duì)file-loader的上層封裝,
   支持base64編碼。傳入的size（也有的寫limit) 參數(shù)是告訴它圖片如果不大于 25KB 的話要自動(dòng)在它從屬的 css 文件中轉(zhuǎn)成 BASE64 字符串。
file-loader: 
下載：npm i file-loader -D 
    加載一些 媒體文件 字體圖標(biāo)等
    // 加載圖片
     {
       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進(jìn)行輸出文文件

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

   配置webpack.config.js中 
   var HtmlWebpackPlugin = require("html-webpack-plugin")
   在plugins : {
       //編譯html
       new HtmlWebpackPlugin({
           template : "./src/index.html", //源文件
           filename : "index.html"http://目標(biāo)文件
       })
   }
   注：webpack怎么引入第三方的庫(kù) 例如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標(biāo)簽
    })

(2) autoprefixer 自動(dòng)檢測(cè)各個(gè)瀏覽器加個(gè)內(nèi)核前綴的插件

  安裝：cnpm install --save-dev autoprefixer postcss-loader
  配置：
  var autoprefixer = require("autoprefixer");
   loaders:[
       {
         test:/.css$/,
         //在原有基礎(chǔ)上加上一個(gè)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 插件的實(shí)例
           new ExtractTextPlugin({
               filename : "style/app.css"
           })
       ]
   }
  3、 對(duì)scss進(jìn)行改造
   {
       test : /.scss$/,
       use : [
           //css抽離
           ExtractTextPlugin.extract({
               fallback :"style-loader",  //style-loader是把文本放到頁(yè)面上
               use : ["css-loader","sass-loader"]  //從后往前執(zhí)行
           })
       ] 
   }
   如果

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

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

(5) open-brower-webpack-plugin 自動(dòng)在瀏覽器中打開頁(yè)面 方便開發(fā)

   下載：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");
   //設(shè)置為你的目標(biāo)文件夾地址
   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);
             }
         });    
       })
   ]
續(xù)...webpack二——一站到底