webpack 3 零基础入门教程 #10 - 配置多个 HTML 文件

最新推荐文章于 2023-03-22 09:59:33 发布

weixin_33932129

最新推荐文章于 2023-03-22 09:59:33 发布

阅读量95

点赞数

文章标签： webpack ViewUI

原文链接：https://juejin.im/post/5a2898dd6fb9a0451171039a

版权

之前我们只写了一个 html 文件，就是 src/index.html，但是有时候我们是需要多个的，这个时候，怎么办呢？

之前我们是这么做的，用了 html-webpack-plugin 这个插件来输出 html 文件。

webpack.config.js

...
new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: 'index.html',
  minify: {
    collapseWhitespace: true,
  },
  hash: true,
})
...
复制代码

之前怎么做，现在还是怎么做，我们复制一下，改个名字不就好吗？

webpack.config.js

new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: 'index.html',
  minify: {
    collapseWhitespace: true,
  },
  hash: true,
}),
new HtmlWebpackPlugin({
  template: './src/contact.html',
  filename: 'contact.html',
  minify: {
    collapseWhitespace: true,
  },
  hash: true,
})
复制代码

src/contact.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contact</title>
</head>
<body>
  <p>Contact page</p>
</body>
</html>
复制代码

有个问题，contact.html 使用的 js 和 css 跟 index.html 是一模一样的

如果我要让 contact.html 使用跟 index.html 不同的 js，如何做呢？（只要保证 js 不同，css 也会不同的，因为 css 也是由 js 里 import 的嘛)

那我们来改造一下：

...

module.exports = {
  entry: {
    "app.bundle": './src/app.js',
    // 这行是新增的。
    "contact": './src/contact.js'
  },
  ...
  plugins: [
    new CleanWebpackPlugin(pathsToClean),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      minify: {
        collapseWhitespace: true,
      },
      hash: true,
      // 这行是新增的。
      excludeChunks: ['contact']
    }),
    new HtmlWebpackPlugin({
      template: './src/contact.html',
      filename: 'contact.html',
      minify: {
        collapseWhitespace: true,
      },
      hash: true,
      // 这行是新增的。
      chunks: ['contact']
    }),
    new ExtractTextPlugin('style.css')
  ],
  ...
};
复制代码

上面的 excludeChunks 指的是不包含， chunks 代表的是包含。

src/contact.js

console.log('hi from contact js')
复制代码

结果：

这样就 OK 了。

先说这么多。

weixin_33932129

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack 3 零基础入门教程 #10 - 配置多个 HTML 文件

之前我们只写了一个 html 文件，就是 src/index.html，但是有时候我们是需要多个的，这个时候，怎么办呢？之前我们是这么做的，用了 html-webpack-plugin 这个插件来输出 html 文件。webpack.config.js...new HtmlWebpackPlugin({ template: './src/index.html', filename:...
复制链接

扫一扫