使用webpack打包vue项目,保持原有的打包配置,要求将src目录下的list文件夹中的list.html文件打包到dist文件夹下名为500的文件夹下,并且index.html文件打包后的名称为500.html;
时间: 2023-06-11 19:10:14 浏览: 257
可以通过修改webpack配置文件来实现这个需求。以下是一个示例webpack配置文件:
```javascript
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist/500'),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
filename: '500.html',
template: 'index.html'
})
],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
};
// 添加一个钩子函数,用于将list.html文件复制到dist/500文件夹下
module.exports = (env, argv) => {
if (argv.mode === 'production') {
const fs = require('fs-extra');
fs.copySync('./src/list/list.html', './dist/500/list.html');
}
return config;
};
```
在这个配置文件中,我们通过修改output.path和HtmlWebpackPlugin的配置,将打包后的文件输出到dist/500文件夹下,并将index.html文件重命名为500.html。同时,我们添加了一个钩子函数,在生产模式下,将src/list/list.html复制到dist/500文件夹下。
请注意,如果你使用的是Vue CLI生成的项目,你需要在webpack配置文件中添加一个钩子函数来实现这个需求。不过,一般来说,Vue CLI已经帮你处理好了这个问题,你只需要将list.html文件放到public目录下即可。
阅读全文