美文网首页我爱编程前端开发让前端飞
Webpack轻松入门(四)——HTML打包

Webpack轻松入门(四)——HTML打包

作者: 前端王睿 | 来源:发表于2018-06-18 10:21 被阅读78次

    到目前为止,有关Webpack最基础的内容差不多已经讲完了,其中包括Webpack运行的基本流程CSS的打包图片的打包,也就是说,当你掌握这几节之后,基本上就能像以前不用Webpack时一样愉快地写代码了。

    当然,我们其实还有很多需要优化的地方,就比如本文所要讲到的,如何将HTML进行打包?

    在之前的实例中,Webpack虽然能够正常地将各种页面所需要的资源从src目录打包至dist目录,但是我们在最后必须在dist目录中手动去创建HTML页面,并引入这些打包后的资源。

    事实上,Webpack能够自动的帮助我们完成这件事,只需要使用html-webpack-plugin插件即可。

    1. 安装html-webpack-plugin插件

    与安装loader一样,命令行输入以下命令回车即可。

    npm i -D html-webpack-plugin
    

    2. webpack.config.js中添加相关配置

    const htmlWebpackPlugin = require('html-webpack-plugin');   //  引入html-webpack-plugin插件
    
    module.exports = {
        entry: './src/scripts/index.js',   // 打包入口
        output: {
            path: __dirname + '/dist',    // 输出路径
            filename: 'scripts/index.js'     // 输出文件名
        },
        module: {
            rules: [    // 其中包含各种loader的使用规则
                {
                    test: /\.css$/,  // 正则表达式,表示打包.css后缀的文件
                    use: ['style-loader','css-loader']   // 针对css文件使用的loader,注意有先后顺序,数组项越靠后越先执行
                },
                {   // 图片打包
                    test: /\.(png|jpg|gif|svg)$/,
                    loader: 'url-loader',
                    options: {
                        name: './images/[name].[ext]',
                        limit: 8192
                    }
                }
            ]
        },
        plugins: [   // 打包需要的各种插件
            new htmlWebpackPlugin({   // 打包HTML
                template: './src/index.html'   //  HTML模板路径
            })
        ],
        watch: true   // 监听文件改动并自动打包
    };
    

    3. 添加HTML模板文件

    HTML模板文件如下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Hello Webpack</title>
    </head>
    <body>
    </body>
    </html>
    

    是的,除了HTML本身,其他资源如CSS、图片等均无需手动添加,在打包结束后,所有资源均会自动添加至HTML文件相应位置并进入dist目录。

    4. 打包结束

    打包后的index.html文件如下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Hello Webpack</title>
    </head>
    <body>
    <script type="text/javascript" src="scripts/index.js"></script></body>
    </html>
    

    本文重点总结

    打包HTML,使用 html-webpack-plugin 插件即可

    相关文章

      网友评论

        本文标题:Webpack轻松入门(四)——HTML打包

        本文链接:https://www.haomeiwen.com/subject/wpbbeftx.html