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