webpack 思路整理

webpacak解决的问题：

它是一个打包工具，开发的时候你可以模块化开发，它帮你把这些模块打包在一起，帮助解析那些不能识别的文件比如react、vue、typescript的

webpack.config.js的五部分：
entry /output/ modules（loader+plugin）/ mode
loader用来解决非js问题，webpack只能识别js文件（图片文件、vue、sass、react、css）
plugin用来解决更为复杂一些的问题，比如提取公用样式表、压缩html、热加载等等
entry+output 单文件和多文件的处理不同
resolve

——————————————————————————————————————————

常用的loader
常用的plugin

——————————————————————————————————————————

1. 关于__dirname 获取所在js所在的目录
2. path方法：var PAGE_PATH = path.resolve(__dirname, '../src/pages') //根目录/src/pages(node的方法)
3. glob：glob是webpack安装时依赖的一个第三方模块，还模块允许你使用 *等符号,（webpack自带的包方法）
               例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件
                    const glob = require('glob');
               eg1: glob.sync(PAGE_PATH + '/*/*.js')  //获取page_path目录下的所有js文件
               eg2: glob.sync('./**/*.{tif,png,jpg}') //获取当前目录父级下的所有tif\png\jpg文件

4. webpack-merge: 用于合并数组、扩展对象
               
 

————————————————————————————————————————————

创建单页面应用

创建多页面应用