webpack

是什么？

• 是js 应用程序静态模块打包工具，基于 nodejs 开发出来的。
• 构建原理：基于整个项目进行构建。适合大型项目开发。

有什么用？

• 对前端的静态资源进行 合并、打包、压缩等。
• 能够处理 js 文件之间的依赖关系。
• 处理 js 兼容问题，把浏览器不识别的 或 高级的语法 转换为 浏览器可识别的 或 低级的语法。
• webpck 默认只能打包编译 js 文件，非 js 文件需要借助第三方 loader

如何使用？

• 安装 webpack

  npm install webpack -g 	//全局安装
  

  认为没有必要全局安装，在项目中安装即可。

• 通过 webpack 命令，实现打包编译

  webpack 入口文件路径 出口文件路径
  

  这个命令执行时，都做了哪些事？

  1. webpack 发现，没有以命令行的形式指定 webpack 打包 入口 和 出口
  2. webpack 会在项目根目录下找 webpack.config.js 的配置文件
  3. 未找到配置文件：
     webpack4 以上，支持零配置打包，
     默认 src/index.js 为入口，结果在 dist/main.js 中。
  4. 找到配置文件，webpack 就去解析，完成后得到 配置对象
  5. webpack 从配置对象中拿到打包的 入口 和 出口，开始打包

• webpack-dev-server
  是webpack打包 + 启动简易服务器，
  零配置：默认 src/index.js 为入口，结果在内存中（/main.js ），
  配置：以配置为准，结果依然在内存中（/）
  安装并使用webpack-dev-server 时，
  1.npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree
  解决 ：npm7.x 版本问题
  2.Webpack: Cannot find module ‘webpack-cli/bin/config-yargs
  解决 ：webpack-cli 版本较高，和webpack-dev-server 版本不匹配

核心

1、入口（entry）

2、输出（output）

3、loaders

• babel-loader
• url-loader、file-loader
• style-loader、css-loader
• postcss-loader autoprefixer
  browserslist 配置方式

4、插件（plugins）

• html-webpack-plugin
  指定html模版打包出指定的模版文件
• clean-webpack-plugin
  清除包，在打包前执行