webpack入门教程

1 基本使用

1.1 基本安装

1.1.1 初始化项目

在当前目录下，运行以下命令，配置项目名称、版本、介绍等。

npm init

该命令执行完后，在当前目录下会生成package.json文件。 

1.1.2 安装webpack环境

 在当前目录下安装webpack和webpack-cli

npm install webpack webpack-cli -D

运行完该命令后，会在当前目录下生成package-lock.json和node_modules文件

 1.2 创建src/dist文件夹

src中创建main.js作为入口文件。dist为打包后文件所在的目录。

 1.3 配置出入口

新建build文件夹，并创建webpack.common.js文件。

1.4 创建运行webpack的命令

在package.json中，创建一个运行webpack的命令构建脚本。

1.5 运行

在cmd控制台，可运行。

npm run build

 最后在dist目录下生成main.min.js文件。