从最简单的开始吧，先创建一个空文件夹，用vscode打开（其他方式也ok），在终端下运行yarn init 命令，完成就会出现package.json这个文件了。

接下来运行npm install webpack webpack-cli --save-dev命令，安装webpack和webpack-cli。

创建最简单的打包结构如下：

 

 

 index.js内容

1 import HelloWorld from './helloWorld.js';
2 document.write("easy Webpack~ <br/>");
3 HelloWorld();

helloWorld.js内容

export default function() {
  document.write('Hello World!');
}

index.html内容

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <title>webpackDemo</title>
</head>
<body>
  <script src="./dist/bundle.js"></script>
</body>
</html>

三个文件创建了，然后再命令行执行 npx webpack --entry=./index.js --output-filename=bundle.js --mode=development，

entry表示打包入口，output-filename表示打包结果，mode是打包模式（一般设为development就可以了）

执行完可以看到生成了dist文件夹

 

 

 然后用浏览器打开index.html文件就可以看到下面的效果了。

 

 

 

是不是觉得命令太烦锁，接下来在package,json文件中设置一个脚本命令。

 

 

 这样就可以运行npm run build 进行打包了。

当然webpack的打包配置这么写不方便修改，改造下目录结构。

 

 

 把之前的HelloWorld.js和index.js放在了新建的src文件夹下。

新建了webpack.config.js配置文件，内容如下。

module.exports  = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
  },
  mode: 'development',
}

这样package.json里的脚本命令就可以修改为下面那样了，之后修改在配置文件里修改就好了。

 

 

 

这里是不是已经发现了，为什么我不能热加载呢？下面就来配置下webpack-dev-server吧。

先下载，运行 npm install webpack-dev-server --save-dev，下载好加个脚本命令。

 

 

 weppack配置文件新增devServer配置

 

 使用npm run dev就可以实时更新实时查看了。

真的很基础了。

 更多的配置需要进一步的学习和实践，可以参考https://www.webpackjs.com/concepts/