课件和源代码下载地址

精选留言(17)

• 
  Mavericker

  2019-05-29

  loader 链式调用的顺序说错了唉，应该是从右到左，先是 css-loader， 再是 style-loader。

  作者回复: 已更正

  

   13
• 
  晓东

  2019-05-29

  老师，请问style-loader css-loader less-loader分别实现了什么功能，还有顺序那块的执行是类似于compose(style,css,less)这个过程吗

  作者回复: 函数组合通常有两种方式，一种是从左到右(类似 unix 的 pipe)，另外一种是从右到左(compose)。此处 webpack 选择的是 compose 方式，从右到左依次执行 loader，每个 loader 是一个函数。
  
  style-loader: 向 DOM 插入 style 标签，并且将样式插入进去，这样网页才能解析到
  css-loader: 可以让 webpack 解析 css(因为 webpack 原生只支持 js 和 json 的解析)，并且将解析出来的 css 转换成一个对象，插入到 JS 里面去。
  less-loader: 将 less 转换成 css
  

  

   8
• 
  sandy

  2019-05-30

  老师讲的很好，webpack小白表示很快乐~

  作者回复: 哈哈，感谢感谢

  

   6
• 
  奶尔

  2019-08-17

  build之后我们都没有xxxx.html的文件，style-loader如何将<style>插入到DOM的呢，老师？

  

   3
• 
  ThreeTree🏸

  2019-05-29

  我的理解是：
  use: [
  'style-loader', // 将js字符串生成为style节点（最后执行）
  'css-loader', // 将css转成CommonJS模块（其次执行）
  'sass-loader' // 将sass转成css（最先执行）
  ]

  展开

  作者回复: 嗯嗯，理解正确

  

   3
• 
  驴肉蒸饺

  2019-05-29

  老师可否再深入一点点。谢谢老师

  作者回复: 嗯，这门课设计的时候也是考虑到通用性更强一点，难度上也是一个循序渐进的过程。

  

   3
• 
  一路向北

  2019-09-16

  有个问题，视频中使用了css-loader和style-loader，将css样式插入了<style>中。有没有办法将css以<link>的方式引入呢？

   2

   2
• 
  李萬濟

  2019-08-31

  请问css-loader转换成的common.js对象是指node内部的module构造函数实例化的对象吗

  作者回复: 是的，Node.js 内部的模块机制规范是基于 common.js。类似：
  
  module.exports = function () {
  
  };
  
  css-loader 就是将 css 代码转换成这样的对象形式。

  

   1
• 
  心尘

  2019-05-31

  这里的test的.都不用反斜杠转义么？

  作者回复: 最好加一个反斜杠哈

  

   1
• 
  侯志颖

  2019-09-30

  老师，我这边使用 scss, 可是报错，不知道啥原因
  
  1. npm i sass-loader node-sass -D
  2. 加入 rules
             {
                  test: /.s[ac]ss$/i,
                  use: [
                      // Creates `style` nodes from JS strings
                      'style-loader',
                      // Translates CSS into CommonJS
                      'css-loader',
                      // Compiles Sass to CSS
                      'sass-loader',
                  ],
              },
  3. search.js 中 import './a.scss'
  4. 报错 Unknown word
  

  展开

  作者回复: 把代码上传到github，然后贴一下链接我看看。

  

  
• 
  metthew😀

  2019-07-16

  load 链式调用 从右向左

  

  
• 
  Ian

  2019-07-12

  老师我的打包成功了，访问页面报这个错误是什么原因啊
  
  search.js:22 Uncaught Invariant Violation: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
      at file:///Users/yinzhongwei/phonepro/dist/search.js:22:420
      at i (file:///Users/yinzhongwei/phonepro/dist/search.js:22:523)
  
  
  

  展开

  

  
• 
  雨桥明夜

  2019-07-12

  老师，css-loader options 配置中的 importLoaders 作用意义是什么，文档上写的是“用于配置「css-loader 作用于 @import 的资源之前」有多少个 loader”，这个不是在 ['style-loader', 'css-loader', 'sass-loader'] 这里已经体现出有多少个loader，我感觉应该是自己理解有误，望指出错误。

   1

  
• 
  森林迷了鹿

  2019-07-11

  我想知道我再react项目里配置的webpack.config.js文件配置了less，执行yarn start的时候，配置的less又没了，我是把sass的都变量改成了less，yarn start之后就没了，一头雾水，老师能给我指点迷津吗？

  

  
• 
  Geek_10ebab

  2019-06-25

  如果我想要看loader处理后的结果，我应该怎么设置呢？

  

  
• 
  在男神经路上越走越远

  2019-06-19

  d:\webpack>npm run build
  
  > my-project@1.0.0 build d:\webpack
  > webpack
  
  Hash: d5ac199bd053df1241fb
  Version: webpack 4.34.0
  Time: 2099ms
  Built at: 2019-06-19 11:26:46
     Asset Size Chunks Chunk Names
  index.js 929 KiB main [emitted] main
  Entrypoint main = index.js
  [./node_modules/css-loader/dist/cjs.js!./src/style.css] 194 bytes {main} [built]
  [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
  [./src/index.js] 2.72 KiB {main} [built]
  [./src/style.css] 1.06 KiB {main} [built]
      + 14 hidden modules
  
  老师，[./node_modules/css-loader/dist/cjs.js!./src/style.css] 194 bytes {main} [built]
  [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]这两行是怎么会儿事？
  

  展开

  

  
• 
  金樽明月

  2019-06-02

  为什么style-loader 要写在css-loader前面？视频中没有听清楚

  作者回复: 这个是因为 loader 的执行有严格的顺序。解析 less 为例子：
  
  必须先将 less 转换成 css，然后在解析css 为 cjs 对象，最后再将 cjs 对象以 style 标签的方式插入到页面上。
  
  因此执行顺序是： less-loader -> css-loader ->style-loader。
  
  编写顺序搞好需要和执行顺序相反，因为 loader 采用的是 compose 的实现，不是 unix 的 pipe 实现。在第7章也会详细介绍 loader 顺序的实现原理

  

  