webpack学习笔记

发表于

入口文件

  • entry: './index.js'

  • entry: ['./index.js', './other.js']

  • entry: {main: './index.js', other: './other.js'}

第三种对象模式需要指定多出口

1
2
3
4
5
output: {
    // path: 绝对路径的字符串
    path: path.resolve(__dirname, './dist'),
    filename: '[name].[chunkhash:8].js'
}

三种hash

  • hash是打包后的该版本的hash，

  • chunkhash是对应每个chunk的hash

  • contenthash是针对内容改变（适用被引用的css文件）

用chunkhash而不是hash来生成打包文件的目的是：使用浏览器缓存。比如

index.js引用了a.js和b.js和styles.css，如果只改了index.js而不改变其他的文件，其他3个文件原本可以用浏览器的缓存防止重新加载新的一样的文件，如果用hash每次打包重新生成一个新的就要重新下载新的这3个文件。

Webpack-dev-server

package.json中的scripts属性里填写 npx webpack-dev-server

webpack.config.js中的devServer属性是个对象，属性有port、hot、open、contentBase、progress，proxy等

  • Package.json中运行了npx webpack-dev-server后就可以在内存中存放输出的index.html和js等不会在dist中生成
  • 热更新hot：本地保存后自动刷新页面，不需要手动刷新。
  • 热模块更新hmr，适用于css：改变样式后页面局部（模块）刷新，可以保留其他状态
  • 代理proxy: 对象，防止跨域。键是代理的请求相对路径比如’/api/info’，值也是对象，其键target的值是代理的地址，比如’http://localhost:9092'

按需加载

代码中使用import(‘XXX’)的方式会按需加载，打包的时候会多出一个0.js

module

包含rules对象

babel:babel-loader只与webpack桥接，放到use属性的loader属性里、@babel/babel-core核心库，装了它才可以使用preset-env、@babel/preset-env各种新es特性转换为es5，放到use属性的options属性的presets属性里。

通过上⾯的⼏步 还不够，默认的Babel只⽀持let等⼀些基础的特性转换，Promise等⼀些还有转换过来，这时候需要借助@babel/polyfill，把es的新特性都装进来，来弥补低版本浏览器中缺失的特性

useBuiltIns 选项是 babel 7 的新功能，这个选项告诉 babel 如何配置 @babel/polyfill 。 它有三个参数可以使⽤： ①entry: 需要在 webpack 的⼊⼝⽂件⾥ import “@babel/polyfill” ⼀次。 babel会根据你的使⽤情况导⼊垫⽚，没有使⽤的功能不会被导⼊相应的垫⽚。因为是导入会造成污染全局 ②usage（试验阶段）: 不需要 import ，全⾃动检测，但是要安装@babel/polyfill 。类似@babel/plugin-transform-runtime ，不会造成全局污染。

plugins

常用插件：HtmlWebpackPlugin、CleanWebpackPlugin、webpack.HotModuleReplacementPlugin

optimization

optimize-css-assets-webpack-plugin、terser-webpack-plugin