webpack4配置之——21：生产环境打包静态资源

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/kai_vin/article/details/89025874

如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里

生产环境打包静态资源

一个完整的项目，不仅有开发依赖的各种文件需要打包上传到服务器上，也许还会有各种开发文档，项目中没引用过的图片、设计图、或者会有一些静态页面不需要编译，也要上传到服务器上，以方便预览。

这里就需要用到插件copy-webpack-plugin，首先下载该插件：

yarn add copy-webpack-plugin -D

静态资源一般放在根目录下的 static 文件夹下，先创建该文件夹，随便放个什么文件进去，以方便之后打包，这个只需要在生产环境需要用到，所以修改webpack.prod.conf.js 文件：

// 在头部引用中添加以下代码
const copyWebpackPlugin = require('copy-webpack-plugin');

// 在 plugin 中 添加以下代码
new copyWebpackPlugin([{
    from:path.resolve(__dirname+'/static'),// 打包的静态资源目录地址
    to:'static' // 打包到dist下面的static
}]),

接着执行yarn build 可以看到该静态资源文件夹已经被复制到了dist目录下；

当然该插件也可以同时打包多个静态资源文件夹，也就是要多加几条from``to数据，本项目根目录下还有README静态资源文件夹，也希望打包进生产环境：

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

再次执行yarn build 成功执行！~

那么到此就应该了解了，如果想要将静态页面打包上传到服务器上，方便预览，也是同上的步骤~

测试环境的webpack.test.conf.js也需要这些添加上面这些配置