• webpack管理资源(CSS,图片,字体,本地文件)


    在 webpack 出现之前,前端开发人员会使用 grunt 和 gulp 等工具来处理资源,并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。

    同样方式也被用于 JavaScript 模块,

    但是,像 webpack 这样的工具,将动态打包(dynamically bundle)所有依赖项(创建所谓的依赖图(dependency graph))。

    这是极好的创举,因为现在每个模块都可以明确表述它自身的依赖,我们将避免打包未使用的模块

    webpack 最出色的功能之一就是,除了 JavaScript,还可以通过 loader 引入任何其他类型的文件

    加载 CSS

    为了从 JavaScript 模块中 import 一个 CSS 文件,你需要在 module 配置中 安装并添加 style-loader 和 css-loader

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

    webpack.config.js

    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'
    +         ]
    +       }
    +     ]
    +   }
      };

    这使你可以在依赖于此样式的文件中 import './style.css'(放在index.js上面)现在,当该模块运行时,含有 CSS 字符串的 <style> 标签,将被插入到 html 文件的 <head> 中。

    请注意,在多数情况下,你也可以进行 CSS 分离,以便在生产环境中节省加载时间。

    最重要的是,现有的 loader 可以支持任何你可以想到的 CSS 处理器风格 - postcsssass 和 less 等。

    加载图片:

    现在我们正在下载 CSS,但是我们的背景和图标这些图片,要如何处理呢?使用 file-loader,我们可以轻松地将这些内容混合到 CSS 中:

    npm install --save-dev file-loader

    npm install image-webpack-loader --save-dev //进一步可以进行图片的压缩
     {
    +         test: /\.(png|svg|jpg|gif)$/,
    +         use: [
    +           'file-loader'
    +         ]
    +       }

    加载字体:

    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'
              ]
            },
    +       {
    +         test: /\.(woff|woff2|eot|ttf|otf)$/,
    +         use: [
    +           'file-loader'
    +         ]
    +       }
          ]
        }
      };
    + @font-face {
    +   font-family: 'MyFont';
    +   src:  url('./my-font.woff2'),
    +         url('./my-font.woff');
    +   font-weight: 600;
    +   font-style: normal;
    + }
    
      .hello {
        color: red;
    +   font-family: 'MyFont';
        background: url('./icon.png');
      }

    加载数据: 

    JSON 文件,CSV、TSV 和 XML,JSON是内置的;要导入 CSV、TSV 和 XML,你可以使用 csv-loader 和 xml-loader。让我们处理这三类文件

    npm install --save-dev csv-loader xml-loader
    +       {
    +         test: /\.(csv|tsv)$/,
    +         use: [
    +           'csv-loader'
    +         ]
    +       },
    +       {
    +         test: /\.xml$/,
    +         use: [
    +           'xml-loader'
    +         ]
    +       }

    全局资源:

    上述所有内容中最出色之处是,你可以以更直观的方式将模块和资源组合在一起,便于移植!

  • 相关阅读:
    字典序问题 算法实现题1-2
    统计数字问题 算法实现1-1
    P问题 NP问题 NPC问题 NP-Hard问题 简述
    Python argparse库简单入门
    HDU 3506 区间DP 四边形不等式
    HDU 1530 最大团问题 模板
    树状数组入门+代码
    HDU 1520 Anniversary party 树状dp
    京东 广告部门一面 4.22
    字节跳动 ailab二面 4.16
  • 原文地址:https://www.cnblogs.com/liuguiqian/p/11008035.html
Copyright © 2020-2023  润新知