创建基本的webpack4.x项目

webpack是一个现代JavaScript应用程序的静态模块打包器，下面演示如何创建一个最基本的webpack4.x的项目：

1. 新建一个webpack-base文件夹作为项目的根目录。
2. 右键用Pycharm（当然你也可以用VSCode）打开，调出终端，输入命令：

npm init -y

该命令用于初始化项目，执行完该命令之后会在根目录下生成package.json文件。
3. 在项目根目录下创建src源代码目录和dist产品目录
4. src下面新建index.html
5. 终端输入以下命令安装webpack

cnpm i webpack -D
cnpm i webpack-cli -D

安装过程如下：


6. 根目录下新建webpack.config.js，该文件为webpack的配置文件，在其中输入：

module.exports = {
    mode: "development"
};

mode选项是webpack4.x新增的。
注意：在webpack4.x中，约定大于配置，默认的入口文件为src目录下的index.js，默认的出口文件为dist目录下的main.js。我们就按照默认的入口和出口位置组织，因此在src目录下新建index.js文件。
7. 测试打包功能
在index.js中输入

console.log("ok");

在终端输入命令：

npx webpack

注意这里的打包命令不再是webpack。mode设置为development时的打包过程如下：

mode设置为production时的打包过程如下：

可以看到两者生成的文件大小不一样，开发环境下生成的打包文件未经过压缩，比较大；生产环境下生成的打包文件是经过压缩的，比较小。执行完该命令后，会在dist目录下生成打包好的main.js，index.html可以引入main.js实现在控制台打印ok的效果。
此时的项目结构如下所示：

至此，一个最基本的webpack4.x的项目就搭建好了。
最后插句题外话：
webpack是基于Node.js的打包工具。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，因此Chrome浏览器支持哪些语法，Node就支持哪些语法。