webpack（4）webpack.config.js配置和package.json配置

前言

上一篇文章我们使用webpack打包成功了，但是每次都要自己手动输入打包的文件地址和打包到哪里去的地址，非常麻烦，所以这里介绍使用配置文件进行打包
 

webpack.config.js

首先我们创建一个js文件webpack.config，当期我们配置最简单的导入导出，代码如下：

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

现在我们使用打包命令时，不用再跟上打包文件地址等等参数，只需输入如下命令

webpack --mode development

这样我们就会将文件打包到dist文件夹下
 

package.json

一般开发前端项目，我们都会使用npm init进行初始化项目，会生成一个package.json文件
 

为什么要使用npm init初始化项目

在node开发中使用npm init会生成一个pakeage.json文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中。方便在以后的版本迭代和项目移植的时候会更加的方便。也是防止在后期的项目维护中误删除了一个包导致的项目不能够正常运行。使用npm init初始化项目还有一个好处就是在进行项目传递的时候不需要将项目依赖包一起发送给对方，对方在接受到你的项目之后再执行npm install就可以将项目依赖全部下载到项目里。
 

npm init -y

接着我们在项目的根目录输入npm init -y就会生成一个package.json文件，内容如下：

{
  "name": "webpackTest2",   // 项目名字
  "version": "1.0.0",              // 项目版本
  "description": "",              // 项目描述
  "main": "webpack.config.js",   // 项目入口
  "scripts": {                      // 项目脚本
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],               // 项目关键字
  "author": "",                  // 作者
  "license": "ISC"            // 项目证书
}

本地安装webpack

一般我们开发阶段，安装项目需要依赖的环境都使用--save -dev

• --save：本地安装
• -dev：开发时依赖，也就是开发阶段使用的依赖包

接着使用命令本地安装webpack

npm install webpack --save-dev

安装成功后，重新打开package.json，会多出如下代码

"devDependencies": {
    "webpack": "^5.44.0"
  }

这就是开发时依赖，开发环境中依赖webpack5.44.0的版本
 

通过npm来打包webpack

最后我们不希望在命令行输入webpack来打包，我们希望使用npm来打包，我们只需要在package.json中的script中，添加如下命令

"scripts": {
    "build": "webpack --mode development"
  },

之后我们打包，只需要在终端输入npm run build就可以自动打包了