Question

我正在尝试使用Cloud9上的webpacker在VueJs中创建Rails API和客户端。

标准安装后：npm install -g yarn && rails _5.1.4_ new . --api --webpack=vue

我正在使用 Foreman 来启动rails和webpack，这是文件。

# Procfile.dev
web: bundle exec rails s -p $PORT -b $IP
webpacker: ./bin/webpack-dev-server --inline true --hot true --public $C9_HOSTNAME

我将config/webpacker.yml的开发部分更改为：

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 8081

启动foreman start时，webpack会创建包含跟随对象的public/packs/manifest.json。

{
  "application.js": "/packs/application-d2ce57fea2210882a7d4.js",
  "hello_vue.css": "/packs/hello_vue-9cb5a7334a6577c3422968b9b9970b2f.css",
  "hello_vue.js": "/packs/hello_vue-d8d50a7562d6abcbea06.js"
}

我创建了一个包含以下内容的public/index.html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="packs/hello_vue-9cb5a7334a6577c3422968b9b9970b2f.css" />
  </head>

  <body>
    <script type="text/javascript" src="packs/application-d2ce57fea2210882a7d4.js"></script>
    <script type="text/javascript" src="packs/hello_vue-bd484161b1956b3a536b.js"></script>
  </body>
</html>

现在，当我转到网址时，我的JavaScript控制台中有Hello World from Webpacker，浏览器中有Hello Vue!。

我的问题是：是否可以使用此生成的manifest.json自动启动好文件（js，css）以及如何使用？

Answer 1

有一个名为html-webpack-plugin的插件可以创建包含所有优秀css和js链接的index.html文件。

我只需要npm install html-webpack-plugin --save-dev，然后像这样修改我的config/webpack/development.js：

const environment = require('./environment')
const HtmlWebpackPlugin = require('html-webpack-plugin')

environment.plugins.prepend('HtmlWebpackPlugin', new HtmlWebpackPlugin({
  title: 'My Vuejs App',
  inject: true
}))

module.exports = environment.toWebpackConfig()

Rails 5.1 api webpacker和vuejs

1 个答案: