Rails 5.1 api 웹 패커 및 벡터

Cloud9에서 webpacker를 사용하여 VueJs에 Rails API 및 클라이언트를 만들려고합니다. 표준 설치 후Rails 5.1 api 웹 패커 및 벡터

: 나는 레일과 웹팩을 시작 감독을 사용하고 npm install -g yarn && rails _5.1.4_ new . --api --webpack=vue

, 여기에 파일입니다.

# 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

웹팩은 다음과 객체를 포함 public/packs/manifest.json 생성 foreman start을 시작합니다. 나는 내 자바 스크립트 콘솔에서 Hello World from Webpacker 브라우저에서 Hello Vue!을 가지고있는 URL에 갈 때

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

나는 이제 다음

<!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>

을 포함하는 public/index.html 파일을 만들었습니다.

내 질문에 :이 생성 된 manifest.json을 사용하여 자동으로 좋은 파일 (js, css)을 시작하고 어떻게 사용할 수 있습니까?

출처

2017-11-17 Alain ANDRE

모든 좋은 CSS 및 js 링크를 사용하여 index.html 파일을 만들 수있는 html-webpack-plugin이라는 플러그인이 있습니다.

난 그냥 npm install html-webpack-plugin --save-dev로했다 후 내이 같은 config/webpack/development.js 수정 :

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

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

module.exports = environment.toWebpackConfig()

을

출처

2017-11-27 14:38:52

답변

관련 문제