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