Webpack入门(四)——HTML打包

最新推荐文章于 2024-05-15 05:23:46 发布

诸葛胖虎

最新推荐文章于 2024-05-15 05:23:46 发布

阅读量211

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/weixin_43074337/article/details/100053322

版权

webpack 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

到目前为止，有关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>

诸葛胖虎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack入门(四)——HTML打包

到目前为止，有关Webpack最基础的内容差不多已经讲完了，其中包括Webpack运行的基本流程、CSS的打包和图片的打包，也就是说，当你掌握这几节之后，基本上就能像以前不用Webpack时一样愉快地写代码了。当然，我们其实还有很多需要优化的地方，就比如本文所要讲到的，如何将HTML进行打包？在之前的实例中，Webpack虽然能够正常地将各种页面所需要的资源从src目录打包至dist目录，但是...
复制链接

扫一扫