使用webpack打包vue项目,要求将src目录下的list文件夹中的index.html文件打包到dist文件夹下名为500的文件夹下,并且index.html文件打包后的名称为500.html
时间: 2023-06-11 10:10:24 浏览: 67
可以通过在webpack配置文件中使用CopyWebpackPlugin来实现将指定文件夹下的文件复制到dist目录下的指定文件夹中。同时,可以使用html-webpack-plugin插件来指定打包后的html文件名称。
具体的配置如下:
```javascript
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 入口文件等配置省略
// ...
plugins: [
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, 'src/list/index.html'),
to: path.resolve(__dirname, 'dist/500'),
toType: 'dir'
}
]),
new HtmlWebpackPlugin({
filename: '500.html',
template: path.resolve(__dirname, 'dist/500/index.html')
})
]
};
```
以上配置中,CopyWebpackPlugin将src目录下的list文件夹中的index.html文件复制到dist文件夹下的名为500的文件夹中。同时,HtmlWebpackPlugin插件将打包后的html文件名称设置为500.html,并将模板文件设置为复制后的index.html文件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)