求老师回复啊啊~ 有一个疑问、一个问题：（1）疑问： style-loader的作用，官方解释：Adds CSS to the DOM by injecting a <style> tag. 所以，style-loader的功能，默认不就是把css插入到html的<style>里吗？为什么还要添加options才行呢？（2）问题： css资源内联没有演示。自己试了下方案⼀：借助 style-loader。设置了options有报错，提示不支持singelon属性。 ValidationError: Invalid options object. Style Loader has been initialised using an options object that does not match the API schema. - options has an unknown property 'singleton'. These properties are valid: object { injectType?, attributes?, insert?, base? }

作者回复: style-loader 插入样式是一个动态的过程，你可以直接查看打包后的 html 源码并不会看到 html 有 style 样式的。 css-loader 的作用是将 css 转换成 commonjs 对象，也就是样式代码会被放到 js 里面去了。style-loader 是代码运行时动态的创建 style 标签，然后将 css style 插入到 style 标签里面去，对应的源码：https://github.com/webpack-contrib/style-loader/blob/master/src/runtime/injectStylesIntoStyleTag.js#L260 CSS 内联的思路是：先将 css 提取打包成一个独立的 css 文件（使用MiniCssExtractPlugin.loader），然后读取提取出的 css 内容注入到页面的 style 里面去。这个过程在构建阶段完成。 CSS 内联的演示已经以文章的形式更新到博客里面（https://github.com/cpselvis/blog/issues/5） CSS 内联的例子（https://github.com/cpselvis/geektime-webpack-course/tree/master/code/chapter03/inline-resource）

2019-09-28

2

17

Baron

资源内联的用法感觉就像是公共模板一样，如果是vue这样的组件开发应该是用不到。感觉就跟ejs一样一样的，只不过ejs需要配合node服务端才能使用，这个内联webpack直接把模板引入打包好

作者回复: 这个资源内联还是很常见的，以前端监控脚本为例，如果不内联到html里面去而是以请求的方式价值，那假设这个前端监控的脚本请求加载失败的场景是无法监控的到的。

2019-07-04



9

logic

老师好，我想问下这个raw-loader 导入的js ,css 如何进行压缩处理？

作者回复: raw-loader 内联进去的样式或者脚本的压缩都是基于 html-webpack-plugin 进行处理的。比如： htmlWebpackPlugins.push(new HtmlWebpackPlugin({ template: path.join(projectRoot, `src/pages/${pageName}/index.html`), filename: `${filename}${pageName}.html`, chunks: [pageName], // assetsPrefix: `${assetsPrefix}/`, inject: inject && isEntryFileExists, minify: minifyHtml ? { html5: true, collapseWhitespace: true, preserveLineBreaks: false, minifyCSS: true, minifyJS: true, removeComments: false } : false })); 这个插件有一个minify参数，用于压缩 html 里面内联的 css/js/html内容

2019-08-05

3

4

Adam

我用 "raw-loader": "^3.0.0", 可以在 search.html 导入 meta.html 和 flexible.js，具体语句是： ``` <head> ${require('raw-loader!./meta.html').default} <title>Document</title> <script type="text/javascript"> ${require('raw-loader!babel-loader!../../node_modules/lib-flexible/flexible.js').default} </script> </head> ``` 但是我去 raw-loader 的 home page https://github.com/webpack-contrib/raw-loader 并没有找到具体require 的使用方法，我试了里面 readme 的 import 方式导入，但是 npm run build 会说 invalid token。

作者回复: 需要使用 raw-loader 的 0.5.1 版本哈，最新的版本的 raw-loader 使用了导出模块的时候使用了 export default 语法， html 里面用的话有问题

2019-06-17

6

4

得闲读书

老师，讲的太棒了，感觉学到了很多东西，之前有许多代码层面的东西，用webpack可以轻松解决，期待接下来的更新。

作者回复: 嗯嗯感谢，你的支持是我更新高质量视频的动力

2019-06-09



4

sialvsic

raw loader 0.5.1的版本有点老了，在releases上都找不到了。最新版的应该没有问题吧(还没试) https://github.com/webpack-contrib/raw-loader/releases

作者回复: 不能使用最新的 raw-loader 版本哈，它最新的 3.x 版本导出模块直接使用了 export default 的写法，html 里面的模块这么写的话webpack解析不了，需要是 cjs 的写法才行。

2019-06-08

2

4

ai_男男

谢谢老师，感觉这个课程很值

作者回复: 哈哈，感谢夸奖，可以推荐下其他的小伙伴一起学习哈～

2019-06-11



2

生命中的平凡

讲的超级棒，JS胖推荐学习的课程果然不错，第一次在极客时间学习技能，体验超级棒。希望作者更新快一点。

作者回复: 嗯嗯，感谢夸奖，努力更新中

2019-06-08



2

Kyeon

老师，请教个问题。在做CSS内联实战的时候发现，第一种方式style-loader内联的话，在webpack打包后生成的html中源码是看不到内联进去的css样式的，只有在浏览器中才能看到，但是第二种方式采用html-inline-css-webpack-plugin插件内联的话，在webpack打包后生成的html中源码是能看到内联进去的css样式的，当然浏览器中也能看到。请问这是为什么啊？谢谢～

2019-08-30



1

Geek_e3a80d

老师，css内联不演示吗？我试了下，新版本的 style-loader 设置 singleton 参数会报错

作者回复: CSS 内联的演示已经以文章的形式更新到博客里面（https://github.com/cpselvis/blog/issues/5） CSS 内联的例子（https://github.com/cpselvis/geektime-webpack-course/tree/master/code/chapter03/inline-resource）

2019-08-14

2

1

收起评论