webpack使用之基本（1）

什么是webpack

概念：webpack是前端项目工程化的具体解决方案。

主要功能：它提供了友好的前端模块化开发支出，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。

好处：让程序员把工作重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

1.在项目中安装webpack

在终端运行如下的命令，安装webpack相关的两个包：
目前使用的版本，-D把webpack相关的包放在开发的节点下

npm install webpack@5.5.1 webpack-cli@4.2.0 -D

2.在项目中配置webpack

(1) 在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置，如下代码片段：

module.exports={
	mode:'development'//mode 用来指定构建模式。可选值有development(开发阶段)和production(需要上线)
}

备注：
① webpack.config.js文件的作用
它是webpack的配置文件。webpack 在真正开始打包构建之间，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。（由于webpack是基于node.js开发出来的打包工具，因此在它的配置文件中，支持使用node.js相关的语法和模块进行webpack的个性配置。）

② webpack中的默认约定
壹：默认的打包入口文件为src ==>index.js

贰：默认的输出文件路径为dist==>main.js
③自定义打包的入口和出口

在webpack.config.js配置文件中，通过entry节点指定打包的入口，通过output节点指定打包出口。示例代码如下：

const path =require('path')//导入node.js中专门操作路径的模块

module.exports={
	entry:path.join(__dirname,'./src/index.js')//打包入口文件的路径
	output:{
		path:path.join(__dirname,'./dist')//输出文件的存放路径
		filename:'bundle.js'//输出文件的名称
    }
}

④ development

• 开发环境
• 不会对打包生成的文件进行代码压缩和性能优化
• 打包速度快，适合在开发阶段使用。

⑤ production

• 生产环境
• 会对打包生成的文件进行代码压缩和性能优化。
• 打包速度很慢，仅适合在项目发布阶段使用。

(2) 在package.json 的scripts节点下，新增dev脚本如下：

"scripts":{
	"dev":"webpack" //script 节点下的脚本，可以通过npm run执行，如现在的npm run dev
}