初始化项目
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的配置还是通过配置文件进行。