援军的代码记录小本本..

2 webpack配置项目加载各种静态资源及css预处理器

vue webpack vue-loader
字数统计: 337阅读时长: 1 min
2019/04/08 Share

配置环境，插件模块，处理静态资源，预处理css

配置模块

配置webpack.config.js，注意配置中的逗号,，我因为少了一个导致build失败

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

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: /\.vue\.html$/, loader: 'vue-loader' },
            { 
                test: /\.css$/, 
                use: [
                    'style-loader',
                    'css-loader' 
                ]
            },
            {
                test: /\.styl/,//支持css预处理
                use: [
                    'style-loader',
                    'css-loader',
                    'stylus-loader'
                ]
            },
            {
                test: /\.(gif|jpg|jpeg|png|svg)$/,//匹配图片文件
                use: [
                    {
                        options: {
                            limit: 1024,//限制图片大小，符合标准的将会使用base64编码以减少请求
                            name: '[name].[ext]'//文件重命名，名称+后缀
                        }
                    }
                    ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

上面代码引用的模块有style-loader,css-loader,stylus-loader,url-loader,用于处理css样式以及文件名称

需要安装依赖的包

1
npm i style-loader css-loader stylus-loader url-loader filse-loader

引入模块

1
2
3
4
5
6
7
8
9
10
11
12
13
import Vue from 'vue'
import App from './app.vue'

import './assets/styles/test.css'
import './assets/styles/test-stylus.styl'
import './assets/images/logo-tv.png'

const root =document.createElement('div')
document.body.appendChild(root)

new Vue ({
    rander: (h)=>h(App)
}).$mount(root)

打包生成

1
npm run build

生成后会在dist/bundle.js中发现静态资源css和小图片文件被加载到同一个js文件中，webpack为我们处理了相关的静态资源

原文作者：Menhood

原文链接：http://github.menhood.wang/2019/04/08/2-webpack配置项目加载各种静态资源及css预处理器/

发表日期：April 8th 2019, 10:53:57 pm

更新日期：April 11th 2019, 12:07:16 am

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 配置模块
  2. 2. 引入模块
  3. 3. 打包生成
Total : 4
2019
vue webpack vue-loader 说明 新开始