# webpack5

**Repository Path**: chengll000/webpack5

## Basic Information

- **Project Name**: webpack5
- **Description**: webpack5实战（从入门开始）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-03
- **Last Updated**: 2021-08-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack5基础学习

## webpack是什么
    webpack是一个前端资源构建工具，是静态资源打包器。

## webpack的配置文件
webpack.config.js是webpack的配置文件
```js
/**
 * webpack.config.js
 *  作用：指示webpack干哪些活（当运行webpack指令时，会加载里面的配置）
 * 
 *  所有的构建工具都是基于nodejs平台运行的。所以模块化默认采用commonjs。
*/
// resolve用来拼接绝对路径的方法
const {resolve} = require('path')

module.exports = {
    entry: './src/index.js',
    output:{
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
        ]
    },
    plugins:[
    ],
    mode: 'development'
}
```  
## 五个核心概念
    1. entry： 入口文件，指示webpack以哪个文件为入口开始打包，分析构建内部依赖图。
    2. output：输出文件，指示webpack打包后的资源路径和资源如何命名
    3. loader：类似于翻译官，可以通过loader让webpack处理那些非js的文件，比如css-loader（webpack只能处理js文件）  
    4. plugins：插件，做一些功能比较强大的事情
    5. mode：指示webpack使用对应模式的配置
        （1）development：开发环境
        （2）production：生产环境 
## webpack性能优化
* 开发环境性能优化
* 生产环境性能优化

### 开发环境性能优化
* 优化打包构建速度
* 优化代码调试

### 生产环境性能优化
* 优化打包构建速度
* 优化代码运行的性能

#### 结论
    1. webpack能处理js/json文件，不能处理css/img等其他资源
    2. 生产环境和开发环境可以将ES6模块化编译为浏览器能识别的模块化。
    3. 生产环境比开发环境多了一个压缩js代码


️⚠：
webpack5文件夹下新建了多个小demo。
为了避免每个demo都要下载很多相同的依赖包，可以在根目录（也就是webpack5这层）安装依赖。这样若是哪个demo下面没有找到依赖，则会向上查找。