title: Using yarn with rails 5.1, I changed sytylesheet include to pack and getting an error
body: <p>New rails 5.1 application, installed bootstrap using yarn</p>
  
  <pre><code>yarn install boostrap
  </code></pre>
  
  <p>Now in my application.scss file I have this which includes the entire bootstrap css file currenly:</p>
  
  <pre><code>/*
   *= require_tree .
   *= require_self
   *= require bootstrap/dist/css/bootstrap
   */
  </code></pre>
  
  <p>My layout file looks like this:</p>
  
  <pre><code>&lt;%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %&gt;
  &lt;%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %&gt;
  </code></pre>
  
  <p>Everything works fine when running </p>
  
  <blockquote>
    <p>rails s</p>
  </blockquote>
  
  <p>Now from what I understand to use webpack I have to change the includes to look like this:</p>
  
  <pre><code>&lt;%= stylesheet_pack_tag 'application' %&gt;
  &lt;%= javascript_pack_tag 'application' %&gt;
  </code></pre>
  
  <p>Now when I run rails server I get an error:</p>
  
  <pre><code>Webpacker can't find application.css in /dev/myapp/public/packs/manifest.json. Possible causes:
  1. You want to set webpacker.yml value of compile to true for your environment
     unless you are using the `webpack -w` or the webpack-dev-server.
  2. webpack has not yet re-run to reflect updates.
  3. You have misconfigured Webpacker's config/webpacker.yml file.
  4. Your webpack configuration is not creating a manifest.
  Your manifest contains:
  {
    "application.js": "/packs/application-8d71e5035f8940a9e3d3.js",
    "application.js.map": "/packs/application-8d71e5035f8940a9e3d3.js.map"
  }
  </code></pre>
  
  <p>In another terminal I ran this, but it did't help:</p>
  
  <pre><code>./bin/webpack-dev-server
  </code></pre>
  
  <p>Am I suppose to run webpack-dev-server or is <code>rails s</code> enough?
  How can I test that both my CSS and javascript setup is using webpack, can I start writing ES5/6 now with this setup?</p>
  
  <p>Reference:</p>
  
  <p>webpack.yml</p>
  
  <pre><code># Note: You must restart bin/webpack-dev-server for changes to take effect
  
  default: &amp;default
    source_path: app/javascript
    source_entry_path: packs
    public_output_path: packs
    cache_path: tmp/cache/webpacker
  
    # Additional paths webpack should lookup modules
    # ['app/assets', 'engine/foo/app/assets']
    resolved_paths: []
  
    # Reload manifest.json on all requests so we reload latest compiled packs
    cache_manifest: false
  
    extensions:
      - .js
      - .sass
      - .scss
      - .css
      - .module.sass
      - .module.scss
      - .module.css
      - .png
      - .svg
      - .gif
      - .jpeg
      - .jpg
  
  development:
    &lt;&lt;: *default
    compile: true
  
    # Reference: https://webpack.js.org/configuration/dev-server/
    dev_server:
      https: false
      host: localhost
      port: 3035
      public: localhost:3035
      hmr: false
      # Inline should be set to true if using HMR
      inline: true
      overlay: true
      compress: true
      disable_host_check: true
      use_local_ip: false
      quiet: false
      headers:
        'Access-Control-Allow-Origin': '*'
      watch_options:
        ignored: /node_modules/
  
  
  test:
    &lt;&lt;: *default
    compile: true
  
    # Compile test packs to a separate directory
    public_output_path: packs-test
  
  production:
    &lt;&lt;: *default
  
    # Production depends on precompilation of packs prior to booting for performance.
    compile: false
  
    # Cache manifest.json for performance
    cache_manifest: true
  </code></pre>