前端笔记-webpack加载前端资源(图片,css等)
目录基本概念代码与实例基本概念通过在webpack.config.js这个文件中添加module rules进行如下代码:这里分别是加载vue,以及css,和styl样式和图片styl用于css预处理,模块化编写css这里还要说下图片,这里的options为其他的选项,比如:test: /\.(gif|jpg|jpeg|png|svg)$/,...
·
目录
基本概念
通过在webpack.config.js这个文件中添加module rules进行如下代码:
这里分别是加载vue,以及css,和styl样式和图片
styl用于css预处理,模块化编写css
这里还要说下图片,这里的options为其他的选项,比如:
test: /\.(gif|jpg|jpeg|png|svg)$/,
use: [
{
loader: 'url-loader',
options:{
limit: 1024,
name: '[name] aaa.[ext]'
}
}
]
这里限制图片大小为1024,大了的用base64压缩,把名字打包为[name] aaa.[ext]
如下添加的图片和css、styl在bundle.js中都能找到
他会将其中的内容都放到bundle.js中
代码与实例
文件结构如下:
源码如下:
test-stylus.styl
body
font-size: 20px
test.css
body{
color: red;
background-image: url('../images/gen.svg')
}
app.vue
<template>
<div id="test">{{text}}</div>
</template>
<script>
export default {
data(){
return {
text: "abc"
}
}
}
</script>
<style>
#test{
color: red;
}
</style>
index.js
import Vue from 'vue'
import App from './app.vue'
import './asserts/images/bg.jpg'
import './asserts/styles/test.css'
import './asserts/styles/test-stylus.styl'
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
render: (h) => h(App)
}).$mount(root)
package.json
{
"name": "vuetestdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"css-loader": "^3.1.0",
"file-loader": "^4.1.0",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"url-loader": "^2.1.0",
"vue": "^2.6.10",
"vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"
}
}
webpack.config.js
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: /\.styl/,
use: [
'style-loader',
'css-loader',
'stylus-loader'
]
},
{
test: /\.css$/,
// use: ['vue-style-loader', 'css-loader', 'style-loader']
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(gif|jpg|jpeg|png|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name] aaa.[ext]'
}
}
]
}
]
},
plugins: [
new VueLoaderPlugin()
]
}
更多推荐
已为社区贡献33条内容
所有评论(0)