zoukankan      html  css  js  c++  java
  • 4.WebPack-Loader

    一.什么是Loader

    WebPack默认只“认识”以*.js结尾的文件,如果想处理其他类型的文件,就必须添加Loader,有各种各样的Loader,每个Loader可处理不同类型的文件,每当用WebPack打包时遇到不认识的文件(通过后缀名辨别),如果添加了相应的Loader,就会调用指定的Loader去处理,处理完之后,如果没有后继的Loader去处理这类文件,就会返回给调用端,也就是WebPack,WebPack继续处理,直到处理完成。

    二.各种各样的Loader

    1.style-loader和css-loader

    我们在./src/目录下新建一个index.css文件

    body{

    background-color: red;

    }

    然后在index.js文件中添加如下操作

    import "./index.css"

    执行

    npm run build

    会产生以下输出结果

    image

    ERROR in ./src/index.css 1:4
    Module parse failed: Unexpected token (1:4)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    > body{
    |     background-color: #ddd;
    | }
      @ ./src/index.js 1:0-20

    我们安装css-loader和style-loader

    image

    在webpack.config.js配置文件中添加Loader

    const path = require("path");

    module.exports = {

    entry: "./src/index.js",

    output: {

    filename: "bundle.js",

    path: path.resolve(__dirname, "dist")

        },

    module: {

    rules: [

                {

    test: /.css$/, //匹配规则,匹配就使用一下Loader去处理

    use: [ "style-loader","css-loader",] //这里要注意顺序,Loader加载顺序规定为从右到左

                }

            ]

        }

    };

    注意,css-loader负责读取css文件以及解释import和require()语句,style-loader负责产生<style></style>标记并把样式字符串插入到该标记中。

    我们再次打包

    npm run build

    image

    然后运行可以发现页面背景变红了

    image

    image

    可以看到插入了一个style标签。

    2.file-loader

    安装

    npm install file-loader –save-dev

    添加图片资源

    const path = require("path");

    module.exports = {

    entry: "./src/index.js",

    output: {

    filename: "bundle.js",

    path: path.resolve(__dirname, "dist")

        },

    module: {

    rules: [

                {

    test: /.css$/,

    use: [ "style-loader","css-loader",]

                },

                {

    test: /.(png|svg|jpg|gif)$/,

    use: [ "file-loader"]

                }

            ]

        }

    };

    在index.css文件中添加如下代码

    body{

    background-color: red;

    background-image: url(./yasuo.jpg);

    }

    由于产生的文件是一个相对路径(相对于输出目录),所以把index.html放到./dist目录下,并修改bundle.js引用的路径,运行

    npm run build

    效果如下:

    image

    运行页面

    image

    添加其他资源也是如此。

  • 相关阅读:
    VC 多文档用户界面设计
    如何把Windows7 库 更改成 我的电脑
    解决多文档程序框架中建立新的子框架类后出现“创建空文档失败”的问题
    我们从UNIX之父Dennis Ritchie​身上学到了什么
    在Unicode环境下读出和写入文件
    Android活动的生命周期
    Godaddy 上的域名服务器状态查询
    v8 javascript SHELL
    vim E492: Not an editor command: ^M
    Ubuntu 11.10不能使用USB安装的解决方法
  • 原文地址:https://www.cnblogs.com/hkfyf/p/11696416.html
Copyright © 2011-2022 走看看