项目优化

Posted 2021-02-06 qingfengliuyun092815

 

　　之前的项目，登陆页面并没有使用webpack打包，这样导致每次webpack打包dist文件后需要把登陆页面手动拷贝到后台项目目录中，项目进入尾期，本着学习webpack的目的，决定优化一下。因为是login.html使用jq&bs写的静态页面，所以一开始想着通过webpack的html-webpack-plugin插件来打包不适用，查询webpack plugins发现copy-webpack-plugin能够完成我的需求。以下简单介绍下项目中如何使用

通过官方文档配置可以配置from，设置需要拷贝的文件或者目录，配置to设置要拷贝到的文件或者目录

以上是我需要拷贝的一个登陆页面以及页面引用的静态文件，所以直接拷贝login_LB文件夹里面所有内容。

先本地安装依赖

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

然后在项目中引入

var CopyWebpackPlugin = require(‘copy-webpack-plugin‘);
new CopyWebpackPlugin([{
      from: path.resolve(__dirname,‘../../login_LB‘)
}])

 然后打包测试一下，

可以看到login.html跟resource文件夹都打包进来。

以上是一个前端码畜的使用webpack的copy-webpack-plugin插件的过程，如有误，欢迎大佬们指正