对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文件中。