• 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的呢，老师？
    
     4
  • 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
  • 憨才好运
    2020-01-28
    老师，我遇到一个问题，您看有没有时间解答。
    我使用的是scss，安装的版本是：
      "node-sass": "^4.13.1",
      "sass-loader": "^8.0.2",
    但是在运行build的时候遇到了报错。我通过把css-loader删除掉解决了，但是不明白为什么。这个是我解决方案的出处：
    https://github.com/webpack-contrib/css-loader/issues/295
    报错：
    ERROR in ./src/test.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/test.scss)
    Module build failed (from ./node_modules/css-loader/dist/cjs.js):
    CssSyntaxError

    (1:1) Unknown word

    > 1 | var api = require("!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
        | ^
      2 | var content = require("!!../node_modules/css-loader/dist/cjs.js!../node_modules/sass-loader/dist/cjs.js!./test.scss");
    展开
    
    
  • Geek_c67c0a
    2019-12-21
    老师，我跟着步骤做的，npm run build 出现以下错误，ERROR in ./src/search.css (./node_modules/css-loader/dist/cjs.js!./src/search.css)
    Module build failed (from ./node_modules/css-loader/dist/cjs.js):
    
    
  • 侯志颖
    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 顺序的实现原理

    
    
我们在线，来聊聊吧