Vue将index.html打包到dist文件夹

最新推荐文章于 2024-08-07 19:34:25 发布

我啥都会

最新推荐文章于 2024-08-07 19:34:25 发布

阅读量808

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qianlixiaomage/article/details/104203663

版权

Vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

1.下载安装html-webpack-plugin：

npm install html-webpack-plugin --save-dev

2.在webpack.config.js中

const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js',
        // publicPath:'dist/'
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin(),
        new webpack.BannerPlugin('最终版权归小马哥所有'),
        new HtmlWebpackPlugin({
          template:'index.html'
        })
    ],
...
}

index.html 如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <div id="app">
        <!-- <h2>{{message}}</h2>   -->
    </div>
<body>
    <!-- <script src="./dist/bundle.js"></script> -->
    <!--webpack打包： webpack3： webpack a.js bundle.js-->
    <!--webpack打包： webpack4： webpack a.js -o bundle.js --mode development-->
</body>

</html>