webpack学习

基础知识
webpack5.X练习
webpack常用的对象及方法

基础知识

webpack是一个js应用的静态模板打包器，当它工作时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或者多个bundle。
核心概念：
1. 入口(entry)
  1. 指示webpack应该使用哪个模块来作为构建起内部依赖图的开始，进入entry point后，webpack会找出有哪些模块和库是entry point(直接或间接)依赖的。默认为./src
2. 出口(output)
  1. 指示webpack在哪输出它所创建的bundles，以及如何命名，默认为./dist，常见属性path表示需要bundle生成(emit)到哪里，filename表示生成的bundle的名称。
3. loader
  1. loader让webpack能够去处理非js文件(webpack只会处理js)，loader可以将所有类型文件转为webpack能够处理的有效模块，然后进行打包处理，test属性是表示需要被处理的文件，use属性是用什么去处理它。
4. 插件(plugins)
  1. 插件的执行范围更广，它可以处理从打包优化、压缩，一直到重新定义环境中的变量。使用时先要ruquire()它，然后添加到plugins数组中，通过option进行自定义功能。
5. 模式
  1. 通过选择development或者production之中的一个，来设置mode参数，就可以开启相应模式下的webpack内置的优化。
使用：
```
...
output: {
 filename: '[name].js' //如果配置创建了多个单独的"chunk",则应该使用占位符来确保每个文件具有唯一的名称
}
...
```
resolver是一个库，用于帮助找到模块的绝对路径，当打包模块时，wevpack使用enhanced-resolve来解析文件路径，模块将在resolve.modules中指定的所有目录内搜索，可以通过resolve.alias来创建一个别名，可以用resolve.extensions来配置需要解析文件的扩展名。

每个文件系统访问都被缓存，以便更快触发对同一文件的多个并行或串行请求。在观察模式下，只有修改过的文件会从缓存中摘出，如果关闭观察模式，在每次编译前清理缓存。

模块热替换：
- 保留在完全重新加载页面时丢失的应用程序状态
- 只更新变更的内容，以节省宝贵的开发时间。
- 调整样式更快速-几乎相当于在浏览器调试器中更改样式。

webpack5.X练习

目标文件夹下：npm init -y

生成package.json。

局部安装webpack-cli：npm install webpack webpack-cli -D

生成node_modules(依赖包文件夹)、package-lock.json(锁定依赖包的版本，避免版本不同产生的问题)

创建package.config.js

配置entry、output就可以开始打包了

自定义指令，因为npm支持package.json中使用scripts字段定义脚本命令，而使用npm run script执行脚本的时候都会创建一个shell，然后在shell中执行指定的脚本。
安装本地服务器devServer，就可以热加载。

npm i webpack-dev-server -D，然后在config.js中配置devServer相关(告诉服务器去哪读取文件、端口等信息)。

// webpack-dev-server 命令进行热更新启动
devserve: {
    contentBass: path.resolve(__dirname, './dist')
    compress: true,
    port: 3000,
    open: true，
    proxy: {
        // xxx-api/login 代理到=> mock/login
        [process.env.VUE_APP_BASE_API]: {
            target: `http://127.0.0.1:${port}/mock`,
            changeOrigin: true,
            pathRewrite: {
                ['^' + process.env.VUE_APP_BASE_API] : ''
            }
        }
    }
}

然后安装loader、plugins。
webpack常用的对象及方法
```html let path = require(‘path’) path.resolve(__dirname, ‘dist’) // 当前目录下的dist文件夹

const {smart: merge} = require(‘webpack-merge’) moudle.exports = merge(config1,config2) // 合并config1，config2对象 ```

基础知识

webpack5.X练习

webpack常用的对象及方法