webpack基础概念解析和示例

webpack是前端工程化的常用工具之一，是一个静态模块打包工具，主要用于前端代码的打包。

能提供的功能如下：

1. 压缩、分割、动态引入前端代码，如生产环境或者一些第三方库包都会提供min.js版本，这就是压缩之后的代码，能够减少代码体积，提高加载速度。
2. 处理静态文件，帮我们处理image; file;等静态资源，使得部署之后的代码能正确引用。
3. 转换ES6语法为浏览器兼容的格式，部分浏览器可能不支持ES6，此时可以将其转换。
4. 识别并处理less; sass; 等格式的样式文件，使得浏览器可以识别。
5. 配置source-map
6. 支持TypeScript
7. …

核心概念和配置实例

在项目根目录下新建一个配置文件 webpack.config.js

1、入口entry

入口指定了webpack应该以哪个模块/文件为起点开始整个构建过程。会从入口开始，根据文件间的引用关系，逐次解析构建。

默认入口是./src/index.js，可以通过配置中的 entry 属性来指定入口。可以指定多个入口。entry的取值可以是 string | array | object

module.exports = {
   
    // 入口属性取值  string | array | object
    entry: './src/myEntry/entry.js',
}

module.exports = {
   
 	entry: ['./src/myEntry1/entry.js', './src/myEntry2/entry.js'],   
}

/*
dependOn: 表明依赖特定入口，被依赖的入口必须提前加载
import: 启动时需要加载的模块
*/
module.exports = {
   
    entry: {