vue-cli webpack相关配置

对vue-cli 中webpack相关配置进行了解，并查看webpack2.0文档进行解析

送上文档相关飞机票两张中文，英文

entry

文件入口,eg:

{[key]:[path]}

output

1.path:导出目录

2.filename:[name(文件入口的key值)].js(当然还可以添加hash相关值，由于vue-cli没有配置，这里也不做过多说明)

3.publicPath:默认根目录的路径

resolve

1.extensions:数组类型，当项目中import或者require（后直接称为引入）相关文件的时候如果没有后缀自动补全。

3.alias:数组类型，别名，简单的理解成配置索引吧。比如components目录在path.resolve(__dirname,'../src/components')下，我这边配置其别名为components当我要去其目录下面的某个组件时就可以写成components/filename.xxx。

module

rules(webpack1叫loaders)解析器:

1.test:需要解析文件匹配的相关正则表达式

2.loader:配置的解析器，可沿用webpack1.0的带‘!’链式写法。与use属性作用相同写法不同。

3.query/options:在当前解析器下的额外设置，这里配置图片、字体文件用到有两个参数1、limit文件上限，2、配置成的文件名称，将其处理成base64的形式。

4.include:解析的文件目录

5.exclude:不解析的文件目录

6.enforce:可能值有pre,post，表示前置解析，后置解析

plugins

1.DefinePlugin: 字符串替换 'process.env': config.dev.env 配置中是将字符串process.env替换成了config.dev.env的值

2.OccurenceOrderPlugin:webpack 打包顺序进行设定，当某个模块使用比较多，打包顺序的优先级就会较高，不加也没毛病。

3.hotModuleReplacementPlugin:热加载的插件，当使用过程中js代码发生改变，自动进行页面刷新

4.noErrorsPlugin:当编译过程中发生错误，将跳过错误代码进行编译，保持编译文件的正确性

5.HtmlWebpackPlugin(非webpack下的插件):三个参数：1、打包过后的html文件名；2、template当前页面模板；3、inject表示打包生成的js文件是否注入到当前html文件中。