webpack学习中遇到的坑

最近由于项目中使用了vuejs，所以顺带学习相关的知识，webpack作为目前广泛使用的一种前端编译工具，也一起进行学习。本文记录了在学习中遇到的一些问题。持续更新中……

一、使用webpack-dev-server时无法更改端口号

问题描述：
最近在学习webpack，尝试使用webpack-dev-server，想更换接口，但是更改了webpack的devServer配置，发现一直无法生效。具体配置如下：

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

解决方式：
经过排查问题发现在使用webpack时配置了多环境，所以修改了配置文件的名称，具体如下图所示：

在使用npm的sripts时，并没有配置该文件信息，所以无法读取配置文件，导致配置无法生效。
修改scripts，加入配置信息后生效。

二、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...

三、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...

四、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...

五、SplitChunkPlugin使用遇到的问题

问题描述：由于CommonChunkPlugin已被webpack4废弃，webpack4推荐使用SplitChunkPlugin来提取公共模块。由于webpack官网(https://webpack.js.org)上面该...，网上资料介绍又不是很详细，综合网上搜索结果，终于实现了公共模块的分离，但是还是有很多疑问没有解决，后面还需要在查找相关资料。
可以参考官方的例子：https://github.com/webpack/we...
解决方式：
使用SplitChunkPlugin有两种方式：
一、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