当前位置 博文首页 > 致爱丽丝：webpack(2)--webapck自身的配置
上一记介绍了webpack的安装和基本配置，本记将描述webpack自身的配置
相信读者在看完上一记后会有一点疑惑：为什么运行webpack要配置src，为什么会有构建打包文件时会生成dist目录且里面会有一个main.js呢？
—mydemo
______dist
——————__main.js
______src
——————__index.js
——————__common.js
——————__esmodule.js
——index.html
这是由于webapck在打包过程中会默认将当前根目录下src/index.js作为入口文件，并会在根目录下新建一个dist目录，并将打包后的文件(默认main.js)放置在dist的目录中
如何配置入口以及出口目录以及文件 ？
三种办法：
// 入口：yentry.js 出口 ./output
npx webpack --entry ./src/myentry.js --output-path ./output
缺点：命令行里输入，并不能确保效率
2. 在package.json中配置
在webpack中的script字段，给打包命令(如build)配置方法1的代码
// script字段下
"scripts":{
"build" : "webpack --entry ./src/myentry.js --output-path ./output "
}
缺点：scripts内要写太多冗余代码，并不能一眼就看出要做的事情
3.在webpack.config.js中配置项目入口以及打包的目录文件(推荐)
webpack.config.js是一个用于webpack配置选项的文件，可以在这里做针对wenpack本身以及loader，plugins的配置。本质上是通过导出一个配置对象，当webpack运行时会优先读取这个文件，如果有就执行这个对象内的配置
根目录下新建webpack.config.js
// 由于webpack底层由node支持，因而使用node风格的导出方式(读者也可以尝试使用esmodule方式，但是流程太过繁琐，不推荐)
//webpack.config.js
const path = require('path') //引入node原生模块path
module.exports = {
entry : './src/main.js'
output: {
path: path.resolve(__dirname,'build'), //构建完成输出的目录地址(需要绝对路径)
filename: 'mydemo.js'
}
}
命令解析：
entry :入口文件(需附带目录)
output: 输出目录以及文件配置path: 输出的路径，需要绝对路径
path.resolve ： node中path模块的一个方法，用于拼接两个字符串
__dirname: 从磁盘到当前目录下的绝对路径
'build' : 构建后的目录名，内部存放打包后的文件
filename: 打包后的文件(在build内部)
完成上述配置后，保存再执行一遍npm run build即可
这样就完成了webpack入口以及出口文件的配置
一定要将webpack.config.js作为webpack的配置文件吗？是否可以重命名？
可以， 但不推荐，重命名后会增加后续开发者阅读代码难度。因而普遍约定不要重命名webpack.config.js
重命名webpack.config.js的方法：
package.json下的script字段的build下输入以下命令：
// package.json
"script":{
"build":"webpack --config renameconfig.js"
}
下一记：常用loader的安装与配置
