前端笔记-webpack加载前端资源（图片，css等）

最新推荐文章于 2023-12-16 23:53:02 发布

IT1995

最新推荐文章于 2023-12-16 23:53:02 发布

阅读量4.3k

点赞数 24

CC 4.0 BY-SA版权

分类专栏： web前端 Vue 文章标签： webpack vue

本文链接：https://blog.csdn.net/qq78442761/article/details/98482787

web前端同时被 2 个专栏收录

186 篇文章

订阅专栏

Vue

34 篇文章

订阅专栏

本文详细介绍如何在Webpack配置文件中设置模块规则，包括加载Vue组件、CSS预处理、图片处理等，通过具体代码示例展示如何在Vue项目中集成并使用这些配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本概念

代码与实例

基本概念

通过在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()
    ]
}