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

初始化项目

npm init

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

添加webpack依赖

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

yarn add webpack webpack-cli --dev

其中 webpackwebpack-cli为webpack的基础依赖,--dev表示我们需要将这两个包添加到 package.jsondevDependencise节点下。
可以使用以下指令验证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

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

猜你喜欢

转载自blog.csdn.net/u010464354/article/details/106768164
今日推荐