一步步使用 webpack 第三篇：使用 webpack 管理圖片等資源文件

時間 2019-11-07

標籤步步使用 webpack 第三管理圖片資源文件简体版

原文原文鏈接

前言

前面兩篇文章，從零開始配置 webpack，分別使用 webpack 完成了 es6 代碼的編譯以及 PostCSS 代碼的編譯。那接下來，咱們就須要處理 js 、css 以外的資源文件，最多見的資源文件爲圖片，其餘的資源文件還有字體、音樂、和 xml 數據文件等。javascript

版本說明

本文使用的 webpack 的版本爲：4.30.0css

開始搭建

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

安裝資源文件的 loader

執行命令行安裝 file-loader：vue

$ cnpm install --save-dev file-loader
複製代碼

添加資源文件

我將圖片、音樂以及文字資源放置在 ./src/assets 文件目錄下：java

webpack-es6
  |- /src
    |- assets
        |- btn_longtap.png
        |- bgm.mp3
        |- message.ttf
    |- index.js
複製代碼

webpack 配置資源文件的處理規則

在 webpack.config.js 文件添加資源文件的處理規則：node

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

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
    
複製代碼

添加代碼

接下來咱們添加代碼測試配置是否成功。git

文件 ./dist/index.html 添加代碼：es6

</html>
<body>
<p>success</p>
</body>
<script src="./index.js"></script>
</html>
複製代碼

文件 ./scr/css/style.css 添加代碼：github

@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
複製代碼