一步步使用 webpack 第三篇：使用 webpack 管理图片等资源文件-CSDN博客

前言

前面两篇文章，从零开始配置 webpack，分别使用 webpack 完成了 es6 代码的编译以及 PostCSS 代码的编译。那接下来，我们就需要处理 js 、css 之外的资源文件，最常见的资源文件为图片，其他的资源文件还有字体、音乐、和 xml 数据文件等。

版本说明

本文使用的 webpack 的版本为：4.30.0

开始搭建

本文的目的是使用 webpack 完成资源文件的管理。

安装资源文件的 loader

执行命令行安装 file-loader：

$ cnpm install --save-dev file-loader
复制代码

添加资源文件

我将图片、音乐以及文字资源放置在 ./src/assets 文件目录下：

webpack-es6
  |- /src
    |- assets
        |- btn_longtap.png
        |- bgm.mp3
        |- message.ttf
    |- index.js
复制代码

webpack 配置资源文件的处理规则

在 webpack.config.js 文件添加资源文件的处理规则：

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output:{
        filename:'index.js',
        path:path.resolve(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test:/\.(png|svg|jpg|gif)$/, // 管理图片资源
                use:[
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/, // 管理文字资源
                use:[
                    'file-loader'
                ]
            },
            {
                test: /\.(mp3|wav|wma|ape|aac)$/i, // 管理文字资源
                use:[
                    'file-loader'
                ]
            }
        ]
    }
};
复制代码

配置完成

以上就完成了 webpack 管理资源的配置，此时的文件目录如下：

webpack-assets
    |- node_modules
    |- /dist
        |- index.html
    |- /src
        |- assets
            |- btn_longtap.png
            |- bgm.mp3
            |- message.ttf
        |- css
            |- style.css
        |- index.js
    |- package.json
    |- package-lock.json
    |- webpack.config.js
    
复制代码

添加代码

接下来我们添加代码测试配置是否成功。

文件 ./dist/index.html 添加代码：

</html>
<body>
<p>success</p>
</body>
<script src="./index.js"></script>
</html>
复制代码

文件 ./scr/css/style.css 添加代码：

@font-face {
    font-family: 'message';
    src:
            url('../assets/message.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
p{
    font-family: 'message';
}
复制代码

文件 ./src/index.js 添加代码：

import './css//style.css';
import  bgm from  './assets/bgm.mp3';
import  btn from  './assets/scene_btn_longtap.png';

const img = document.createElement('img');
img.src = btn;
document.body.appendChild(img);
复制代码

编译程序

运行命令行

$ npm run build
复制代码

我们可以在控制台看到我们的资源文件被 webpack 做了处理：

在 ./dist 文件夹可以看到，我们在 js 、css 引用的资源文件经过了 webpack 处理后，统一放置到该文件夹并自动修改了引用路径：

打开页面，页面显示效果如下，说明使用 webpack 管理资源配置完成：

动态创建 html 文件

我们可以使用 HtmlWebpackPlugin 动态生成 html 文件。使用方法如下：

使用命令行安装 HtmlWebpackPlugin 插件：

$ cnpm install --save-dev html-webpack-plugin
复制代码

在 webpack.config.js 文件中初始化该组件，并引用：

const CleanWebpackPlugin = require('clean-webpack-plugin'); // 引用组件
module.exports = {
    // module.exports 中添加以下代码
     plugins: [
        new CleanWebpackPlugin() // 组件初始化
    ],
};
复制代码

清理 `./dist` 文件夹

在使用了新的资源后， ./dist 文件夹的旧资源并不会被删除，我们可以用 clean-webpack-plugin 插件来检查文件夹，确保旧的资源删除，节省空间。使用方法如下：

使用命令行安装 clean-webpack-plugin 插件：

$ cnpm install clean-webpack-plugin --save-dev
复制代码

在 webpack.config.js 文件中初始化该组件，并引用：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 引用组件
module.exports = {
    // module.exports 中添加以下代码
    plugins: [
        new CleanWebpackPlugin(), // 组件初始化
        new HtmlWebpackPlugin({
            title: 'webpack assets'
        })
    ],
};
复制代码

总结

CSV 和 TSV 数据资源需要安装 csv-loader 并在 webpack.config.js 文件中配置规则；
XML 数据资源需要安装 xml-loader 并在 webpack.config.js 文件中配置规则；
从 webpack 对资源的管理来看，我们只需要安装资源对应的 loader ，并在 webpack.config.js 文件中添加资源文件的处理规则即可；
在使用 HtmlWebpackPlugin 组件的时候，我们还可以编写自己的模板，动态生成 html ；
下一步使用 webpack 编译 vue 代码。