随着前端技术的发展，webpack 作为前端构建工具的代表，通过自动化构建方式为前端开发提供了极大的便利性。webpack 除了支持各种 JS、CSS 等文件类型打包外，还支持将静态资源文件拷贝至打包目录中，本文将详解 webpack 如何实现静态资源拷贝。
为什么需要将静态资源拷贝到打包目录中
前端开发中，通常会使用各种各样的静态资源文件，如图片、字体等等。在开发环境中，这些资源文件会直接放在对应的目录中，但当代码打包时，这些资源文件同样需要被打包并存放在打包目录中，确保整个应用在部署后能够正确地访问这些静态资源。
webpack 中如何拷贝静态资源
在 webpack 中，我们可以通过 copy-webpack-plugin 插件实现静态资源文件的拷贝。这个插件可以将指定的资源文件或目录拷贝至指定的目录。
安装
在使用之前，我们需要先安装 copy-webpack-plugin 插件：
npm install copy-webpack-plugin --save-dev
配置
安装完成后，在 webpack 的配置文件中添加以下代码：
// javascriptcn.com 代码示例
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
// ...其他配置...
plugins: [
new CopyWebpackPlugin([
{ from: 'static', to: 'static' },
]),
],
};我们将要拷贝的静态资源放在一个名为 static 的目录中，并将其拷贝至打包后的 static 目录中。
配置文件的详细说明
CopyWebpackPlugin 插件的配置项是一个数组，数组中每一个元素代表一个要拷贝的文件或目录。每个元素是一个对象，具体项如下：
- from：表示要拷贝的源文件或目录路径。
- to：表示要拷贝到的目标文件或目录路径。
上面的配置表示将 static 目录下的所有文件和目录拷贝至输出目录的 static 目录下。
如果想要拷贝多个资源文件或目录，只需要在数组中添加多个元素即可。
实例
我们来看一个具体的实例，如下是一个简单的 webpack 配置：
// javascriptcn.com 代码示例
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
],
},
],
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'webpack-copy-demo',
template: 'index.html',
}),
new CopyWebpackPlugin([
{ from: 'static', to: 'static' },
]),
],
};在上面的代码中，我们除了安装和配置 CopyWebpackPlugin 插件外，还安装和配置了其他的插件。其中 HtmlWebpackPlugin 和 CleanWebpackPlugin 分别用于生成 HTML 文件和清理打包目录，module.rules 中的配置用于解析图片等资源文件。
在项目中，我们将 static 目录下的图片资源拷贝至 dist/static 目录下，图片资源的引用路径可以使用相对路径 /static/ 即可。
总结
本文中我们介绍了 webpack 中如何拷贝静态资源， CopyWebpackPlugin 插件提供了一个非常方便的方式来实现静态资源文件的拷贝。通过本文的介绍，相信大家已经可以在项目中应用该插件了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6545994a7d4982a6ebf3c07a