参考资料
创建目录
加载 CSS
图片加载
1. CSS 引用图片测试
2. JavaScript 导入图片测试
加载 fonts 字体
加载 JSON/XML/CSV/TSV 等数据

参考资料

Webpack 中文指南：https://webpack.docschina.org/guides/asset-management

创建目录

新建 Assets-Manage 项目

1 2	mkdir Assets-Manage cd Assets-Manage

添加 webpack.config.js，src/index.js，dist/index.html

dist/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>资源管理</title>
</head>

<body>
    <script src="bundle.js"></script>
</body>

</html>

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

加载 CSS

为了使用 import 功能导入 css 文件，需要安装 style-loader 和 css-loader，并且在 module 配置中添加这些 loader。

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

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

接着我们创建 css 文件写入简单的样式，并设计页面

src/index.js

import './style.css';

const newElement = () => {
    let el = document.createElement('div');

    el.innerHTML = 'I\'m red!';
    el.classList.add('red-text');

    return el;
}

document.body.appendChild(newElement());

src/style.css

1
2
3

.red-text {
    color: red;
}

此时的目录结构为

运行 npx webpack，打开dist/index.html，查看结果

图片加载

在页面中加载图片有三种方式

使用 JavaScript 的 Image 对象
写在 <img> 标签中
在 css 中用 url() 引用

无论是哪种方式，利用 webpack 进行图片打包时，都需要用到 file-loader

1	npm i file-loader -S

在 webpack.config.js > module.exports > module 中引入

打包 <img> 要配合 html-loader 使用，打包 css 则需要 style-loader 和 css-loader

【注】优化和压缩图像可能会用到 image-webpack-loader 和 url-loader

CSS 引用图片测试

我们首先测试 CSS 引用图片的模块，拷贝一幅图像到 src 文件夹下，然后在 style.css 中引用

执行

1	npx webpack

查看效果

如果没有 file-loader，打包时会报错

JavaScript 导入图片测试

src/index.js

import './style.css';
import img from './img.jpg'; // 导入图像

const newElement = () => {
    let el = document.createElement('div');

    el.innerHTML = 'I\'m red!';
    el.classList.add('red-text');

    let myImg = new Image(); // 创建 Image 对象
    myImg.src = img;         // 设置图片源
    el.appendChild(myImg);   // 插入到页面元素中

    return el;
}

document.body.appendChild(newElement());

效果

加载 fonts 字体

加载字体文件仍然只需要用到 file-loader，在 webpack.config.js > module.exports > module 中设置：

接着拷贝一些字体文件到 src 中，在 css 文件中引用字体

打包

1	npx webpack

查看效果

加载 JSON/XML/CSV/TSV 等数据

JSON

Node.js 内置 JSON，可以直接 import

1	import Data from './data.json'

data.json

{
    "name": "林杉",
    "gender": "男"
}

XML/CSV/TSV

需要用到 xml-loader ，csv-loader

1	npm i xml-loader csv-loader -S

webpack.config.js > module.exports > module > rules

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

data.xml

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Mary</to>
  <from>John</from>
  <heading>Reminder</heading>
  <body>Call Cindy on Tuesday</body>
</note>

data.csv

1 2	林杉,男,可爱多, 汤凯琳,女,可爱少,

测试

打包

1	npx webpack

效果

03的开发日志

Webpack 学习笔记（二）资源管理