1.在前面webpack学习一的基础上继续进行学习
在之前是基础的文件，实际会出现多个js文件等/包括执行命令的复杂性
2.在项目根目录下添加文件夹app / public
分别在app内添加入口文件 main.js 以及 Greeter.js
//main.js
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());// Greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};在public内添加静态界面index.html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>此时执行打包操作是可以的，将app内的js调用了起来
npx webpack app/main.js --output-filename public/bundle.js --output-path . --mode development 对于打包操作执行命令，还是有点繁琐，这里进行配置简化
3.对打包命令进行简化，配置webpack-config文件，对需要调用和输出对文件表示清楚
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}此时执行打包操作命令
npx webpack --mode development即可完成，如此处不写--mode development还是会报黄色警告
还能够再简化一些，直接输入我们自己定义对打包命令
4.在package.json文件中修改配置
"scripts": {
"start":"webpack --mode development",
"build": "webpack --mode production"
},此时可以直接使用npm start 完成调用
npm start