webpack学习中遇到的坑

14

最近由于项目中使用了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

你可能感兴趣的

mathink · 2018年03月30日

最近在试用 webpack 4,也是 extract-text-webpack-plugin 遇到问题

回复

0

目前官网更新不是很及时,很多要去github上找例子看

ghost0423 作者 · 2018年04月02日
风踪月 · 2018年04月28日

网站在Code Spliting还用的CommonChunkPlugin文档更新和版本不一致

回复

载入中...