vue學習筆記(1)--webpack學習

最近因爲項目用到了vue，以前一直久聞大名，可是知之甚少，趁此機會學習一下vue。
學習vue以前，首先學習了前段打包工具--webpack，目前很是優秀和使用普遍的打包工具。參照webpack官方教程進行學習，不過官方教程目前是基於webpack3的，而實際使用的是webpack4，目前有一些比較大的差別，也作了些總結，在這裏作一個簡單的記錄，方便之後回顧學習。

一 webpack概念

webpack是一種靜態編譯工具(預編譯)[static module bundle]，區別於seaJs和requireJS(在線編譯)，相似於javac和jit的區別
webpack中的幾個概念

• Entry

入口文件，webpack編譯的入口，webpack查找全部依賴的root，最終會將全部的依賴進行關聯

• output

編輯結果（bundles）輸出位置，以及輸出結果如何命名等

• loader

webpack用於處理各類文件，loader能夠處理使用import引入的全部文件（理論上）。loader須要配置在module.rules中，它有兩個必填屬性：test(處理哪些文件)和use(使用哪一個loader)，若是配置錯誤，webpack會報錯

• plugin

plugin用於處理各類任務，它的範圍和做用比loader大，使用時須要使用require()引入，並將其加入到plugins中。若因不一樣目的屢次使用插件須要使用new來初始化插件

二 環境分離

webpack3中使用webpack.DefinePlugin插件來實現不一樣環境分離：development和production

new webpack.DefinePlugin({
    //許多 library 將經過與 process.env.NODE_ENV 環境變量關聯，以決定 library 中應該引用哪些內容
     // 在webpack4中mode會自動設置該信息，廢棄該配置
    "process.env.NODE_ENV": JSON.stringify("development")
})

在webpack4中使用該方式已經無效，須要使用新提供的mode來指定不一樣的環境。
mode分爲development和production，且必須設置一種，不然會報錯誤提示。

// 環境設置，webpack4必須有該值，使用該屬性來設置不一樣的環境，目前有development和production兩種，也可使用：--mode development設置
// process.env.NODE_ENV會被該設置覆蓋
mode:"development",

三 source map

在webpack4中默認使用eval，能夠經過設置devtool:"inline-source-map"來更改默認設置。在production環境中建議使用"source-map"

四 代碼分離

4.1 分離CSS等

使用插件extract-text-webpack-plugin來將css和js分離。官方例子：
https://doc.webpack-china.org...
具體設置以下：

// 將CSS分離 https://doc.webpack-china.org/plugins/extract-text-webpack-plugin
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//使用extractTextPlugin就不能在單獨使用style-loader
config.module:{
     rules:[
      {
        test:/\.css$/,
        use : ExtractTextPlugin.extract({
            fallback : "style-loader",
            //這樣使用會出現url()解析路徑錯誤的問題
            //use : "css-loader"
            //使用該方式解決url()路徑問題
            use:[
                {
                    loader:"css-loader",
                    options:{
                        //用於解決url()路徑解析錯誤
                        url:false,
                        minimize:true,
                        sourceMap:true
                    }
                }
                ]
            })
        },  
    ]
}

4.2 拆分公共模塊

因爲CommonChunkPlugin已被webpack4廢棄，webpack4推薦使用SplitChunkPlugin來提取公共模塊。因爲webpack官網(https://webpack.js.org)上面該...，網上資料介紹又不是很詳細，綜合網上搜索結果，終於實現了公共模塊的分離，可是仍是有不少疑問沒有解決，後面還須要在查找相關資料。
能夠參考官方的例子：https://github.com/webpack/we...
具體的配置以下：
使用SplitChunkPlugin有兩種方式：
1、optimization.splitChunks

optimization: {
        //提取公共模塊，webpack4去除了CommonsChunkPlugin，使用SplitChunksPlugin做爲替代
        //主要用於多頁面
        //例子代碼 https://github.com/webpack/webpack/tree/master/examples/common-chunk-and-vendor-chunk
        //SplitChunksPlugin配置，其中緩存組概念目前不是很清楚
        splitChunks: {
            // 表示顯示塊的範圍，有三個可選值：initial(初始塊)、async(按需加載塊)、all(所有塊)，默認爲all;
            chunks: "all",
            // 表示在壓縮前的最小模塊大小，默認爲0；
            minSize: 30000,
            //表示被引用次數，默認爲1
            minChunks: 1,
            //最大的按需(異步)加載次數，默認爲1；
            maxAsyncRequests: 3,
            //最大的初始化加載次數，默認爲1；
            maxInitialRequests: 3,
            // 拆分出來塊的名字(Chunk Names)，默認由塊名和hash值自動生成；設置ture則使用默認值
            name: true,
            //緩存組，目前在項目中設置cacheGroup能夠抽取公共模塊，不設置則不會抽取
            cacheGroups: {
                //緩存組信息，名稱能夠本身定義
                commons: {
                    //拆分出來塊的名字,默認是緩存組名稱+"~" + [name].js
                    name: "test",
                    // 同上
                    chunks: "all",
                    // 同上
                    minChunks: 3,
                    // 若是cacheGroup中沒有設置minSize，則據此判斷是否使用上層的minSize，true：則使用0，false：使用上層minSize
                    enforce: true,
                    //test: 緩存組的規則，表示符合條件的的放入當前緩存組，值能夠是function、boolean、string、RegExp，默認爲空；
                    test:""
                },
                //設置多個緩存規則
                vendor: {
                    test: /node_modules/,
                    chunks: "all",
                    name: "vendor",
                    //表示緩存的優先級
                    priority: 10,
                    enforce: true
                }
            }
        }
    }

第二種：new webpack.optimize.SplitChunksPlugin
具體配置同optimization.splitChunks

五 熱替換

使用以下配置實現：
在webpack3中使用以下配置

//查看要修補(patch)的依賴,被optimization.namedModules代替，development模式下默認開啓，顯示模塊的相對路徑
new webpack.NamedModulesPlugin(),
// 熱替換插件
new webpack.HotModuleReplacementPlugin(),

在webpack4中NamedModulesPlugin已經做爲默認設置，在development模式下會自動開啓，不用進行該項配置

六 tree shaking

webpack4在development模式下並不會使用Tree shaking,在production模式下才開啓。可使用uglifyjs-webpack-plugin來壓縮混淆代碼

七 懶加載

使用import()來引入須要的模塊，這部分是在方法中調用，而不是js開頭。 建議使用vue,react等框架自帶的懶加載實現