概述

  1. webpack的使用中我们会遇到各种各样的插件、loader。
  2. webpack的功力主要体现在能理解各个插件、loader的数量上。理解的越多功力越深
  3. loader是什么呢？

背景

了解loader前，我们在来看个问题，有了前面的基础我们还是用个简单的样例来说明

由于一切都是模块，我们想用js import的方式统一加载css资源

//main.js

import "./main.css";

window.addEventListener("load", function () {});


//main.css

body {

  color: aquamarine;

}


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>Webpack App</title>

    <meta name="viewport" content="width=device-width,initial-scale=1" />

  </head>

  <body>

    <h1>Hello webpack splitchunks</h1>

    <button id="btn1">页面1</button>

    <button id="btn2">页面2</button>

  </body>

</html>

嗯，如果能这样加载就好了，我就不需要在写<style>、<link>标记了，那么是不是这么写呢

好，我们来试一下

//index.js

const webpack = require("webpack");

const HtmlWebpackPlugin = require("html-webpack-plugin");

const path = require("path");

const config = {

  context: path.resolve(__dirname),

  mode: "production",

  optimization: {

    minimize: false,

  },

  entry: "./main.js",

  target: ["web", "es5"],

  output: {

    clean: true,

    filename: "bundle.js",

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

  },

  plugins: [

    new HtmlWebpackPlugin({

      template: "index.html",

    }),

  ],

};

const compiler = webpack(config);

compiler.run((err, stats) => {

  console.log(err);

  let result = stats.toJson({

    files: true,

    assets: true,

    chunk: true,

    module: true,

    entries: true,

  })

  debugger

});

看下结果，有个错误,



moduleName:'./main.css'

'Module parse failed: Unexpected token (1:5)\nYou may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

这里正是提示我们css文件不能用import的方式加载，想要加载css文件，你就需要loader

开始

先装2个loader

npm install --save-dev css-loader style-loader

添加loader配置

const webpack = require("webpack");

const HtmlWebpackPlugin = require("html-webpack-plugin");

const path = require("path");

const config = {

  context: path.resolve(__dirname),

  mode: "production",

  optimization: {

    minimize: false,

  },

  entry: "./main.js",

  target: ["web", "es5"],

  output: {

    clean: true,

    filename: "bundle.js",

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

  },

  plugins: [

    new HtmlWebpackPlugin({

      template: "index.html",

    }),

  ],

  module: {

    rules: [

      {

        test: /\.css$/i,

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

      },

    ],

  },

};

const compiler = webpack(config);

compiler.run((err, stats) => {

  console.log(err);

  let result = stats.toJson({

    files: true,

    assets: true,

    chunk: true,

    module: true,

    entries: true,

  })

  debugger

});

执行后没有了错误，页面也正常显示了

看下生成了什么代码（代码太多，截取一部分）

css文件居然被转换成了字符串，而且运行时会自动添加到<style>标记中

总结

  1. loader 可以让webpack处理更多，更丰富的文件类型，即使这个文件并不是js文件
  2. 有了loader的设计，webpack的应用场景强了。
  3. css-loader正是将我们的css文件转成了javastript的字符串
  4. style-loader 则帮助我们将生成的样式字符串添加的<style>标记中，他俩配合的也真是挺到位。
  5. loader的设计并不局限于样式的这个场景，理解这两个loader可以让我们更深入的理解loader的设计，比如如果我想把es6语法的js文件都转成es5的js运行时，是不是也可以呢？

【前端必会】webpack loader 到底是什么的更多相关文章

  1. 前端模块化工具-webpack

    详解前端模块化工具-webpack webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不 ...

  2. 手把手教你撸一个 Webpack Loader

    文:小 boy(沪江网校Web前端工程师) 本文原创,转载请注明作者及出处 经常逛 webpack 官网的同学应该会很眼熟上面的图.正如它宣传的一样,webpack 能把左侧各种类型的文件(webpa ...

  3. input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年，我们被耍过的bug——has

    input屏蔽历史记录   设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处   ;(function($){$.ex ...

  4. 如何开发webpack loader

    关于webpack 作为近段时间风头正盛的打包工具,webpack基本占领了前端圈.相信你都不好意思说不知道webpack. 有兴趣的同学可以参考下我很早之前的webpack简介 . 确实webpac ...

  5. 前端必学内容：webpack3快速入门 1-23节内容参考

    前端必学内容:webpack(模块打包器) webpack3 学习内容,点击即可到达 (1).webpack快速入门——如何安装webpack及注意事项 (2).webpack快速入门——webpac ...

  6. 高性能流媒体服务器EasyDSS前端重构(四)- webpack + video.js 打造流媒体服务器前端

    接上篇 接上篇<高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui> 本文围绕着实现EasyDSS高性能流 ...

  7. 怎样写一个webpack loader

    div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme- ...

  8. [Linux] 一个前端必会的 Nginx 免费教程-在虚拟机中用deepin测试

    原文技术胖的 nginx 技术胖 专注于前端开发 deepin Linux Deepin 是一个基于 DEB 包管理的一个独立操作系统,和那些 Ubuntu(下个大版本是基于 debian 开发) 的 ...

  9. 2018 BAT最新《前端必考面试题》

    2018 BAT最新<前端必考面试题> 1.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? (1). 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文 ...

随机推荐

  1. 解决报错ExecStart=/usr/sbin/mysqld --daemonize --pid-file=/run/mysqld/mysqld.pid (code

    问题的由来 MySQL服务没有正常关机,是电脑没电后自动关机产生,记录一下排查过程 1.本以为是pid的问题,上网找了教程,解决不了,然后看日志看了网上各种说是数据库内存溢出 2021-03-12T1 ...

  2. jdbc 04: 配置连接信息

    jdbc连接mysql,将需要的信息配置到文件中 package com.examples.jdbc.o4_配置连接信息; import java.sql.Connection; import jav ...

  3. &&与||的优先级比较

    &&与||的优先级比较类似于一种思维体操,更多的是造成矛盾,使得两者因为先后顺序的不同而造成的不同结果,当然有时候需要注意c语言中的短路运算. 方法1. 代码如下: 点击查看代码 #i ...

  4. gotoscan：CMS指纹识别工具

    gotoscan 前言 项目地址 https://github.com/newbe3three/gotoscan 结合自己学习到的Go相关知识,通过实现这个简易的CMS指纹识别工具来锻炼一下自己写代码 ...

  5. 有一种密码学专用语言叫做ASN.1

    目录 简介 ASN.1的例子 ASN.1中的内置类型 ASN.1中的限制语法 总结 简介 ASN.1是一种跨平台的数据序列化的接口描述语言.可能很多人没有听说过ASN.1, 但是相信有过跨平台编程经验 ...

  6. kubernetes之DaemonSet以及滚动更新

    1.什么是DaemonSet? 1.1DaemonSet是Pod控制器的又一种实现方式,用于在集群中的全部节点上同时运行一份指定的Pod资源副本,后续加入集群的节点也会自动创建一个相关的Pod对象,当 ...

  7. 中国联通改造 Apache DolphinScheduler 资源中心，实现计费环境跨集群调用与数据脚本一站式访问

    截止2022年,中国联通用户规模达到4.6亿,占据了全中国人口的30%,随着5G的推广普及,运营商IT系统普遍面临着海量用户.海量话单.多样化业务.组网模式等一系列变革的冲击. 当前,联通每天处理话单 ...

  8. HDU3085 Nightmare Ⅱ (双向BFS)

    联赛前该练什么?DP,树型,状压当然是爆搜啦 双向BFS就是两个普通BFS通过一拼接函数联系,多多判断啦 #include <iostream> #include <cstdio&g ...

  9. 人非圣贤孰能无过,Go lang1.18入门精炼教程，由白丁入鸿儒，Go lang错误处理机制EP11

    人非圣贤,孰能无过,有则改之,无则加勉.在编程语言层面,错误处理方式大体上有两大流派,分别是以Python为代表的异常捕获机制(try....catch):以及以Go lang为代表的错误返回机制(r ...

  10. java-前端之HTML

    --html网页简单使用 1.html网页的基本标签 <!doctype html><!-- 声明网页版本 --> <html><!-- 唯一的跟元素 --& ...