实践出真知，以最快、最简洁的方法先跑起来
一、必需配置介绍
- mode：构建模式
- entry：打包文件路径
- output：输出文件配置
二、安装webpack
npm install webpack webpack-cli --save-dev
三、打包执行
文件目录如下：
.
|-- src
| |-- hello.html
| `-- index.js
`-- webpack.config.js
各文件详情（最简易版）： ./src/hello.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello webpack</title>
</head>
<body>
<h1>hello webpack</h1>
</body>
<script src="../dist/bundle.js"></script>
</html>
./src/index.js
console.log('hello webpack');
./webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
}
};
万事俱备，执行打包命令
npx webpack
检验 浏览器访问该html文件，会有以下显示
四、结语
本节主要学习了webpack的基本必需配置，拥有这次成功打包经验后，就能深切的理解到入口（entry）、输出（output）、模式（mode）三个必需配置了
与君共勉。
