Webpack工程化笔记(二)：npm scripts

在npm中，提供了一个scripts的脚本命令，可以直接替换之前冗长的命令行。

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "webpack工程化的demo演示",
  "main": "index.js",
  "author": "xiaochen",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  },
  ....
  "scripts": {
    "build": "webpack --entry=./index.js --output-filename=bundle.js --mode=development"
  }
  ....
}

• 使用默认目录配置：
  在一般的项目开发过程中，我们会设置项目的源码目录和打包后的资源输出目录，源码一般在src目录下，打包输出目录一般在dist目录下。
  

  图1.png
  Webpack默认的源码入口就是src/index.js，因此，可以省略entry的配置了

• 使用配置文件：
  Webpack的默认配置文件是webpack.config.js，因此，我们可以创建一个webpack.config.js文件。

需要注意的是：在webpack.config.js文件中，是以key-value键值对的形式存在的。

webpack的配置非常的多，因此，会经常出现层叠的属性关系。
webpack对于输出要求的是绝对路径(系统根目录的完整路径)，而之前在命令行中是使用的相对路径，因此这部分可以使用nodejs的拼接函数（path.join）

module.exports = {
    entry: './src/index.js', 
    output: {
        filename: 'bundle.js'
    },
    mode: 'development'

}

• 修改package.json中的scripts脚本：
  将"build"属性的值改为"webpack"

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "webpack工程化的demo演示",
  "main": "index.js",
  "author": "xiaochen",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  },
  ....
  "scripts": {
    "build": "webpack"
  }
  ....
}