Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Trying to use webpacker (3) for a API/JS client #1016

Closed
alain-andre opened this issue Nov 17, 2017 · 6 comments
Closed

Trying to use webpacker (3) for a API/JS client #1016

alain-andre opened this issue Nov 17, 2017 · 6 comments

Comments

@alain-andre
Copy link

I'm trying to create a rails api and a separated JS client using webpacker.

When launching my app, the public/packs/manifest.json contains this :

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

And I whant to use it in my public/index.html file as it :

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

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

Is there a way to configure webpacker not to generate file with the random number ? Or a better way to make the index.html launch the good generated files ? Thanks.
@alain-andre alain-andre changed the title Trying to use webpacker for a API/JS client Trying to use webpacker (3) for a API/JS client Nov 17, 2017
@guilleiguaran
Copy link
Member

This might be useful for your case: https://github.com/jantimon/html-webpack-plugin

@gauravtiwari
Copy link
Member

Pretty old example on v2, but here's how can do it: https://github.com/gauravtiwari/webpacker-rails-api/blob/master/config/webpack/shared.js#L75

https://github.com/gauravtiwari/webpacker-rails-api/blob/master/config/webpack/shared.js#L65

If you are using v3, just follow the new API's for adding plugins.

The plugin @guilleiguaran pointed out will insert the relevant files for you.

@alain-andre
Copy link
Author

Thanks a lot @guilleiguaran @gauravtiwari

@alain-andre
Copy link
Author

@guilleiguaran I tried to use the plugin, but it seems I'm doing something wrong ; could you help me ?

I have read the webpacker doc in order to add a plugin so I added this in my config/webpack/development.js but it does not generate anything.

const environment = require('./environment')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlWebpackPlugin = new HtmlWebpackPlugin({
  inject: 'body',
  alwaysWriteToDisk: true
});

environment.plugins.get('HtmlWebpackPlugin')
module.exports = environment.toWebpackConfig()

The webpack trace does not say anything about HtmlWebpackPlugin :

$ ./bin/webpack-dev-server --inline true --hot true --public $C9_HOSTNAME
 10% building modules 2/2 modules 0 active                                         
Project is running at http://localhost:8081/
webpack output is served from /packs/
Content not from webpack is served from /home/ubuntu/workspace/public/packs
404s will fallback to /index.html
Hash: ecd3e92d0f0a8dcac7cf                                                           
Version: webpack 3.8.1
Time: 2770ms
                                         Asset       Size  Chunks                    Chunk Names
             hello_vue-671421bc5be9c021b0ca.js    1.47 MB       0  [emitted]  [big]  hello_vue
           application-d2ce57fea2210882a7d4.js     855 kB       1  [emitted]  [big]  application
hello_vue-9cb5a7334a6577c3422968b9b9970b2f.css   64 bytes       0  [emitted]         hello_vue
                                 manifest.json  206 bytes          [emitted]         
   [2] (webpack)-dev-server/client?http://localhost:8081 7.95 kB {0} {1} [built]
   [3] ./node_modules/url/url.js 23.3 kB {0} {1} [built]
  [10] ./node_modules/strip-ansi/index.js 161 bytes {0} {1} [built]
  [12] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} {1} [built]
  [13] (webpack)-dev-server/client/socket.js 1.05 kB {0} {1} [built]
  [14] ./node_modules/sockjs-client/dist/sockjs.js 181 kB {0} {1} [built]
  [15] (webpack)-dev-server/client/overlay.js 3.73 kB {0} {1} [built]
  [20] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} {1} [built]
  [22] (webpack)/hot/emitter.js 75 bytes {0} {1} [built]
  [24] multi (webpack)-dev-server/client?http://localhost:8081 ./app/javascript/packs/application.js 40 bytes {1} [built]
  [25] ./app/javascript/packs/application.js 515 bytes {1} [built]
  [26] multi (webpack)-dev-server/client?http://localhost:8081 ./app/javascript/packs/hello_vue.js 40 bytes {0} [built]
  [27] ./app/javascript/packs/hello_vue.js 1.39 kB {0} [built]
  [28] ./node_modules/vue/dist/vue.runtime.esm.js 207 kB {0} [built]
  [32] ./app/javascript/app.vue 2.07 kB {0} [built]
    + 26 hidden modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/vue-loader/lib/style-compiler/index.js?{"vue":true,"id":"data-v-6fb8108a","scoped":true,"hasInlineConfig":false}!node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!app/javascript/app.vue:
       [0] ./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-6fb8108a","scoped":true,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./app/javascript/app.vue 235 bytes {0} [built]
       [1] ./node_modules/css-loader/lib/css-base.js 2.26 kB {0} [built]
webpack: Compiled successfully.

@gauravtiwari
Copy link
Member

That should be set:

const htmlWebpackPlugin = new HtmlWebpackPlugin({
  inject: 'body',
  alwaysWriteToDisk: true
});

environment.plugins.set('HtmlWebpackPlugin', htmlWebpackPlugin)

@alain-andre
Copy link
Author

Thanks a lot. I thought it should be set rather than get, but I did not understood how to do.
Now I get it 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@guilleiguaran @gauravtiwari @alain-andre