2

【前端必会】webpack loader 到底是什么 - 李同学的教室

 1 year ago
source link: https://www.cnblogs.com/lee35/p/16732335.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

【前端必会】webpack loader 到底是什么

  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.

2984491-20220926201440267-378083939.png

这里正是提示我们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
});

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

2984491-20220926202335113-1437344103.png

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

2984491-20220926202503285-569426025.png
2984491-20220926202646729-235329357.png

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运行时，是不是也可以呢？
  6. loader参考：https://webpack.docschina.org/loaders/css-loader

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK