小白webpack学习之路

本人是个webpack小白，所以写这个文章主要是记录自己的学习过程，不喜勿喷1：首先看一个最简单的webpack的样子：

module.exports = {
    entry: './app.js',
    output: {
        path: './output',
        filename: 'output-file.js'
    }
}

这个里面我们要理解一下这个里面每个变量的意思：
entry：是页面中的入口文件，比如我这边的入口文件时main.js
output: 是指页面通过webpack打包后生成的目标文件放在什么地方去，这里的path变量表示输出的文件存放的文件夹名或者路径 而filename表示是输出目标文件的名称；

2：配置文件中entry接受三种形式的值：字符串，数组和对象

entry: {
    <key>: <value>
    ...
}

key可以是简单的字符串，比如：'app', 'main'等。其实它对应着output.filename配置中的[name]变量，这里可以提前说output.filename配置是可以用[name].js表示的，比如：

entry: {
    'app-entry': './app.js'
},
output: {
    path: './output',
    filename: '[name].js'
}

这里中key为 app-entry并且output中path变量为./output，那么输出目标文件的路径就是./output/app-entry.js.再往下看vaue为./app.js，这就说明在根目录上有一个app.js文件
这里还要说明一件事那就是value如果是字符串，而且必须是合理的noderequire函数参数字符串。比如文件路径：'./app.js'(require('./app.js'))；比如安装的npm模块：'lodash'(require('lodash'))说白点就是输出的js的输入js或者模块。
还有就是如果entry的key为空的默认为mian