概述

  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. 4-1 Spring框架基础知识

    Spring框架基础知识 1.Spring 框架作用 主要解决了创建对象和管理对象的问题. 自动装配机制 2.Spring 框架 (Spring容器,JavaBean容器,Bean容器,Spring容 ...

  2. PostgreSQL下的SQL Shell(psql)工具

    首发微信公众号:SQL数据库运维 原文链接:https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485130&idx=1 ...

  3. 【原创】Selenium获取请求头、响应头

    本文仅供学习交流使用,如侵立删! Selenium获取请求头.响应头 操作环境 win10 . mac Python3.9 selenium.seleniumwire selenium是没有办法直接获 ...

  4. django中的静态文件

    静态文件 1.什么是静态文件 在django中静态文件是指那些图片.css样式.js样式.视频.音频等静态资源. 2.为什么要配置静态文件 这些静态文件往往不需要频繁的进行变动,如果我们将这些静态文件 ...

  5. Spring 02 控制反转

    简介 IOC IOC(Inversion of Control),即控制反转. 这不是一项技术,而是一种思想. 其根本就是对象创建的控制权由使用它的对象转变为第三方的容器,即控制权的反转. DI DI ...

  6. 服务器时间同步架构与实现chrony

    实验背景 模拟企业局域服务器时间同步,保障各服务器系统准确性和时间一致性. 时间服务器系统搭建 实验架构图 环境设备 设备IP规划 国内互联网NTP服务器 ntp.aliyun.com #阿里云NTP ...

  7. jsp一句话木马总结

    一.无回显的命令执行(命令执行后不会在前端页面返回数据) <%Runtime.getRuntime().exec(request.getParameter("i"));%&g ...

  8. matery添加加载动画

    1.在主题 /layout/_partial/目录新建一个loading-pages.ejs 内容如下: <style type="text/css" lang=" ...

  9. mybatisplus-sql注入器

    sql注入器 使用mybatisplus只需要继承BaseMapper接口即可使用:但是有新的需求需要扩展BaseMapper里面的功能时可使用sql注入器. 扩展BaseMapper里面的功能 点击 ...

  10. python进阶__struct数据处理详解

    一.此模块可以执行 Python 值和以 Python bytes 对象表示的 C 结构之间的转换 二.打包解包时,需要按照特定的方式来打包或者解包.该方式就是格式化字符串,它指定了数据类型,除此之外 ...