1. 简介
webpack打包是根据配置文件来执行工作的。
2. 默认配置
之所以直接执行npx webpack index.js就能打包成功，是由于webpack内置了配置文件。
尝试直接运行npx webpack会报错，因为webpack不知道打包的入口文件是啥。但其实一个项目的入口文件是极少有变动的，每次都写很麻烦。有没有什么办法呢？
3. 修改配置文件
webpack默认读取的用户配置文件名叫做webpack.config.js。如果根目录下有这个文件，就会默认走这个文件，否则，会启用内置的配置。
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
}
}
此时再运行npx webpack命令就可以正确生成打包后的文件了。
然后整理一下文件夹，将源文件放到src目录下。如图：
image.png
修改webpack.config.js如下，
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
}
}
再次运行命令，一样是ok的。
4. 打包命令
实际上，我们可以利用npm脚本来自动执行命令。在package.json加上如下一行：
"scripts": {
"build": "webpack"
}
然后运行npm run build。scripts中不需要额外再写npx，会自动从node_modules中去找寻指定执行文件。
总结一下webpack的打包命令方式：
- 全局安装webpack时可以直接运行webpack
- 项目内安装时可以运行npx webpack
- 不管全局安装还是项目内安装都可以使用脚本命令，会优先从node_module中执行命令文件。
第三种无疑是最方便的，尤其是命令行包含了很多配置操作，导致命令很繁琐时。
