webpack本质目的

• 实现项目工程的自动化
  • 本地版本：
    • html，js，css分离
    • 模块化
    • 方便维护
    • es6
    • sass
  • 线上版本（webpack打包）：
    • 高性能
    • 体积小
    • 速度快

目录结构

plugins and loaders

• webpack、webpack-cli、webpack-dev-server
  • webpack: 打包工具
  • webpack-cli: 脚手架，搭建打包环境
  • webpack-dev-server: 开发模式下启动开发服务器
• html-loader、html-webpack-plugin
  • 处理 html 文件
  • 引入 script 脚本
  • 压缩 html
• babel-core、babel-loader、babel-preset-latest
  • es6+ 转 es5
• babel-plugin-transform-runtime（es6+）
  • 处理 async/await
• uglifyjs-webpack-plugin
  • 压缩混淆js代码
• css-loader、style-loader
  • 处理 css 样式表
  • css-loader: 模块化解析css
    • 解析css文件中的@import和url语句，处理css-modules，并将结果作为一个js模块返回
    • 解析 js 中对 css 的引入 @import
  • style-loader: 把样式放进内部样式
• mini-css-extract-plugin（跟上一条做选择，是单独提取css，还是内连进html）
  • 提取样式文件
• node-sass、sass-loader
  • 编译 sass 语法
• ejs-loader、ejs
  • ejs-loader: 处理模板文件 .tpl 文件
  • ejs: 处理 tpl 中的语法
• file-loader、url-loader
  • 处理静态文件
    • 图片
    • 字体文件
• compression-webpack-plugin
  • gzip 压缩
• image-webpack-loader
  • 压缩图片
• postcss-loader、autoprefixer
  • 添加浏览器兼容性前缀
• vue-style-loader
  • 解析 vue 文件中的 css，最后内连到html文件的head中去

webpack.config.js 配置文件