从0到1创建webpack项目下面我们从0到1创建一个最小的webpack项目，让大家切实感受webpack在整个项目中

下面我们从0到1创建一个最小的webpack项目，让大家切实感受webpack在整个项目中的位置和作用。

npm init创建一个 package.json 文件。
运行npm i -D webpack安装webpack。
将build命令补充到package.json的scripts命令中。 "scripts": { "build": "webpack build --config webpack.config.js --mode production" },
根目录，创建webpack设置文件webpack.config.js

const path = require('path'); // 这个是node内部提供的

module.exports = {
  // JavaScript 执行入口文件
  entry: './main.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  }
};

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="./dist/bundle.js"></script>
</body>
</html>

// 通过 CommonJS 规范导入 show 函数
const show = require('./show.js');
// 执行 show 函数
show('Webpack');

创建被main.js引用到的文件show.js：

// 操作 DOM 元素，把 content 显示到网页上
function show(content) {
    window.document.getElementById('app').innerText = 'Hello,' + content;
  }
  
  // 通过 CommonJS 规范导出 show 函数
  module.exports = show;

运行npm run build，即可看到dist文件夹下面，即可生成了bundle.js。

上面也即从0到1创建webpack项目的流程，只有一个打包的命令。那么，如何让它监听8080端口跑起来呢？