## webpack 核心概念 1. entry （递归分析构建内部依赖图） 2. output （输出 & 命名） 3. loader （翻译官） 4. plugins （优化、压缩等等） 5. mode （development、production） ## 1. entey 1. string 类型：'./src/index' 2. array： ['./src/entry1', './src/entry2'] 3. object {a: './src/entry3.', b: [.....]} ### 1.1 context webpack中 plugins、loader、entry中的相对路径都是以 **context** 为根目录开始寻找文件的，默认 context 为项目根目录 例如： ``` entry: './src/index.js' // 根目录下的src文件夹... ``` context的默认配置也可以修改 ``` module.exports = { context: path.resolve(__dirname, 'app') } 修改完相对文件的请求路径为：/Users/xxxx/exec/webpack-learn/app/src/index.js ``` ### 1.2 动态配置 entry ``` // 同步函数 entry: () => { return { './src/xxxx', './src/yyyy' } } // 异步函数 entry: () => { return new Promise( resolve => { resolve({ a: './page/a', b: './page/b' }) }) } ``` 疑问： 什么情况下的打包会用到异步函数 ？？？ ## 2 output ### 2.1 filename (配置入口文件的输出文件名) | 只输出一个文件 | 输出多个文件时 | | --- | --- | | filename： 'build.js' (写成静态的就可以) | '[name].js' | 内置变量 | 变量名 | 含义 | 备注 | | --- | --- | --- | | name | chunk的名称 | | id | chunk的唯一标示 | | hash | chunk的id的 hash 值（默认 20 位） | 可以指定长度 [hash:8] | chunkhash | chunk的内容的 hash 值 （默认 20 位）| 可以指定长度 [hash:8] ### 2.2 chunkFilename （配置无入口文件输出的文件名） 例如： 1.分割代码，按需加载时生成的文件名 ``` import(/* webpackChunkName: "show" */ './show') ``` 2. commonChunkPlugin 生成的文件名 ### 2.3 path 输出文件存放的目录，**必须为 string 类型的绝对路径** ``` path：resolve(__dirname, 'build') ``` ### 2.4 publicPath 加载异步资源需要的url地址，默认是空字符串，即使用的相对路径 ``` publicPath: 'https://cdn.example.com/assets' ``` 这时的静态资源的请求路径就是 https://cdn.example.com/assets ## 3 resolve 作用： * 修改寻找的路径 * 修改使用第三方库入口文件的路径 * 寻找“导入语句不带后缀名“文件的配置 * webpack去哪些目录下寻找第三方模块 1. alias 修改寻找的路径 ``` resolve: { alias: { components: './src/componnets' // 将原导入路径components 映射为新的路径 'react$' : '/path/to/react.min .js' // 命中以react 结尾的 } } ``` 2. mainFields 可以配置优先使用第三方库的哪份代码 ``` 第三方库的package.json: { "jsnext:main": "es/index.js" // 采用es6语法的 "main": "lib/index.js" // es5 } webpack 的 mainFields 配置 : mainFields: ['jsnext:main', 'browaer', 'main'] ``` 这样配置就可以优先使用第三方库的**es6**的那份代码 3. extensions 配置后缀名称的 ``` extensions: ['.js', '.json'] // 默认配置 ``` 4. modules 去哪些目录下寻找第三方模块，默认为node_modules 疑问： 如何寻找模块所对应的文件 ## 4 plugin - 扩展器 * 监听webpack运行时，广播出来的事件 * 合适的时机通过webpack提供的API改变输出结果 * 不直接操作文件的，是基于webpack暴露的钩子进行工作的 ## 5 loader - 转换器 * 加载资源文件 * 对文件进行编译、压缩，最后打包到指定文件中 * 在loader的配置中，后一个配置先执行，第一个配置最后执行 * 第一个执行的loader接收源文件内容作为参数，其它loader接收前一个执行的loader的返回值作为参数，最后执行的loader会返回此模块的JavaScript源码