webpack打包是根据配置文件来执行工作的。
之所以直接执行npx webpack index.js就能打包成功,是由于webpack内置了配置文件。 尝试直接运行npx webpack会报错,因为webpack不知道打包的入口文件是啥。但其实一个项目的入口文件是极少有变动的,每次都写很麻烦。有没有什么办法呢?
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的。
实际上,我们可以利用npm脚本来自动执行命令。在package.json加上如下一行:
"scripts": {
"build": "webpack"
}
然后运行npm run build。scripts中不需要额外再写npx,会自动从node_modules中去找寻指定执行文件。 总结一下webpack的打包命令方式: