webpack配置详解

webpack配置详解

1、首先建一个名叫“webpack.config.js”文件，在里面写webpack的配置信息。之前的文章我就已经写过一个简单的例子：

一、path = require(‘path’)理解
在这里我们可以注意到最新引用的path，它主要作用就是处理路径，2个常用的方法是path.join(path1[, …])和path.resolve([from …], to)。就我的理解join就是拼接2个字符。好比在一个路径下添加一个文件，resolve在某个路径找某个文件。
二、入口文件配置-entry
基本形式：entry:{key:value},其中key对应的是output中的[name]。key可以为简单的字符串如：app，index等；也可以为路径如：src/js/page/index.js。value可以为简单的字符串如路径；也可以为数组，数组中的文件一般是没有相互依赖关系的，但是又处于某些原因需要将它们打包在一起。
其中对于数组的作用：我们会将第三方npm包，一般我们不会进行修改而且它们之间也不存在依赖，所以我们一般会将它们打包在一起。例如：

上面entry的写法也是多入口的一种写法，最后会在dist下生成2个js文件：index.js和vendors.js。但这时候你又会发现每次有地方修改的话不管index还是vendors的hash值都会发生变化，但明明vendors.js中没有做过任何的改变。这样的话，对于缓存不就没有任何作用了而且每次打包也浪费时间。具体优化我们下面再说。
我认为key和value的对应关系：key对应输出文件的名字和路径，value是一个真实存在的文件，其里面的内容通过编译后成为以为名字的文件的内容。
三、出口文件配置-output
现在我也只用过最基础的，以后补充。其中的属性：path（打包后的文件存放位置）、publicPath用于存放静态资源文件路径，用于：href、url（）；
四、打包
之前我们就说过作为入口配置的js每次改动都会全部打包，但一些第三方的文件我们希望一次打包好了之后就不可用打包了，这样既节省时间也有利于缓存。这里我们就要用到DllPlugin。用DllPlugin我们可以将要打包的文件成一个有路径和具体信息的json文件，用的时候用DllReferencePlugin当插件引进去就行。在根目录下新建一个webpack.dll.config.js文件和webpack.config.js文件同级。下面可以看我的注释：

然后执行：webpack --config webpack.dll.config.js后会在dist目录下产生vendors-manifest.json文件。然后在webpack.config.js引用，如下：