0

我正在尝试使用 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 startwebpack 时，会创建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>

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

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

4

1 回答 1

1

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

我只需要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()
于 2017-11-27T14:38:52.493 回答