- 高清
- 2.0x
- 1.5x
- 1.25x
- 1.0x
- 0.5x
25 | 静态资源内联
精选留言(35)
lengband丶老师css的内联是不是没有演示啊？2019-06-13 4
Sherry求老师回复啊啊~
有一个疑问、一个问题：
（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 3
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 2 3
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 2 3
sialvsicraw 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 3
Baron资源内联的用法感觉就像是公共模板一样，如果是vue这样的组件开发 应该是用不到。
感觉就跟ejs一样一样的，只不过ejs需要配合node服务端才能使用，这个内联webpack直接把模板引入打包好作者回复: 这个资源内联还是很常见的，以前端监控脚本为例，如果不内联到html里面去而是以请求的方式价值，那假设这个前端监控的脚本请求加载失败的场景是无法监控的到的。
2019-07-04 2
coder关于本节课老师没有展示的html-inline-css-webpack-plugin插件用法：
1. 安装这个插件：
npm i html-inline-css-webpack-plugin -D
2. 在webpack的配置文件中，增加这个插件
const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default;
plugins: [
new HtmlWebpackPlugin(), // 可能依赖这个插件
new HTMLInlineCSSWebpackPlugin(),
],
3. 编译运行可以在dist的html文件中看到效果2019-09-12 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 1 
袋鼠儿搞错了 是这个 跪求解答
ERROR in Error: Child compilation failed:
Module not found: Error: Can't resolve '../../node_modules/lib-flexible/flexib le.js' in 'E:\my-project\src':
Error: Can't resolve '../../node_modules/lib-flexible/flexible.js' in 'E:\my-p roject\src'
Module not found: Error: Can't resolve '../mate.html' in 'E:\my-project\src':
Error: Can't resolve '../mate.html' in 'E:\my-project\src'
目录结构
node_modules
src
-mate.html
-search.html2019-06-24 1 1- 袋鼠儿跪求解答
ERROR in Error: Child compilation failed:
Module not found: Error: Can't resolve '../meta.html' in 'E:\my-project\src':
Error: Can't resolve '../meta.html' in 'E:\my-project\src'
- compiler.js:79 childCompiler.runAsChild
[my-project]/[_html-webpack-plugin@3.2.0@html-webpack-plugin]/lib/compiler.j s:79:16
我的目录结构
node_modules
src
-search.html
-mate.html2019-06-24 1 
好_快老师我有3个问题请教一下：
1、${} 这种语法使用vscode的时候会有语法报错，Mac系统vscode版本号为 1.35.1，请问该如何解决
2、视频中您说因为plugin使用ejs模板，所以支持该语法，但是我去ejs的网站上并没有找到该语法说明，地址为：https://ejs.bootcss.com/
3、求推荐一下ejs系统的学习资料2019-06-16 1
ai_男男谢谢老师，感觉这个课程很值作者回复: 哈哈，感谢夸奖，可以推荐下其他的小伙伴一起学习哈～
2019-06-11 1
生命中的平凡讲的超级棒，JS胖推荐学习的课程果然不错，第一次在极客时间学习技能，体验超级棒。希望作者更新快一点。作者回复: 嗯嗯，感谢夸奖，努力更新中
2019-06-08 1
浩明啦老师为啥raw loader后面跟着 !babel loader 呢？2019-12-24
拯救不开心老师您好，请教一个问题，
当使用了 MiniCssExtractPlugin.loader 之后，我看到打包后，已经将 css 文件添加到 html 中了，
那使用 HTMLInlineCSSWebpackPlugin 在再进行内联 css 的意义是什么？2019-12-19- Geek_573750期待老师开其它的课程，老师讲得太好了哈2019-12-13
花狗是我我感觉25章节和26章节 是不是顺序弄反了？编辑回复: 这个没有反哈
2019-10-15- Sherrystyle-loader使用报错问题有解了：https://www.npmjs.com/package/style-loader
官方属性有调整，webpack官网看起来没有同步，还是旧的属性。
出现了另一个疑问😂
使用style-loader，执行打包之后，打包生成的html里面，并找不到style标签。浏览器打开html，查看网页源代码，也没有style标签。但是，elements里面打开，是有style标签的。样式确实是可以正常渲染的。但是，这是什么逻辑。。为什么会这样呢？作者回复: css-loader 将css转换成commonjs对象，然后css代码就在js里面了。style-loader的作用是在js执行时，动态的创建style标签，然后将 css-loader 转换的样式插入到这个style标签里去的。
2019-09-28 1 - coder更多html-inline-css-webpack-plugin的使用方法可以查看下面的链接
https://github.com/Runjuu/html-inline-css-webpack-plugin作者回复: CSS 内联的演示已经以文章的形式更新到博客里面（https://github.com/cpselvis/blog/issues/5）
CSS 内联的例子（https://github.com/cpselvis/geektime-webpack-course/tree/master/code/chapter03/inline-resource）2019-09-12 
Kyeon老师，请教个问题。在做CSS内联实战的时候发现，第一种方式style-loader内联的话，在webpack打包后生成的html中源码是看不到内联进去的css样式的，只有在浏览器中才能看到，但是第二种方式采用html-inline-css-webpack-plugin插件内联的话，在webpack打包后生成的html中源码是能看到内联进去的css样式的，当然浏览器中也能看到。请问这是为什么啊？谢谢～作者回复: 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#L2602019-08-30
