Webpacker生成自定义index.html文件.md

发表于 | 分类于 |

实践中发现Rails webpacker在使用时，通常也是配置Rails自带的layout一起使用的，不像Vue+Webpack的普通项目，通常都是生成一个入口的html文件，那么Rails这边有没有什么方法也 生成一样的index.html入口文件呢？答案是有的：

  1. 首先要添加2个js库：

  2. 在Rails项目的config/webpack目录下新增一个模块js文件：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin')
    const { resolve } = require('path')
    const html = new HtmlWebpackPlugin({
      inject: 'body',
      alwaysWriteToDisk: true,
      filename: '../index.html',
      template: resolve('public', '_index.html')
    })
    const hardisk = new HtmlWebpackHarddiskPlugin()
    module.exports = {
      html,
      hardisk
    }

  3. 在public目录下新增一个index.html模板，这个模板里你可以定义比如title等信息，比如这样：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Webpack App</title>
      </head>
      <body>
        <script src="index_bundle.js"></script>
      </body>
    </html>

    具体内容参考：https://github.com/jantimon/html-webpack-plugin

  4. 最后回到Rails的config/webpacker/environment.js添加执行代码：

    1
    2
    3
    const { html, hardisk } = require('./html_plugin')
    environment.plugins.append('html', html)
    environment.plugins.append('hardisk', hardisk)

参考资料：