webpack使用2-常用的几个loader的使用

webpack官方提供了非常多的loader，每个都记住不太容易，可以去 官方中文网站：https://www.webpackjs.com/，去查阅一些loader的使用方法。下面就挑选几个常用的loader做讲解使用[大前提就是npm 先安装对应的loader]。

使用file-loader：

-----《App.vue》-------
<template>
    <div>
        <p>this vue app</p>
        <img :src="'./dist/'+img" alt="hh">
    </div>
</template>
<script>
import img from './static/images/cat.jpeg' //导入一张图片，入口文件使用了这个App.vue，解析到App组件中用了图片资源，那么webpack就会去配置文件中找是否有对该类型文件做打包处理。有就打包，没有就报错
export default {
    name:'App',
    img:'',
    created(){
        this.img = img;
        console.log(this.img)
    }
}
</script>
<style scoped>

</style>

webpack.config.js配置文件

const path = require('path')

const VueLoaderPlugin = require('vue-loader/lib/plugin')
    //官网除了表示配置打包规则rules，还要实例化一个vueloader插件

module.exports = { //导出一个对象
    mode: 'development',
    entry: './src/main.js', //打包入口
    /*打包出口,一个对象，指定
    filename：打包后的js名
    path，打包后的路径
    */
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
            /*由于这里需要绝对路径，需要用到nodejs种的path模块
            __dirname 表示当前文件夹的绝对路径，
            这里表示在项目跟目录下新建dist文件作为打包后存放路径
            */
    }, //到这里就是webpack最基本的配置，没有用到各种处理器处理js，css，img等资源
    module: {
        rules: [{
            test: /.vue$/, // 正则表示匹配.vue结尾的文件
            loader: 'vue-loader',
        }, { //配置文件loader，用于打包图片资源，默认打包生产的文件命名是 hash字符串命名的，可以在选项中配置打包后的文件名
            test: /.(jpg|jpeg|png|gif)$/,
            loader: 'file-loader',

 　　　　　　　　options: {//配置 选项

                name: '[name].[ext]' //这里可以查阅webpackjs.com 查看file-loader的配置选项

                    //这里表示使用原文件名加原扩展进行打包生产文件到指定目录下！！！

            }

        }]
    },
    plugins: [
        new VueLoaderPlugin(), //vue插件实例
    ],
    resolve: { //表示一些解决方案
        alias: { //别名
            'vue': 'vue/dist/vue.js', //这里表示导入vue时，导入此处指定路径下的文件
        }
    }
}

 使用 url-loader：

　　　url-loader是基于file-loader的，所以使用url-loader的前提就是安装file-loader，区别在于：url-loader可以不必一定生成新文件，url可以配置limit选项，表示小鱼这个limit规定的byte的文件直接使用base64编码打包在js中，而不时单独生成一个文件。

　　

const path = require('path')

const VueLoaderPlugin = require('vue-loader/lib/plugin')
    //官网除了表示配置打包规则rules，还要实例化一个vueloader插件

module.exports = { //导出一个对象
    mode: 'development',
    entry: './src/main.js', //打包入口
    /*打包出口,一个对象，指定
    filename：打包后的js名
    path，打包后的路径
    */
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
            /*由于这里需要绝对路径，需要用到nodejs种的path模块
            __dirname 表示当前文件夹的绝对路径，
            这里表示在项目跟目录下新建dist文件作为打包后存放路径
            */
    }, //到这里就是webpack最基本的配置，没有用到各种处理器处理js，css，img等资源
    module: {
        rules: [{
                test: /.vue$/, // 正则表示匹配.vue结尾的文件
                loader: 'vue-loader',
            },
            {
                test: /.(jpg|jpeg|png|gif)$/,
                // loader: 'file-loader',
                loader: 'url-loader',
                options: {
                    limit: 2048, //表示小鱼2048bytes的文件使用base64直接打包到js中
                    name: '[name].[ext]' //这里可以查阅webpackjs.com 查看file-loader的配置选项
                        //这里表示使用原文件名加原扩展进行打包生产文件到指定目录下！！！
                }
            },
        ]
    },
    plugins: [
        new VueLoaderPlugin(), //vue插件实例
    ],
    resolve: { //表示一些解决方案
        alias: { //别名
            'vue': 'vue/dist/vue.js', //这里表示导入vue时，导入此处指定路径下的文件
        }
    }
}

 使用 css-loader：

　　打包css样式需要用到css-loader【解析css文件【包括css之间的依赖的解析，处理到一个css对象中】，并导出这个css对象 】& style-loader【将css-loader解析完成并返回的css代码渲染到dom中】! 【官网api：https://www.webpackjs.com/loaders/】

App.vue中导入css样式
    import './static/css/test.css'

　　webpack打包碰到.css文件就去配置文件中找打包规则，是否设置打包css文件。

　　

const path = require('path')

const VueLoaderPlugin = require('vue-loader/lib/plugin')
    //官网除了表示配置打包规则rules，还要实例化一个vueloader插件

module.exports = { //导出一个对象
    mode: 'development',
    entry: './src/main.js', //打包入口
    /*打包出口,一个对象，指定
    filename：打包后的js名
    path，打包后的路径
    */
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
            /*由于这里需要绝对路径，需要用到nodejs种的path模块
            __dirname 表示当前文件夹的绝对路径，
            这里表示在项目跟目录下新建dist文件作为打包后存放路径
            */
    }, //到这里就是webpack最基本的配置，没有用到各种处理器处理js，css，img等资源
    module: {
        rules: [{
                test: /.vue$/, // 正则表示匹配.vue结尾的文件
                loader: 'vue-loader',
            },
            {
                test: /.(jpg|jpeg|png|gif)$/,
                // loader: 'file-loader',
                loader: 'url-loader',
                options: {
                    limit: 2048, //表示小鱼2048bytes的文件使用base64直接打包到js中
                    name: '[name].[ext]' //这里可以查阅webpackjs.com 查看file-loader的配置选项
                        //这里表示使用原文件名加原扩展进行打包生产文件到指定目录下！！！
                }
            },
            { //打包css规则
                test: /.css$/,
                use: ['style-loader', 'css-loader'], //使用多个loader语法，use+数组，数组里面传入多个loader 的name，并且webpack使用数组里的loader，顺序是从右往左，从下往上去依次加载并使用这些loader
            },
        ]
    },
    plugins: [
        new VueLoaderPlugin(), //vue插件实例
    ],
    resolve: { //表示一些解决方案
        alias: { //别名
            'vue': 'vue/dist/vue.js', //这里表示导入vue时，导入此处指定路径下的文件
        }
    }
}

使用 stylus-loader：

　　stylus是目前Vue开发中被广泛使用的css预处理器【css 框架】【因为Stylus是来源于Node.js社区,与js关系密切】，所以打包stylus文件也是用的比较多的地方。

　　编写stylus：

body
    background:#fff url(../images/cat.jpeg) no-repeat fixed center center/ cover
    //表示给body加上cat.jpeg这个背景，不重复，并且铺满整个viewport【background-size：cover】，center center/ cover 这里简写一定要用/ 隔开 background-position和background-size！！！

　配置打包规则：

　　

const path = require('path')

const VueLoaderPlugin = require('vue-loader/lib/plugin')
    //官网除了表示配置打包规则rules，还要实例化一个vueloader插件

module.exports = { //导出一个对象
    mode: 'development',
    entry: './src/main.js', //打包入口
    /*打包出口,一个对象，指定
    filename：打包后的js名
    path，打包后的路径
    */
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
            /*由于这里需要绝对路径，需要用到nodejs种的path模块
            __dirname 表示当前文件夹的绝对路径，
            这里表示在项目跟目录下新建dist文件作为打包后存放路径
            */
    }, //到这里就是webpack最基本的配置，没有用到各种处理器处理js，css，img等资源
    module: {
        rules: [{
                test: /.vue$/, // 正则表示匹配.vue结尾的文件
                loader: 'vue-loader',
            },
            {
                test: /.(jpg|jpeg|png|gif)$/,
                // loader: 'file-loader',
                loader: 'url-loader',
                options: {
                    limit: 2048, //表示小鱼2048bytes的文件使用base64直接打包到js中
                    name: '[name].[ext]' //这里可以查阅webpackjs.com 查看file-loader的配置选项
                        //这里表示使用原文件名加原扩展进行打包生产文件到指定目录下！！！
                }
            },
            {
                test: /.css$/,
                use: ['style-loader', 'css-loader'], //使用多个loader语法，use+数组，数组里面传入多个loader 的name，并且webpack使用数组里的loader，顺序是从右往左，从下往上去依次加载并使用这些loader
            },
            { //配置stylusl-oader
                test: /.styl(us)?$/,
                use: ['style-loader', 'css-loader', 'stylus-loader'],
            },
        ]
    },
    plugins: [
        new VueLoaderPlugin(), //vue插件实例
    ],
    resolve: { //表示一些解决方案
        alias: { //别名
            'vue': 'vue/dist/vue.js', //这里表示导入vue时，导入此处指定路径下的文件
        }
    }
}

app.vue组件中引入stylus：

　　

import './static/css/test.styl'

　　执行打包命令，打开放置app.vue的html，发现stylus中的css样式被插入到 <style>中！

　　这里碰到两个问题：

　　1.默认不带版本号安装的 stylus-loader打包stylus报错，百度说是版本太高，uninstall原来的版本，npm stylus时 带上3.0.2版本号，后执行打包命令=》 success！

　　2.background-image/size/position/color/attachment/repeat 等属性简写问题：既要注意顺序　　          　　　　　　　　　　　　【https://blog.csdn.net/weixin_39256994/article/details/78762714】，background-position和background-size ，之间还要用  /  隔开