目錄

?

基本概念

代碼與實例

---

?

基本概念

通過在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

bodyfont-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()] }

?

總結

以上是生活随笔為你收集整理的前端笔记-webpack加载前端资源（图片，css等）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。