对webpack（前端工程化）的了解总结

一:了解webpack

1、什么是webpack

1. webpack是一个javascript的静态模块打包工具

2. webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，增强功能

3. 最后输出由多个模块组合成的文件，webpack专注构建模块化项目

2、webpack的优点是什么？

1. 专注于处理模块化的项目，能做到开箱即用，一步到位

2. 通过plugin扩展，完整好用又不失灵活

3. 通过loaders扩展, 可以让webpack把所有类型的文件都解析打包

4. 社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展

二:安装并使用webpack

webpack是一个工具，对于所有的项目都可以来使用，从这个意义上来讲，它是可以去全局安装的，但是，考虑到不同的项目中可能使用了不同的webpack版本，所以不推荐大家去全局安装。特别是打开一个老项目时，一定要注意一下它的webpack的版本号。

(前端很多悲惨故事，都是是从版本不一致开始的。采用局部安装的方式来安装它，注意，它只是一个开发依赖，并不是生产依赖，所以在命令行中加上-D。)

安装命令如下:   npm i webpack webpack-cli -D 

下面来通过命令行工具来检查是否安装成功。

# 方式一：
node_modules\.bin\webpack -v
# 方式二：
npx webpack -v

三:使用webpack来做打包

命令格式是：npx webpack 文件名

打包操作已经成功：

 webpack会分析入口文件中的引用关系，把相关的文件合成在一起，变成一个.js文件

为了大家更直观的看到这步操作,具体文件夹为大家截图示例: 

 打包完成后,就可以引入完成打包后的js了:

例如:把上面打包完成的main.js引入到index.html:

辅助理解图: 

四:认识webpack的配置文件 

配置文件的作用(方便理解,如下图)

 1.创建并使用默认配置文件

在项目根目录下创建一个名为webpack.config.js。其内容如下：

module.exports = {
  mode: 'development', // 打包方式
}

这个文件的意义是导出一个配置项：用来对webpack的打包行为做设置。在操作层面，就是学习如何去使用这个文件。

然后，再次运行打包命令，查看产生的main.js文件的内容，对比与之间的变化。

五:设置入口和出口

在配置文件中，配置自定义的入口和出口