webpack學習中遇到的坑

最近因爲項目中使用了vuejs，因此順帶學習相關的知識，webpack做爲目前普遍使用的一種前端編譯工具，也一塊兒進行學習。本文記錄了在學習中遇到的一些問題。持續更新中……

1、使用webpack-dev-server時沒法更改端口號

問題描述：
最近在學習webpack，嘗試使用webpack-dev-server，想更換接口，可是更改了webpack的devServer配置，發現一直沒法生效。具體配置以下：

devServer: {
    contentBase: path.join(__dirname, "dist"),
    port:8999
},

解決方式：
通過排查問題發如今使用webpack時配置了多環境，因此修改了配置文件的名稱，具體以下圖所示：

在使用npm的sripts時，並無配置該文件信息，因此沒法讀取配置文件，致使配置沒法生效。
修改scripts，加入配置信息後生效。

2、webpack使用tree shaking 沒法顯示未引入的方法【已解決】

問題描述：
使用webpack4時，並無引入相應的的function，可是在生成的bundle文件中，並無提示unused harmony export信息。具體代碼以下：
index.js代碼

import { sum } from "./math.js";

function component() {
    var element = document.createElement('div');
    element.innerHTML = ["3+2=" + sum(3)].join("\n");
    element.classList.add('hello');
    return element;
}
document.body.appendChild(component());

math.js代碼：

export function square(x) {
    return x*x;
}

export function sum(x) {
    return x + x;
}

解決方式：
webpack4中mode=development時,將不進行tree-shaking和Scope hoisting，在使用production時纔會進行這些操做。webpack4的新特性參見https://segmentfault.com/a/11...

3、webpack4.0中使用「extract-text-webpack-plugin」報錯

具體報錯信息以下：

(node:12712) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
    E:\***\myproject\webpack-vue-elementUi\node_modules\webpack\lib\Chunk.js:460
                    throw new Error(
                    ^
    
    Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
        at Chunk.get (E:\***\myproject\webpack-vue-elementUi\node_modules\webpack\lib\Chunk.js:460:9)
        at E:\***\myproject\webpack-vue-elementUi\node_modules\extract-text-webpack-plugin\dist\index.js:176:48
        at Array.forEach (<anonymous>)
        at E:\***\myproject\webpack-vue-elementUi\node_modules\extract-text-webpack-plugin\dist\index.js:171:18

解決方式：
通過排查發現是因爲extract-text-webpack-plugin目前尚未webpack4版本。可使用該方式npm install extract-text-webpack-plugin@next解決 具體問題描述： https://github.com/webpack-co...

4、extract-text-webpack-plugin 提取css文件時url()解析問題

問題描述：
使用extract-text-webpack-plugin提取css文件時，url()解析出來的路徑是相對於css文件地址的，致使圖片沒法查找到。
提取的css以下：

.hello {
    color: red;
    background: url(img/shop-logo.png);
}

解決方式：
通過網上搜索，定位問題是extract-text-webpack-plugin使用css-loader解析css時出現的問題，更改css-laoder的配置便可。具體配置以下：

{
    test:/\.css$/,
    use : ExtractTextPlugin.extract({
        fallback : "style-loader",
        //這樣使用會出現url()解析路徑錯誤的問題
        //use : "css-loader"
        use:[
            {
                loader:"css-loader",
                options:{
                    //用於解決url()路徑解析錯誤
                    url:false,
                    minimize:true,
                    sourceMap:true
                }
            }
        ]
    })
}

https://github.com/webpack-co...

5、SplitChunkPlugin使用遇到的問題

問題描述：因爲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