webpack learn1-配置项目加载各种静态资源及css预处理器2
2024-08-25 06:40:32
继续在webpack.config.js中配置loader
{
test:/\.css$/,
use: [
'style-loader',
'css-loader'
]
},{
test:/\.(jpg|svg|jpeg|png|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name]-aa.[ext]'
}
}
]
}
变成下面:
1 const path = require('path')
2
3 const VueLoaderPlugin = require('vue-loader/lib/plugin')
4
5 module.exports = {
6 entry: path.join(__dirname,'src/index.js'),
7 output: {
8 filename: 'bundle.js',
9 path: path.join(__dirname,'dist')
10 },
11 module: {
12 rules: [
13 {
14 test: /\.vue$/,
15 loader: 'vue-loader'
16 },{
17 test:/\.css$/,
18 use: [
19 'style-loader',
20 'css-loader'
21 ]
22 },{
23 test:/\.(jpg|svg|jpeg|png|gif)$/,
24 use: [
25 {
26 loader: 'url-loader',
27 options: {
28 limit: 1024,
29 name: '[name]-aa.[ext]'
30 }
31 }
32 ]
33 }
34 ]
35 },
36 plugins:[
37 new VueLoaderPlugin()
38 ]
39 }
需要输入命令:
npm i css-loader url-loader file-loader style-loader
再添加css预处理器stylus:先在webpack.config.js中添加loader ,然后安装stylus和stylus-loader
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry: path.join(__dirname,'src/index.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname,'dist')
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},{
test:/\.css$/,
use: [
'style-loader',
'css-loader'
]
},{
test: /\.styl/,
use: [
'style-loader',
'css-loader',
'stylus-loader'
]
},{
test:/\.(jpg|svg|jpeg|png|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name]-aa.[ext]'
}
}
]
}
]
},
plugins:[
new VueLoaderPlugin()
]
}
输入命令
npm i stylus stylus-loader
最新文章
- maven引入的jar带了时间戳
- js通过sessionStorage实现的返回上一页
- CloudSim样例分析
- 开始使用Mac OS X——写给Mac新人
- 一个无聊的实验:验证网站是否通过web容器还是微服务部署
- Java 程序检查远程服务器状态
- on事件绑定阻止冒泡的问题
- js获取url，截取url参数，截取url后文件名
- this->的作用
- js面向对象和php面向对象的区别
- Python Revisited Day 04 （控制结构与函数）
- linux命令去掉_bak
- 剑指offer（55）链表中环的入口节点
- python：函数初始
- [转]MVC实用架构设计（三）——EF-Code First（3）：使用T4模板生成相似代码
- 获得WebBrowser中的图片数据
- 一些常用的排序算法(C版）
- opsmanage 自动化运维管理平台
- adb shell中的am pm命令
- bash里wget失败