webpack入门（二）-- web.config.js核心配置及实践

webpack入门（二）

一、webpack配置5大核心

1、entry（入口）
指定webpack打包开始的文件。
2、output（输出）
指定webpack打包完成后输出的位置及文件命名。
3、loader(加载器)
webpack本身只能处理js、json等资源，其他的资源的处理都是需要借助loader去完成的。
4、plugin（插件）
插件可以用来拓展webpack的功能。
5、mode（模式）
webpack有两种模式，一种是开发模式，一种是生产模式。

二、从零开始搭建基础webpack项目

1、构建项目基本结构并创建基本项目文件

• count.js
  
• sum.js
  
• main.js
  
  2、创建webpack配置文件
  在项目根目录下新建文件：webpack.config.js
  该文件是webpack构建项目的默认配置文件名。
  
  3、修改webpack配置文件
  
  4、初始化package.json
  初始化package.json，实现npm包管理。
  
  5、下载依赖
  下载webpack和webpack-cli依赖
  
  6、运行项目
  
  

三、总结

执行webpack命令，会去寻找webpack.config.js文件读取webpack总体配置项；然后依据entry入口文件，去编译组合各依赖文件（整个流程中会对各种资源文件使用loader和plugin进行处理）；最后将编译后的bundle.js文件输出到output的输出文件夹。