webpack快速入门——集中拷贝静态资源

工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源（比如设计图、开发文档），

这些静态资源有可能是文档，也有可能是一些额外的图片。项目组长会要求你打包时保留这些静态资源，

直接打包到制定文件夹。其实打包这些资源只需要用到copy-webpack-plugin。

1.首先新建文件夹public，然后在网上随便找几张图片，保存在文件夹内

 

2.安装插件

 

cnpm i copy-webpack-plugin --save-dev

 

 

3.引入插件

 

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

 

 

 

4.配置插件

 

new copyWebpackPlugin([{
    from:__dirname+'/src/public',//打包的静态资源目录地址
    to:'./public' //打包到dist下面的public
}]),

 

 

5.输入webpack 进行打包：效果图如下：

 

 

前端必学内容：webpack（模块打包器）

webpack3 学习内容，点击即可到达

(1).webpack快速入门——如何安装webpack及注意事项

(2).webpack快速入门——webpack3.X 快速上手一个Demo   

(3).webpack快速入门——配置文件：入口和出口，多入口、多出口配置 

(4).webpack快速入门——配置文件：服务和热更新

(5).webpack快速入门——CSS文件打包

(6).webpack快速入门——配置JS压缩，打包

(7).webpack快速入门——插件配置：HTML文件的发布

(8).webpack快速入门——CSS中的图片处理

(9).webpack快速入门——CSS分离与图片路径处理

(10).webpack快速入门——处理HTML中的图片

(11).webpack快速入门——CSS进阶，Less文件的打包和分离

(12).webpack快速入门——CSS进阶：SASS文件的打包和分离

(13).webpack快速入门——CSS进阶：自动处理CSS3前缀

(14).webpack快速入门——CSS进阶：消除未使用的CSS

(15).webpack快速入门——给webpack增加babel支持

(16).webpack快速入门——打包后如何调试

(17).webpack快速入门——实战技巧：开发和生产并行设置

(18).webpack快速入门——实战技巧：webpack模块化配置

(19).webpack快速入门——实战技巧：优雅打包第三方类库

(20).webpack快速入门——实战技巧：watch的正确使用方法，webpack自动打包

(21).webpack快速入门——实战技巧：webpack优化黑技能

(22).webpack快速入门——集中拷贝静态资源

(23).webpack快速入门——Json配置文件使用