跳到主要内容

27-打包静态资源集中管理

保留图片等静态资源，直接打包到固定的文件夹

安装copy-webpack-plugin​

npm install --save-dev copy-webpack-plugin

引入​

安装好后，需要在webpack.config.js文件的头部引入这个插件才可以使用。

// 插件，保留静态资源到指定的文件夹里面，使用插件copyWebpackPlugin
const copyWebpackPlugin = require("copy-webpack-plugin")

配置插件 引入之后我们就可以在plugins里边进行配置插件了，我们先看下面的插件配置代码，然后再进行详细讲解。

1.png

  1. from
    • 要打包的静态资源目录地址，这里的__dirname是指项目目录下，是node的一种语法，可以直接定位到本机的项目目录中。
  2. to -要打包到的文件夹路径，跟随output配置中的目录。所以不需要再自己加__dirname。

配置好后，我们就可以使用webpack 进行打包了，你会发现图片按照我们的配置打包到了指定的文件夹。