-
- 菇嘟泡泡 2022-11-09
limit把图片小于1024的转成base64
- 0赞 · 0采集
-
- 菇嘟泡泡 2022-11-09
纠正上节课的写法问题
- 0赞 · 0采集
-
- 慕沐6592840 2022-04-04
css 预处理器 styl
- 0赞 · 0采集
-
- qq_虎啸祥瑞_04391808 2022-03-10
其它的loader的配置- 0赞 · 0采集
-
- qq_加油君_1 2020-06-12
加载scss文件
1、配置
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
},
2、npm i sass-loader node-sass
- 0赞 · 0采集
-
- lpzh_ 2020-04-26
- 2-2(7)根据打包过程的错误提示，安装style-loader和stylus,安装命令: npm install stylus-loader stylus
-
截图0赞 · 0采集
-
- lpzh_ 2020-04-26
- 2-2(6) 1)在入口文件(index.js)中导入test.stylus.styl文件； 2)执行打包命令:npm run build 如下图
-
截图0赞 · 0采集
-
- lpzh_ 2020-04-26
- 2-2(5)新建test.stylus.styl文件，在这个文件中，既可以以缩进的形式编写CSS样式(如下图)，也可以编写传统的CSS样式形式。
-
截图0赞 · 0采集
-
- lpzh_ 2020-04-26
- 2-2(4)配置css资源预处理loader,如下图:
-
截图0赞 · 0采集
-
- lpzh_ 2020-04-26
- 2-2(3)执行webpack打包命令: npm run build 可以看到，dist目录下输出了图片静态资源，如下图所似。通过查看bundle.js文件，发现css文件内容已经被打包到bundle.js文件中。
-
截图0赞 · 0采集
-
- lpzh_ 2020-04-26
- 2-2(2)在打包入口文件(index.js)中使用关键字import导入静态资源文件(css、image)，如下图:
-
截图0赞 · 0采集
-
- lpzh_ 2020-04-26
- 2-2(1)上一节使用webpack成功打包编译了js文件，当然，除了js文件之外，webpack可以打包一切前端静态资源，只需完成以下几个步骤: 1)webpack.config.js中配置相应的打包规则，可以仿照上一节配置打包js文件的的规则来配置其他静态资源的打包规则； 2)使用npm安装对应的 loader【如下图】； 3)在项目中引入其他静态资源； 4)执行webpack打包命令:npm run build
-
截图0赞 · 0采集
-
- 慕神0494925 2019-10-16
配置文件写好以后要npm install安装后才能使用
安装好以后要在js文件中import这些loader工具
- 0赞 · 0采集
-
- qq_努力一点点_0 2019-09-22
options设置图片大小检验。
安装时file-loader 不要忘。
-
截图0赞 · 0采集
-
- qq_努力一点点_0 2019-09-22
css文件或者style写法，待验证
-
截图0赞 · 0采集
-
- 尼古拉斯李铁蛋 2019-08-19
npm i stylus-loader stylus
-
截图0赞 · 0采集
-
- 尼古拉斯李铁蛋 2019-08-19
stylus-loader
-
截图0赞 · 0采集
-
- 尼古拉斯李铁蛋 2019-08-19
style-loader css-loader url-loader
-
截图0赞 · 0采集
-
- 凉小小小薄 2019-08-13
webpack中各种类型文件的处理 use可以是一个数组 也可以是多个对象组成的数组
loader的两个目标 test标识出需要被转换的文件 use被转换的文件用何种转换模块
-
截图0赞 · 0采集
-
- 闭关中 2019-01-30
上一节：可复用的代码抽成模块。
- 0赞 · 0采集
-
- qq_安之虚静于幻_0 2019-01-23
css-loader和style-loader的作用
-
截图0赞 · 0采集
-
- qq_安之虚静于幻_0 2019-01-23
url-loader的作用
-
截图0赞 · 0采集
-
- oufei 2019-01-08
css预处理器
loader 处理图片
css loader处理器
- 0赞 · 0采集
-
- oufei 2019-01-08
利用loader将小图片变成js代码
重新定义文件内容
- 0赞 · 0采集
-
- qq_曾爱过你_0 2018-12-13
npm install style-loader url-loader file-loader
- 0赞 · 0采集
-
- 千墨若白 2018-12-05
##2,在根目录下新建webpack.config.js文件,并写入以下代码
// 为了在浏览器中打开,建立webpack这个文件
// 引入路径
const path = require('path')
module.exports = {
// 文件的输入
entry:path.join(__dirname,'src/index.js'),
//文件的输出
output:{
filename:'bundle.js',
path:path.join(__dirname, 'dist')
},
<!-- 由于报错:You may need an appropriate loader to handle this file type. 所以我们需要添加module属性 -->
module:{
rules:[
### <!-- 加载.vue的文件 --> (需安装 npm i vue-loader )
{
test:/\.vue$/, //此为正则表达式,目的是为了识别.vue结尾的文件
loader:'vue-loader'
},
### <!-- 加载.css或者style的样式 --> (需安装 npm i css-loader style-loader)
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
],
},
## <!-- 加载图片类型的文件 --> (需安装 npm i url-loader
(因为url-loader需要依赖file-loader) file-loader)
{
test:/\.(gif|jpg|jpeg|png|svg)$/,
use:[
{
loader:'url-loader',
options:{
# limit:1024, ( 最少1024,可以减少http请求)
# name:'[name].[ext]' (重新输出名字 ext为扩展名如jpg等 此外还可以自己加名字,如: '[name]-aaa.[ext]')
}
}
]
},
{
test: /\.styl/,
use:[
'style-loader',
'css-loader',
## 'stylus-loader' (需 npm i stylus-loader)
]
}
]
}
}
###css预处理器 stylus
stylus可以不写标点符号,如:
body
font-size 12px
####
当在终端中输入 mpm run build 之后
会在根目录下生成dist目录,具体如
>dist
+ bundle.js
+ 各种图片文件
所有的css样式都写在了bundle.js里面去了
- 0赞 · 0采集
-
- Simooge 2018-11-21
npm i style-loader url-loader file-loader
- 0赞 · 0采集
-
- C_CAT 2018-10-08
从教程的中理解到：use 属性的值是一个数组，能使用多个loader 。然后数组内loader的使用顺序是 index 越大越先使用
-
截图0赞 · 0采集
-
- C_CAT 2018-10-08
使用loader后就可以在JS中引用这些非JS的资源了。可以理解，JS只能解析JS文件，使用loader后就能在JS中解析其他的资源
-
截图0赞 · 0采集
-
- C_CAT 2018-10-08
对图片进行处理使用 url-loader。
url-loader 是对 file-loader进行了封装，如果图片小于 limit 设置的值，url-loader 就会对图片进行base64转换，然后写入JS中，减少请求。如果大于limit 的值就会用 file-loader 读取图片，再存放在其他地方。
limit：设置进行转换的图片的最大大小。
name：没有进行转换的图片的名称。[name] -- 原始图片的名称，[ext] -- 原始图片的扩展名
-
截图0赞 · 0采集
