本人是个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