webpack实战——(3)自动生成项目中的html页面

最新推荐文章于 2024-01-11 14:13:40 发布

Joyce的前端日常

最新推荐文章于 2024-01-11 14:13:40 发布

阅读量2.5k

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/joyce_lcy/article/details/78627268

版权

1. 引言

在上一篇当中我们讲了如何通过webpack打包带hash的（或者说是版本号）的文件。这里，引申出来一个问题：文件名是不固定的，那岂不是每次打包后要去修改引用？

这么麻烦，当然不可能这么做。下文就来讲讲如何借用webpack的插件来解决这个问题。

2. 生成html页面

(1) 安装插件

在Terminal中安装html-webpack-plugin插件。

npm install html-webpack-plugin --save-dev

(2) 引用插件

在webpack.config.js中require该插件，并加上plugins这一项。

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports={
  entry: {
    main: './src/script/main.js',
    a: './src/script/a.js'
  },
  output:{
    path: path.resolve(__dirname, 'dist/js'),
    filename: "[name]-[chunkhash].bundle.js"    
  },
  plugins:[
    new htmlWebpackPlugin()
  ]
}

npm run webpack后可以看到dist文件夹中生成打包后的html，如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="main-d02880881ec2455f025c.bundle.js"></script><script type="text/javascript" src="a-3af0762ff7b4e6ff9f7c.bundle.js"></script></body>
</html>

js的引用的确为带有hash的文件了。但是，哪里不对？

再看一下src中的index.html的源文件，如下，title标签中的文字是不一样的。

<title>webpack demo</title>

这说明了打包后的index.html和源文件的index.html没有任何关系。这显然是不满足需求的。

(3) 给插件添加模板

[1] 指定模板

如何解决上述问题呢？需要给插件给插件指定一个模板。

plugins:[
  new htmlWebpackPlugin({
    template: 'index.html'
  })
]

打包后，title发生了改变，与源文件中一致了。这样，两者就绑定起来了。

但是，还是有个问题。所有打包的内容都在dist->js中，而index.html我们并不希望放到这个文件夹了，因为不属于js，也不符合规范。

[2] 修改输出路径

这里，我们需要修改output，将输出的目标位置改为dist，同时，给js需要输出的位置增加相对路径。

【修改前】

output:{
  path: path.resolve(__dirname, 'dist/js'),
  filename: "[name]-[chunkhash].bundle.js"    
},

【修改后】

output:{
  path: path.resolve(__dirname, 'dist'),
  filename: "js/[name]-[chunkhash].bundle.js"    
},

(4) html-webpack-plugin参数

[1] filename

此时打包后的index.html不带hash。通过html-webpack-plugin提供的参数可以解决这个问题。如下，增加了filename的属性。

plugins:[
  new htmlWebpackPlugin({
    filename:'index-[hash].html',
    template: 'index.html'
  })
]

[2] inject

使用inject可以设置js的引用是放在body中还是放在head中（不设置，默认放在body中），如下。

plugins:[
  new htmlWebpackPlugin({
    filename:'index-[hash].html',
    template: 'index.html',
    inject: 'head'

最低0.47元/天解锁文章