一步步使用 webpack 第三篇：使用 webpack 管理图片等资源文件
栏目: JavaScript · 发布时间: 5年前
内容简介：前面两篇文章，从零开始配置 webpack，分别使用 webpack 完成了es6 代码的编译 以及PostCSS 代码的编译。那接下来，我们就需要处理 js 、css 之外的资源文件，最常见的资源文件为图片，其他的资源文件还有 字体、音乐、和 xml 数据文件等。本文使用的 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'
})
],
};
复制代码
以上所述就是小编给大家介绍的《一步步使用 webpack 第三篇：使用 webpack 管理图片等资源文件》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- Protocol Buffer使用转换工具将proto文件转换成Java文件流程及使用
- 如何使用Python删除一个文件或文件夹
- 使用Perl/sed/awk分割大文件（测序fastq文件）
- 使用Servlet技术上传文件
- 使用go读取配置文件
- 使用vue-simple-uploader上传文件和文件夹
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
