阅读 163

一步步使用 webpack 第三篇:使用 webpack 管理图片等资源文件

前言

前面两篇文章,从零开始配置 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'
        })
    ],
};
复制代码

总结

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

参考链接

webpack 中文网:www.webpackjs.com/

更多文章

关注下面的标签,发现更多相似文章
评论