高级前端-webpack_理解webpack源码算不算高级

什么是webpack：webpack is a module bundler

Tapable是webpack的底层依赖

loader让webpack可以处理除了js和json文件以外的别的类型的文件

module.rules.{use: '', test: ''} 目前用的是chainWebpack可以链式调用loader和plugin，并且可以修改对应loader或者插件的属性

webpack的主要配置

1. Entry
2. Output
3. loader
4. plugin

webpack代码分离

1. 多入口
2. splitChunks
3. 动态导入

为什么要用webpack

从Entry文件开始，加载并处理所有的文件，最终转为bundle.js文件

webpack怎么用

1. 全局安装webpack + webpack-cli

2. 全局直接使用webpack xxx.js

3. 项目中安装webpack + webpack-cli, 使用npx webpack，默认入口文件./index.js，默认配置文件：webpack.config.js

4. 可以自己创建一个webpack.config.js用来修改webpack的配置

5. 也可以重定义webpack.config.js的名字 => vue.config.js，但是打包命令得这么写：npx webpack --config vue.config.js

6. 为了不用每次都去调用npx，可以使用npm script去做优化，在package.json中配置相关script，例如：

script: {
    build: 'webpack'
}

使用npm run build去代替npx webpack; script的执行会优先从当前所在项目的node_module中去找相关指令

7. webpack-cli的作用是为了可以在命令行运行webpack，不装的话不能运行

8. webpack是基于node.js去编写的，因为打包的功能需要去遍历项目中用到的所有文件，需要用到一些原生功能，js是做不到的，所以用node.js是很容易实现的

打包结果命令行输出分析

1. Hash：本次打包唯一的hash值

2. asset: 打包出的文件名

3. chucks: 打包的文件的唯一值得集合

4. chuck names: 打包文件的名字的集合

5. chuck names怎么来的：main

6. entrypoint: 入口文件

7. webpack.config.js的默认mode是production，也可以设置成development，如果是production会默认压缩代码，development不会压缩代码

loader

模块不一定是js文件，也有可能是css文件，图片文件，webpack默认只知道打包js模块文件，其他类型的文件的打包就需要借助loader

module: {
    rules: [{
        test: /\.jpg$/
        use: {
            loader: 'file-loader'
        }
    }]
}

1. loader的作用过程，当webpack遇到非js模块的时候，去找可以识别当前模块的loader，对应的loader会把对应的module文件编译成对应的文件放到dist目录下面

2. vue项目中动态引入本地图片，需要require或者import，应该就是loader不会