一、环境搭建

开发工具：VS Code（自行下载）

安装Node：http://nodejs.cn/

安装webpack

全局安装

npm install webpack webpack-cli webpack-dev-server -g

注意：从webpack4开始，webpack-cli需要独立安装。

二、项目实战

1、建立一个空文件夹，比如叫webpack_demo

执行命令

npm init -y

image.png

得到package.json

2、安装webpack

npm i webpack -s -d

npm install webpack-cli

image.png

3、建立目录结构

创建文件夹 dist src

mkdir dist src

image.png

为了方便测试，建立entrey.js index.html bundle.js等文件

image.png image.png

4、打包命令

webpack src/entery.js -o dist/bundle.js --mode development

image.png image.png

5.访问index.html页面效果如下

image.png

注意

由于webpack4版本升级，导致之前的命令
webpack src/entery.js dist/bundle.js
无法正常使用
请使用

webpack src/entery.js -o dist/bundle.js --mode development

源码：https://gitee.com/andli/webpack_demo.git

参考文档

https://www.cnblogs.com/ldq678/p/10295870.html

https://www.cnblogs.com/panax/p/9314396.html

https://jspang.com/posts/2017/09/16/webpack3.html#%E7%AC%AC01%E8%8A%82%EF%BC%9A%E8%AE%A4%E8%AF%86webpack%E7%9A%84%E4%BD%9C%E7%94%A8