webpack 階段回顧

webpack: 前端構建工具，支持模塊化。經過loader,plugins對資源進行處理。

loader數組是從後往前執行順序

1.js的編譯： 
    babel-loader, babel-preset(告訴babel-loader按哪一個規範編譯)

use:{
    loader:'babel-loader',
    options:{
        presets:[
            ['@babel/preset-env',{
              targets:{
                  browsers:['>1%']   //按瀏覽器市佔率來
                  //chrome:'59'  //按特定瀏覽器來編譯
              }  
            }]
        ]
    }
}

2.css的編譯：  

rules:[
    {
        test:/\.less$/,
        use:[
            {
                loader:'style-loader'
            },
            {
                loader:'css-loader'
            },
            {
                loader:'less-loader'   //寫最後面
            }  
        ]
    }
 ]

3.img的編譯（css中的圖片，js中的圖片，html中的圖片）具體總結在項目裏，這裏不貼代碼了

4. html打包

//引入插件
var htmlWebpackPlugin = require('html-webpack-plugin')

//註冊插件
plugins:[
    new htmlWebpackPlugin({
        filename:'index.html',     //保存文件的名字
        template:'./index.html',     //以哪一個爲模板
        minify:{    //是個對象 而非boolean，由於這是插件，是給第三方插件的配置說明 
            collapseWhitespace:true
        },
        inject:true,     //false則不會自動引入js和css
        chunks:['app']    //是個數組，若是有多個入口文件，能夠指定要的入口js
    })
]

4. webpack不一樣環境配置

//告訴webpack配置文件和環境
webpack --config webpack.common.js --env development

策略不一樣環境下的配置編寫：

1. 編寫一個開發環境下的配置文件

2. 編寫一個生產環境下的配置文件

3. 在基礎配置引入開發和生產配置

4. 判斷env參數，合併對應的配置

  能夠在package.json裏的添加命令，就不用每次都敲 一長串了

"scripts":{
    "build": "webpack --env production  --config webpack.common.js",
    "dev":"webpack-dev-server --env development --config webpack.common.js"
}

webpack4 爲了幹掉配置，提供了個懶人辦法

webpack --mode development   
webpack --mode  production

（webpack4把webpack-cli獨立了， 因此要單獨再安裝下 npm install webpack-cli -D) ， webpack4的loader和optimize進行了較大的改動

module.loaders改成module.rules
module.loaders.loader改爲module.loaders.use

webpack的打包流程： 

1. 讀取配置文件
2. 註冊內部插件與配置插件
3. loader編譯
4. 組織模塊
5. 生成最終文件導出

 

webpack代碼分割及大小控制，抽空再總結下：)