- 标清
- 2.0x
- 1.5x
- 1.25x
- 1.0x
- 0.5x
玩转webpack
精选留言(32)
2019-06-13老师css的内联是不是没有演示啊？ 4
2019-08-05老师好，我想问下这个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内容 2 3
2019-06-17我用 "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 里面用的话有问题
2 3
2019-06-08raw loader 0.5.1的版本有点老了，在releases上都找不到了。最新版的应该没有问题吧(还没试)
https://github.com/webpack-contrib/raw-loader/releases作者回复: 不能使用最新的 raw-loader 版本哈，它最新的 3.x 版本导出模块直接使用了 export default 的写法，html 里面的模块这么写的话webpack解析不了，需要是 cjs 的写法才行。
3
2019-09-28求老师回复啊啊~
有一个疑问、一个问题：
（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） 2
2019-07-04资源内联的用法感觉就像是公共模板一样，如果是vue这样的组件开发 应该是用不到。
感觉就跟ejs一样一样的，只不过ejs需要配合node服务端才能使用，这个内联webpack直接把模板引入打包好作者回复: 这个资源内联还是很常见的，以前端监控脚本为例，如果不内联到html里面去而是以请求的方式价值，那假设这个前端监控的脚本请求加载失败的场景是无法监控的到的。
2
2019-09-12关于本节课老师没有展示的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文件中看到效果展开 1- 2019-08-14老师，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） 1 
2019-06-24搞错了 是这个 跪求解答
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.html展开 1 1- 2019-06-24跪求解答
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.html展开 1 
2019-06-16老师我有3个问题请教一下：
1、${} 这种语法使用vscode的时候会有语法报错，Mac系统vscode版本号为 1.35.1，请问该如何解决
2、视频中您说因为plugin使用ejs模板，所以支持该语法，但是我去ejs的网站上并没有找到该语法说明，地址为：https://ejs.bootcss.com/
3、求推荐一下ejs系统的学习资料展开 1
2019-06-11谢谢老师，感觉这个课程很值作者回复: 哈哈，感谢夸奖，可以推荐下其他的小伙伴一起学习哈～
1
2019-10-15我感觉25章节和26章节 是不是顺序弄反了？编辑回复: 这个没有反哈
- 2019-09-28style-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标签里去的。
1 - 2019-09-12更多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-08-30老师，请教个问题。在做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#L260
2019-08-08这一节的遗憾是css的内联没有实现, 还有就是rowloader的版本太低了. 3.x 还用0.5x这个差的有点多.作者回复: CSS 内联的演示已经以文章的形式更新到博客里面（https://github.com/cpselvis/blog/issues/5）
CSS 内联的例子（https://github.com/cpselvis/geektime-webpack-course/tree/master/code/chapter03/inline-resource）- 2019-07-25${require(' raw-loader!babel-loader!. /meta.html')} 求助一下，这是什么语法？是html-webpack-plugin插件支持的？还是特有的啊？
作者回复: 是 html-webpack-plugin 支持的
1 
2019-07-17资源内联
rowload
HTML js作者回复: 成功 Get 技能
2019-07-14老师，把你的代码下载下来，install后，npm build都会出错。
webpack --config webpack.prod.js。如下，如果删掉，${ require('raw-loader!babel-loader!../node_modules/lib-flexible/flexible.js')}那就没问题。
Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.
Using browsers option cause some error. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.
If you really need to use option, rename it to overrideBrowserslist.
Learn more at:
https://github.com/browserslist/browserslist#readme
https://twitter.com/browserslist
Hash: 612ae4a46042af593502
Version: webpack 4.35.3
Time: 3487ms
Built at: 2019-07-14 17:20:47
5 assets
Entrypoint index = index_c15023d3.js
Entrypoint search = search.css search_7ca4ff89.js
[3] ./src/images/logo.jpg 63 bytes {1} [built]
[4] ./src/search.js 2.9 KiB {1} [built]
[9] (webpack)/buildin/global.js 475 bytes {1} [built]
[10] ./src/search.less 39 bytes {1} [built]
[11] ./src/index.js + 1 modules 130 bytes {0} [built]
| ./src/index.js 72 bytes [built]
| ./src/helloworld.js 58 bytes [built]
+ 8 hidden modules
ERROR in Error: Child compilation failed:
Module not found: Error: Can't resolve '../node_modules/lib-flexible.js' in 'C :\Users\HP\Desktop\my-project\src':
Error: Can't resolve '../node_modules/lib-flexible.js' in 'C:\Users\HP\Desktop \my-project\src'
Module not found: Error: Can't resolve './meta.html' in 'C:\Users\HP\Desktop\m y-project\src':
Error: Can't resolve './meta.html' in 'C:\Users\HP\Desktop\my-project\src'展开