1.查看node.js版本、npm版本和webpack版本（使用webpack4时，请确保node.js的版本>=8.9.4）
npm install webpack-cli -g(安装webpack脚手架)
npm install webpack -g(安装webpack)
image
2.建立配置文件webpack.config.js并书写以下内容(本人写的是src同级路径下，初学不知对不对，忘多多指教）
image
module.exports = {
entry:'./input.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'output.bundle.js'
}
}
3.建立入口文件，多个入口文件，出口文件与相应的入口文件对应
image
4.终端输入webpack，出现出口文件dist进行打包
image
在出口文件中找不到在入口文件中写的console.log。因为打包没有写--mode默认为生产模式，将我们的调式程序都省略了。如果你换成webpack --mode development,就会看到有console.log。(这就是生产模式和开发模式的区别，开发模式的文件会大很多，所以我们项目最终上线是要打包成生产模式的)。但是我们每次不需要在终端都输入--mode,只需要在配置文件中设置mode就可以了。
image
之后在终端输入webpack也为开发者模式。终端也不会出现黄色的提示了。
网友评论