webpack 学习笔记

Chapter 1

• webpack 默认配置⽂文件:webpack.config.js
• 可以通过 webpack --config 指定配置⽂文件

• 通过 npm script 运⾏行行 webpack,package.json里的script下配置。

---

Chapter 2

• entry:打包的入口文件
• output:如何将编译后的文件输出到磁盘
• 
• Loaders: 支持其它文件类型并且把它们转化成有效的模块，并且可以添加到依赖图中

• 

  • • babel-loader 解析ES6
  • style-loader,css-loader,less-loader 解析css
  • file-loader 解析图片或字体
  • url-loader 解析图片，可带limit参数转换成base64
• Plugins: 用于 bundle ⽂文件的优化，资源管理理和环境变量量注⼊入,作⽤用于整个构建过程.
• 
• Mode: 构建环境是:production、development 还是 none
• 
• 文件监听：webpack --watch.build编译好的文件会自动更新。

• 热更新：webpack-dev-server(WDS)

• 热更新：第一次打开（1-2-A-B），更改文件热更新（1-2-3-4）

• 文件指纹：

  • hash 字体和图片
  • Chunkhash:js(和 webpack 打包的 chunk 有关，不不同的 entry 会⽣生成不不同的 chunkhash 值)
  • contenthash:css

• 代码压缩：

  • js:内置unglify-webpack-plugin
  • css:optimize-css-assets-webpack-plugin和cssnano.由于是单独生成css，需要删除style-loader(这个是用来生成css插入header标签的)
  • html:html-webpack-plugin