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

工做中会有一些已经存在但在项目中没有引用的图片资源或者其余静态资源（好比设计图、开发文档），这些静态资源有多是文档，也有多是一些额外的图片，而在打包时保留这些静态资源，直接打包到指定文件夹中。此时就须要使用到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