使用webpack打包vue项目,要求将src目录下的list文件夹中的index.html文件打包到dist文件夹下名为500的文件夹下,并且index.html文件打包后的名称为500.html
时间: 2023-06-11 11:10:24 浏览: 113
可以通过在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文件。
阅读全文