关于 copy-webpack-plugin 的用处和使用

最新推荐文章于 2024-12-19 14:58:25 发布

JDDDDDDyaya

最新推荐文章于 2024-12-19 14:58:25 发布

阅读量1.6w

点赞数 8

分类专栏： webpack 文章标签： webpack copy-webpack-plugin

本文链接：https://blog.youkuaiyun.com/JDDDDDDyaya/article/details/90544618

版权

webpack 专栏收录该内容

3 篇文章

订阅专栏

webpack打包的时候，使用 html-webpack-plugin ，在template指定的demo.html 里面引入的本地的一些script 文件，打包之后，总是会报这里文件找不到，看下面：

//这是在这个demo.html里面引入的 本地test.js 文件
<body>
	<script src="js/test.js"></script>  
</body>

打包之后发现，这个test.js 文件找不到 test.js 找不到
看到报错信息之后，点进去看，发现了原因，原来是，这个index.html是在打包后的 dist/ 目录下，然后 dist/ 下面并没有这个test.js 的文件。

解决办法就来了，我们在 dist/ 下面把原来 demo.html 里面引入的这个 test.js 文件手动复制到 dist/ 下面，问题就可以解决了。但是，手动太麻烦了，于是， copy-webpack-plugin 就用上了，

copy-webpack-plugin 的作用就是拷贝文件，或者文件夹，这是我这里的配置，它具体的使用方法还请大家去看官网 copy-webpack-plugin

new CopyWebPackPlugin(  // 把demo.html 里面引入的静态资源拷贝到 dist下面去， 解决之前打包之后，index.html里面引入的静态资源找不到的问题
            [
                {
                    from: path.resolve(__dirname, '../js'),  // demo.html 里面引入的test.js 的所在文件夹的路径
                    to: path.resolve(__dirname, '../dist/js'), // 打包在dist后，test.js在dist文件夹下所处的路径 
                  },
   		    ] )

这样配置之后，在打包后的 index.html 里面就能够找到 test.js 了，问题就解决了。

new CopyWebpackPlugin([{
    from: path.resolve(__dirname, '../'src/static)  // 一次性把static 里面的所有文件全部拷贝过来
    /* 如果static存在多个文件，就不需要把 static里面的文件一一写出来
   {
                    from: path.resolve(__dirname, '../src/static/images'),
                    to: path.resolve(__dirname, '../dist/static/images')
                },
                {
                    from: path.resolve(__dirname, '../src/static/icons'),
                    to: path.resolve(__dirname, '../dist/static/icons')
                },
                */
}]);

ps: 这是本人在使用过程中踩的坑，写出来和大家分享一下，如有不对的地方，欢迎大家指正。