使用webpack构建项目-基础配置

初始化项目

npm init

执行后根据命令行提示修改各项内容。

添加webpack依赖

这里使用yarn来进行包管理，由于webpack4中将 webpack内核与 webpack-cli进行了分离，因此需要分别安装二者。

yarn add webpack webpack-cli --dev

其中 webpack和webpack-cli为webpack的基础依赖，--dev表示我们需要将这两个包添加到 package.json的 devDependencise节点下。
可以使用以下指令验证webpack是否安装成功。

npx webpack --version
npx webpack-cli -v

若上述两个命令都显示各自的版本号，则安装成功

使用命令行打包

在不进行任何配置的前提下，webpack将以src/index.js为入口进行项目的打包，输出文件为 dist/main.js,默认的模式为production,用户也可以手动指定命令行参数

npx webpack --entry=./src/index.js --output-filename=bundle.js --mode=development

以上命令会使webpack以development打包并输出文件名为bundle.js的文件。
但命令行输入参数这种事情复杂又无意义，虽然可以将上述webpack命令写入 package.json 中 通过 npm script执行，但并不能应付复杂场景，因此，大多数情况下，webpack的配置还是通过配置文件进行。