tags: [webpack]

本文主要记录下在看这本书时的所感所想，可能存在诸多错误，慢慢更正。

第一章 入门

一、loader 使用方式

  1. 可以定义在 webpack 的配置文件中
  2. 可以在引入模块时指定 loader （这种方式几乎不用）

例：import ‘style-loader!css-loader?minimize!./css/main.css’;
注: loader 的执行顺序为由后到前

二、loader 的配置方式

  1. 通过 url query string 传参

!css-loader?minimize

  1. 通过对象
  1. use: ['style-loader', {
  2.      loader: 'css-loader',
  3.   options: {
  4.     minimize: true
  5.   }
  6. }]

三、style-loader 执行原理

将 css 用 js 的字符串存储起来，当页面渲染的时候，动态向 html 的 head 里 添加 style 标签（标签个数由css 文件个数决定）

四、通过 mini-css-extract-plugin 打包 css 到单独的文件中

五、webpack-dev-server

启动服务后，webpack 构建后的文件保存在内存中，其实构建的文件的保存路径受到 devServer.publicPath 的影响，除此之外还受到 output.publicPath 的影响，具体关系可以用以下表达式表示：

  1. 构建文件保存路径 = devServer.publicPath ？devServer.publicPath : (output.publicPath || '/')

devServer.publicPath 优先级最高，在 devServer.publicPath 未设置的情况下， 若设置了 output.publicPath，则构建文件保存路径与 output.publicPath 一致（即 devServer.publicPath 等于 output.publicPath），否则默认为 ‘/‘, 若设置了 devServer.publicPath，则按照 devServer.publicPath 进行保存。
所以在 index.html 引入构建后的文件时，需要根据以上条件填写路径。也可以访问 服务地址/webpack-dev-server 点击查看文件的实际保存路径,

image.png