s

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中，而不时单独生成一个文件。

　　

 1 const path = require('path')
 2 
 3 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 4     //官网除了表示配置打包规则rules，还要实例化一个vueloader插件
 5 
 6 module.exports = { //导出一个对象
 7     mode: 'development',
 8     entry: './src/main.js', //打包入口
 9     /*打包出口,一个对象，指定
10     filename：打包后的js名
11     path，打包后的路径
12     */
13     output: {
14         filename: 'bundle.js',
15         path: path.resolve(__dirname, 'dist')
16             /*由于这里需要绝对路径，需要用到nodejs种的path模块
17             __dirname 表示当前文件夹的绝对路径，
18             这里表示在项目跟目录下新建dist文件作为打包后存放路径
19             */
20     }, //到这里就是webpack最基本的配置，没有用到各种处理器处理js，css，img等资源
21     module: {
22         rules: [{
23                 test: /\.vue$/, // 正则表示匹配.vue结尾的文件
24                 loader: 'vue-loader',
25             },
26             {
27                 test: /\.(jpg|jpeg|png|gif)$/,
28                 // loader: 'file-loader',
29                 loader: 'url-loader',
30                 options: {
31                     limit: 2048, //表示小鱼2048bytes的文件使用base64直接打包到js中
32                     name: '[name].[ext]' //这里可以查阅webpackjs.com 查看file-loader的配置选项
33                         //这里表示使用原文件名加原扩展进行打包生产文件到指定目录下！！！
34                 }
35             },
36         ]
37     },
38     plugins: [
39         new VueLoaderPlugin(), //vue插件实例
40     ],
41     resolve: { //表示一些解决方案
42         alias: { //别名
43             'vue': 'vue/dist/vue.js', //这里表示导入vue时，导入此处指定路径下的文件
44         }
45     }
46 }
View Code

 使用 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文件。

　　

 1 const path = require('path')
 2 
 3 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 4     //官网除了表示配置打包规则rules，还要实例化一个vueloader插件
 5 
 6 module.exports = { //导出一个对象
 7     mode: 'development',
 8     entry: './src/main.js', //打包入口
 9     /*打包出口,一个对象，指定
10     filename：打包后的js名
11     path，打包后的路径
12     */
13     output: {
14         filename: 'bundle.js',
15         path: path.resolve(__dirname, 'dist')
16             /*由于这里需要绝对路径，需要用到nodejs种的path模块
17             __dirname 表示当前文件夹的绝对路径，
18             这里表示在项目跟目录下新建dist文件作为打包后存放路径
19             */
20     }, //到这里就是webpack最基本的配置，没有用到各种处理器处理js，css，img等资源
21     module: {
22         rules: [{
23                 test: /\.vue$/, // 正则表示匹配.vue结尾的文件
24                 loader: 'vue-loader',
25             },
26             {
27                 test: /\.(jpg|jpeg|png|gif)$/,
28                 // loader: 'file-loader',
29                 loader: 'url-loader',
30                 options: {
31                     limit: 2048, //表示小鱼2048bytes的文件使用base64直接打包到js中
32                     name: '[name].[ext]' //这里可以查阅webpackjs.com 查看file-loader的配置选项
33                         //这里表示使用原文件名加原扩展进行打包生产文件到指定目录下！！！
34                 }
35             },
36             { //打包css规则
37                 test: /\.css$/,
38                 use: ['style-loader', 'css-loader'], //使用多个loader语法，use+数组，数组里面传入多个loader 的name，并且webpack使用数组里的loader，顺序是从右往左，从下往上去依次加载并使用这些loader
39             },
40         ]
41     },
42     plugins: [
43         new VueLoaderPlugin(), //vue插件实例
44     ],
45     resolve: { //表示一些解决方案
46         alias: { //别名
47             'vue': 'vue/dist/vue.js', //这里表示导入vue时，导入此处指定路径下的文件
48         }
49     }
50 }
View Code

使用 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！！！

　配置打包规则：

　　

 1 const path = require('path')
 2 
 3 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 4     //官网除了表示配置打包规则rules，还要实例化一个vueloader插件
 5 
 6 module.exports = { //导出一个对象
 7     mode: 'development',
 8     entry: './src/main.js', //打包入口
 9     /*打包出口,一个对象，指定
10     filename：打包后的js名
11     path，打包后的路径
12     */
13     output: {
14         filename: 'bundle.js',
15         path: path.resolve(__dirname, 'dist')
16             /*由于这里需要绝对路径，需要用到nodejs种的path模块
17             __dirname 表示当前文件夹的绝对路径，
18             这里表示在项目跟目录下新建dist文件作为打包后存放路径
19             */
20     }, //到这里就是webpack最基本的配置，没有用到各种处理器处理js，css，img等资源
21     module: {
22         rules: [{
23                 test: /\.vue$/, // 正则表示匹配.vue结尾的文件
24                 loader: 'vue-loader',
25             },
26             {
27                 test: /\.(jpg|jpeg|png|gif)$/,
28                 // loader: 'file-loader',
29                 loader: 'url-loader',
30                 options: {
31                     limit: 2048, //表示小鱼2048bytes的文件使用base64直接打包到js中
32                     name: '[name].[ext]' //这里可以查阅webpackjs.com 查看file-loader的配置选项
33                         //这里表示使用原文件名加原扩展进行打包生产文件到指定目录下！！！
34                 }
35             },
36             {
37                 test: /\.css$/,
38                 use: ['style-loader', 'css-loader'], //使用多个loader语法，use+数组，数组里面传入多个loader 的name，并且webpack使用数组里的loader，顺序是从右往左，从下往上去依次加载并使用这些loader
39             },
40             { //配置stylusl-oader
41                 test: /\.styl(us)?$/,
42                 use: ['style-loader', 'css-loader', 'stylus-loader'],
43             },
44         ]
45     },
46     plugins: [
47         new VueLoaderPlugin(), //vue插件实例
48     ],
49     resolve: { //表示一些解决方案
50         alias: { //别名
51             'vue': 'vue/dist/vue.js', //这里表示导入vue时，导入此处指定路径下的文件
52         }
53     }
54 }
View Code

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 ，之间还要用  /  隔开
posted @ 2021-05-08 12:42  努力不搬砖的iori  阅读(152)  评论(0)  编辑  收藏  举报