剧场模式
首页前端Webpackwebpack 3 零基础入门视频教程

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

求知小风 · 元婴发布于
2

之前我们只写了一个 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 了。

先说这么多。

0 条回复
暂无回复~~
加微信(qiuzhi99666)入群官方服务号
随机课程
React & MobX 入门与实战视频教程

React & MobX 入门与实战视频教程

27 个视频2 小时 36 分钟高级

Pro¥ 158.00¥ 126.40

Mobx已完结新课程

学员(18)
nooamov · 元婴奥特曼🤖 · 元婴lana2020 · 元婴袁勇 · 元婴小杰 · 化神cooltan · 太乙toutou · 元婴dear°学会微笑 · 元婴React-小白 · 合体fengjunhua · 元婴尹迪 · 合体daniel_mea · 元婴
最新动态
nooamov · 元婴学习到了5:53
奥特曼🤖 · 元婴学习到了6:52
lana2020 · 元婴学习到了4:37
袁勇 · 元婴学习到了7:04
小杰 · 化神学习到了7:04
统计信息
    学员: 17651
    视频数量: 1035
    帖子数量: 427

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 关注我们 | 在线学员:110

Top