# webpack-study

**Repository Path**: chengll000/webpack-study

## Basic Information

- **Project Name**: webpack-study
- **Description**: webpack学习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


步骤：
1. 安装webpack
2. 新建webpack配置文件
3. 创建入口文件index.html
4. **进行webpack.config.js的编写**

启动项目想自动打开浏览器，可以在package.json中配置open
```
package.json

"scripts": {
    "start": "webpack-dev-server --open"
  },
```

## package.json简介

>package.json包管理文件，该文件中的依赖包有dependencies和devDependencies两种。

### 区别

    dependencies：表示生产环境下使用的依赖。

    devDependencies：表示尽在开发环境使用的依赖。

install的时候用--save会将包安装在dependencies下面。

## webpack
> webpack是一个模块打包器，可以将文件编译成浏览器可以解析的模式，并打包压缩体积。

### 安装webpack

    （1）在项目根目录下创建package.json
    
    （2）安装webpack（模块打包库）和webpack-cli（命令行工具）

### 基础配置

    （1）在根目录下新建webpack.config.js
    （2）entry：入口文件，webpack会先从这里开始编译
    （3）output：定义打包后输出的位置和对应的文件名

webpack.config.js的写法
```
module.exports = {
    entry:'./index.js',       // 入口
    output:{                  // 出口
        path:'',
        filename:''
    }
}
```
几个核心配置：

    entry：入口起点，webpack会根据entry的配置找到首次执行的依赖。
    output：输出路径，告诉webpack要将编译后的文件存放的位置和文件命名。
    loader：因为webpack只能处理JavaScript模块，当我们使用react或者vue的时候可以用对应的loader，来将其转换为webpack可以处理的模块。
    plugins：插件


webpack --watch:

    （1）可以动态监听文件的改变并实时打包，输出新的bundle.js文件.
    （2）这样的弊端是文件过多时打包速度会变慢，并且这样的方式不能做到hot replace，每次编译后还要手动刷新浏览器

### HMR（Hot Module Replacement）热模块替换

当我们修改代码后希望能自动更新，webpack提供了3种方式：
    
    （1）监听模式
    （2）webpack-dev-server
    （3）webpack-dev-middleware

webpack-dev-server --hot：

    （1）可以解决上面的问题，开启热更新。
    （2）webpack-dev-server主要是启动了一个express的http服务起。
    （3）它的作用主要是用来伺服资源文件。此外这个Http服务器和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹。

注意：启动webpack-dev-server后编译的目标文件是看不到的，因为存到了内存中。