乐趣区

关于webpack:webpack入门学习笔记03-自定义脚本帮助项目管理

1. 写在后面

通过前两章博客的根底解说,咱们晓得如果想要打包编译我的项目,能够执行 npx webpack 命令,而后 webpack 就会依据配置文件 webpack.config.js 来对我的项目进行打包编译。然而当初咱们可能遇到以下需要:

  • webpack 的配置文件不要叫做 webpack.config.js, 而是叫做 webpack.config.allen.js
  • 每次打包编译的时候,都要应用 npx webpack 命令。我不喜爱这个命令,给我改成 yarn build 命令
  • ……

看似都是一些很无理的要求,然而的确是咱们在架构我的项目的时候须要思考到的问题。既然如此,本篇博客就来介绍如何满足以上两个需要。

2. 指定 webpack 配置文件

首先咱们来讲一下,如果指定 webpack 的配置文件。

后面提到,在打包编译我的项目的时候,咱们须要运行 npx webpack 命令,而后 webpack 就会依据 webpack.config.js 文件来进行打包编译。这里要说的是,npx webpack 命令是能够指定一些参数的,比方如果咱们想要指定 webpack 的配置文件为 webpack.config.allen.js,那么能够执行以下命令:

npx webpack --config webpack.config.allen.js

通过下面的指令,咱们便能够应用 webpack.config.allen.js 作为 webpack 的配置文件,对我的项目进行打包编译。

3. 自定义脚本命令

当初来解决第二个需要:如何应用 yarn build 命令来进行我的项目的打包编译。

在之前的博客中,我提到过 package.json 文件的作用,其中一个就是自定义一些脚本,而后应用 npm run 或者 yarn 来运行这些脚本,执行所定义的命令。这里咱们就能够应用这种形式,自定义脚本来进行打包编译。

新建脚本的步骤非常简单,在 package.json 文件中新建 scripts 属性,该属性为一个对象,给这个对象增加属性键值对即可新建脚本。如果要满足上述第二个需要,能够这样配置:

{
  "name": "webpack-learning",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {"build": "webpack --config webpack.config.allen.js"},
  "devDependencies": {
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2"
  }

当初自定义脚本曾经创立实现,咱们便能够通过 npm run build 或者 yarn build 来执行 webpack 的打包编译命令了。

4. 后记

这篇博客咱们次要解说了如何自定义脚本来帮忙咱们治理我的项目,这里只介绍了如何创立 webpack 打包编译的脚本,其余脚本也是十分相似的,在前面的博客中会陆续提到。

大家加油!

退出移动版