webpack打包的时候, 使用 html-webpack-plugin ,在template指定的demo.html 里面 引入的本地的一些script 文件,打包之后,总是会报这里文件找不到,看下面:
//这是在这个demo.html里面引入的 本地test.js 文件
<body>
<script src="js/test.js"></script>
</body>
打包之后发现,这个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: 这是本人在使用过程中踩的坑,写出来和大家分享一下,如有不对的地方,欢迎大家指正。