(22/24) webpack实战技巧：静态资源集中输出

Posted 2021-01-28 wfaceboss

工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源（比如设计图、开发文档），这些静态资源有可能是文档，也有可能是一些额外的图片，而在打包时保留这些静态资源，直接打包到指定文件夹中。此时就需要使用到copy-webpack-plugin这个插件了。

copy-webpack-plugin：静态资源转移的插件。

1.copy-webpack-plugin的使用

1.1 静态资源

在src目录下，新建一个存放静态资源的文件夹public（假设里面有大量的静态资源（图片、文件等））

1.2 插件安装

使用npm安装（或者cnpm安装）

cnpm install --save-dev copy-webpack-plugin

 --save-dev:表示此插件只在开发阶段使用。

1.3 引入插件

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

const  copyWebpackPlugin= require("copy-webpack-plugin");

1.4 配置插件

插件引入之后，我们需要在webpack.config.js文件中的plugins属性里边进行配置插件，相关配置代码如下：

new copyWebpackPlugin([{
        from:__dirname+‘/src/public‘,//静态资源路径
        to:‘public‘//跟随output目录存放在public目录下
    }])

• from:要打包的静态资源目录地址，这里的__dirname是指项目目录下，是node的一种语法，可以直接定位到本机的项目目录中。(__dirname变量获取当前模块文件所在目录的完整绝对路径)

• to:要打包到的文件夹路径，跟随webpack.config.js文件中output属性中配置的目录（dist目录）。所以不需要再自己加__dirname。

1.5 打包

配置好后，在终端进行打包，此时在打包出的dist目录中多了一个public目录，其下面的静态资源与src目录的public静态资源一样。

打包命令：

npm run dev