Webpack打包HTML

忘是亡心i 2022-04-06 08:12 375阅读 0赞

### 1、包装html-webpack-plugin插件并在webpack.config.js中添加插件 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70][]

### webpack.config.js ###

const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
        entry: './src/main.js',  //指定打包的入口文件
        output: {
            path: __dirname + '/dist',  // 注意：__dirname表示webpack.config.js所在目录的绝对路径
            filename: 'build.js'		   //输出文件
        },
        module: {
            rules: [
                {
                    test: /\.css$/, // 通过正则表达式匹配所有以.css后缀的文件
                    use: [ // 要使用的加载器，这两个顺序一定不要乱
                        'style-loader',
                        'css-loader'
                    ]
                }
            ]
        },
        plugins:[
            new HtmlWebpackPlugin({
                title: '首页',  //生成的页面标题<head><title>首页</title></head>
                filename: 'index.html', // dist目录下生成的文件名
                template: './src/index.html' // 我们原来的index.html，作为模板
            })
        ]
    }

### 2、将原来index.html中引入js代码删除 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        
        <span><router-link to="/login">登录</router-link></span>
        <span><router-link to="/register">注册</router-link></span>
        <hr/>
        <div>
            
            <router-view></router-view>
        </div>
    </div>
    
    </body>
    </html>

### 3、再次打包 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 1][]

在上面添加红框的内容后就可以使用这个命令打包了：
    
    npm run build

### 4、查看dist目录、并测试 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 2][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70]: /images/20220406/c2085e2a8ad2400b9d8603be4caec69a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 1]: /images/20220406/610311a797f946049d26bef426d986d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20181208232712224.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 3]: /images/20220406/a9c7aabb110e4a02a8c0f5a3e7945cc6.png