webpack 插件之Html-Webpack-Plugin

最新推荐文章于 2024-05-28 09:53:24 发布

小辣抓

最新推荐文章于 2024-05-28 09:53:24 发布

阅读量1.7k

点赞数

分类专栏： webpack 文章标签： path css 脚本应用插件

本文链接：https://blog.csdn.net/HaoDaWang/article/details/77150317

版权

webpack 插件之Html-Webpack-Plugin1. 为什么我们需要这个插件先来看一个应用场景。我们自己打算搭建一个网站，这个网站有很多个页面，我们为每个页面创建一大堆的css样式，js脚本，然后尝试用webpack进行打包。于是我们在webpack.config.js里这样写了：const path = require('path');module.exports = {

摘要由CSDN通过智能技术生成

webpack 插件之Html-Webpack-Plugin

1. 为什么我们需要这个插件

先来看一个应用场景。
我们自己打算搭建一个网站，这个网站有很多个页面，我们为每个页面创建一大堆的css样式，js脚本，然后尝试用webpack进行打包。

于是我们在webpack.config.js里这样写了：

const path = require('path');
module.exports = {
    //两个页面相应的js
    entry:[
        "./src/scripts/hello.js",
        "./src/scripts/main.js"
    ],
    output:{
        filename:'main.bundle.js',
        path:path.resolve(__dirname,'dist')
    }
}

两个文件的内容如下：

hello.js

function sayHello (){
   
    alert('Hello');
}

sayHello();

main.js

function sayMain(){
   
    alert('Main');
}

sayMain();

但是我们这里的output只有一个path关键字，无疑，它们会被整合到一起。

我们在/dist目录下创建Index.html加载打包后的js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript" src="./main.bundle.js"></script>
</body>
</html>

打开浏览器看看结果

这里写图片描述

这当然对于浏览器对服务器的请求数减小是极好的，但有的时候我们并不想这样做，因为两个模块没有依赖关系，我们想把它分开来

于是我们打算用webpack把它们打成两个包（在实际的应用场景中，这两个互不依赖的模块可能还有更多的依赖模块），修改过后的webpack.config.js如下

const path = require(

最低0.47元/天解锁文章

小辣抓

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
webpack 插件之Html-Webpack-Plugin

webpack 插件之Html-Webpack-Plugin1. 为什么我们需要这个插件先来看一个应用场景。我们自己打算搭建一个网站，这个网站有很多个页面，我们为每个页面创建一大堆的css样式，js脚本，然后尝试用webpack进行打包。于是我们在webpack.config.js里这样写了：const path = require('path');module.exports = {
复制链接

扫一扫