{"componentChunkName":"component---src-templates-post-tsx","path":"/posts/2018/04/04/rails-webpack-webpacker","webpackCompilationHash":"eebfa071629ad42c48b3","result":{"data":{"markdownRemark":{"html":"

Rails is great, webpack is great, abstractions are not always great.

\n

I'm going to start this from a pretty vanilla Rails 5 setup, I started with rails new webpacked --webpack.

\n

Also, for this to work, you'll need webpack > 4.3.0.

\n

Remove the webpacker things

\n

Remove sass-rails, uglifier, coffee-rails, turbolinks, webpacker from Gemfile.

\n

Remove config.webpacker.check_yarn_integrity settings in config/envronments.

\n

Change javascript_pack_tag and stylesheet_pack_tag to javascript_include_tag and stylesheet_link_tag.

\n

Then:

\n
$ rm -r bin/webpack config/webpack* public/packs\n$ bundle\n$ yarn uninstall @rails/webpacker webpack-dev-server
\n

Disable sprockets

\n
# config/environments/development.rb\nRails.application.configure do\n  …\n  config.assets.compile = false  …\nend
\n

Install dependencies

\n
$ mkdir public/assets\n$ touch public/assets/.keep\n$ yarn add --dev webpack webpack-{cli,dev-server}
\n

Check /public/assets into git, then Add /public/assets to your .gitignore. This is where we're going to build assets to for production.

\n

Add build scripts

\n
// package.json\n{\n  \"name\": \"webpacked\",\n  \"private\": true,\n  \"scripts\": {    \"server\": \"webpack-dev-server\",    \"precompile\": \"rm -r public/assets/* && NODE_ENV=production webpack\"  },  \"dependencies\": {},\n  \"devDependencies\": {\n    \"webpack\": \"^4.5.0\",\n    \"webpack-cli\": \"^2.0.13\",\n    \"webpack-dev-server\": \"^3.1.1\"\n  }\n}
\n

Add a simple webpack config

\n
// webpack.config.js\nconst DIR = require(\"path\").resolve(__dirname)\nconst PROD = process.env.NODE_ENV === \"production\"\n\nmodule.exports = {\n  entry: {\n    application: `${DIR}/app/assets/javascripts/application.js`,\n  },\n  mode: PROD ? \"production\" : \"development\",\n  output: {\n    chunkFilename: \"[name].js\",\n    filename: \"[name].js\",\n    path: `${DIR}public/assets/`,\n  },\n  resolve: {\n    extensions: [\".js\", \".json\", \".css\"],\n    modules: [\"node_modules\", `${DIR}/app/assets`],\n  },\n}
\n

Now start the wepback dev server:

\n
$ yarn server\nℹ ｢wds｣: Project is running at http://localhost:8080/\nℹ ｢wds｣: webpack output is served from /\nℹ ｢wdm｣: Hash: ee01dba8920628636a4e\nℹ ｢wdm｣: Compiled successfully.
\n

Go to http://localhost:8080/application.js and you should be able to see the compiled webpack bundle.

\n

Compile CSS

\n

Add the necessary webpack loaders:

\n
$ yarn add -D {file,extract,css,postcss}-loader cssnano
\n

And then set up a rule for them:

\n
// webpack.config.js\nmodule.exports = {\n  …\n  module: {    rules: [      {        test: /\\.css/,        use: [          {            loader: \"file-loader\",            options: {              name: \"[name].css\",            },          },          { loader: \"extract-loader\" },          { loader: \"css-loader\" },          {            loader: \"postcss-loader\",            options: {              ident: \"postcss\",              plugins: loader => [                require(\"cssnano\")({                  discardComments: { removeAll: true },                }),              ],            },          },        ],      },    ],  },  …\n};
\n

Now, in your JavaScript files, you can require stylesheets like so:

\n
// app/assets/javascripts/application.js\nrequire(\"stylesheets/application.css\")\nconsole.log(\"Hello from application.js!\")
\n

Tell Rails where to find assets from webpack-dev-server

\n

Now if you load up your site, you're probably seeing something like:\nSprockets::Rails::Helper::AssetNotFound in Welcome#index

\n

Add this helper to app/helpers/application_helper.rb:

\n
# app/helpers/application_helper.rb\nmodule ApplicationHelper\n  def webpack_asset_url(name)    \"http://localhost:8080/#{name}\"  endend
\n

Then wrap the paths of any assets you're including in that helper, and don't forget the extensions:

\n
<!-- app/views/layouts/application.html.erb -->\n<!DOCTYPE html>\n<html>\n  <head>\n    <title>Webpacked</title>\n    <%= csrf_meta_tags %> <%= stylesheet_link_tag\n    webpack_asset_url('application.css'), media: 'all' %> <%=\n    javascript_include_tag webpack_asset_url('application.js') %>  </head>\n  <body>\n    <%= yield %>\n  </body>\n</html>
\n

Building for production

\n

But wait, production! We need to tell Rails to serve the static assets in production:

\n
# app/helpers/application_helper.rb\nmodule ApplicationHelper\n  def webpack_asset_url(name)\n    if Rails.env.production?      \"/assets/#{name}\"    else      \"http://localhost:8080/#{name}\"    end  end\nend
\n

You can test this by precompiling the assets and then restarting your Rails server in production mode:

\n
$ yarn precompile && \\\n  RAILS_ENV=production \\\n  RAILS_SERVE_STATIC_FILES=true \\\n  SECRET_KEY_BASE=hi \\\n  bin/rails server
\n

Fingerprinting assets

\n

But wait, asset fingerprinting! Change the output filename for CSS and entrypoints:

\n
// webpack.config.js\nmodule.exports = {\n  …\n  module: {\n    rules: [\n      {\n        test: /\\.css/,\n        use: [\n          {\n            loader: \"file-loader\",\n            options: {\n              name: PROD ? \"[name]-[hash].css\" : \"[name].css\",            },\n          },\n          { loader: \"extract-loader\" },\n          { loader: \"css-loader\" },\n          {\n            loader: \"postcss-loader\",\n            options: {\n              ident: \"postcss\",\n              plugins: loader => [\n                require(\"cssnano\")({\n                  discardComments: { removeAll: true },\n                }),\n              ],\n            },\n          },\n        ],\n      },\n    ],\n  },\n  output: {\n    chunkFilename: PROD ? \"[name]-[contenthash].js\" : \"[name].js\",    filename: PROD ? \"[name]-[contenthash].js\" : \"[name].js\",    hashDigestLength: 32,    path: `${DIR}public/assets/`,\n  },\n  …\n}
\n

Now we need to tell Rails about these hashes somehow. First, we'll add the webpack-manifest-plugin (when building for production) to output a JSON map of the names of chunks to their hashed names:

\n
// webpack.config.js\nmodule.exports = {\n  …\n  plugins: [    PROD && new (require(\"webpack-manifest-plugin\"))()  ].filter(Boolean),  …\n};
\n

If you yarn precompile again, you should see it output a file like this, in addition to the other chunks:

\n
// public/assets/manifest.json\n{\n  \"application.css\": \"application-4cf6c42fe4e9a27ee5a758dcf37091f7.css\",\n  \"application.js\": \"application-5689a742f9b3cb6758a6b35164a98ade.js\"\n}
\n

Now let's update the Rails helper to get everything sorted out:

\n
# app/helpers/application_helper.rb\nmodule ApplicationHelper\n  def webpack_asset_url(name)\n    if Rails.env.production?\n      \"/assets/#{webpack_fingerprint_for(name)}\"    else\n      \"http://localhost:8080/#{name}\"\n    end\n  end\n\n  def webpack_fingerprint_for(name)    @chunk_manifest ||= JSON.parse(File.read('public/assets/manifest.json'))    if @chunk_manifest[name].nil?      logger.error \"chunk_manifest_missing name=#{name}\"      logger.error @chunk_manifest.inspect    end    @chunk_manifest[name]  endend
\n

You might have to restart the Rails server again, but now you should see it loading the fingerprinted assets! Now wherever you run rake assets:precompile during your deployment process, replace it with yarn precompile.

\n

Separate the webpack runtime

\n

For better caching, it's smart to separate the webpack runtime from your application's JavaScript:

\n
// webpack.config.js\nmodule.exports = {\n  …\n  optimization: {    runtimeChunk: \"single\",  },  …\n};
\n

Then just include that runtime chunk before any other JavaScript:

\n
<!-- app/views/layouts/application.html.erb -->\n<!DOCTYPE html>\n<html>\n  <head>\n    <title>Webpacked</title>\n    <%= csrf_meta_tags %> <%= stylesheet_link_tag\n    webpack_asset_url('application.css'), media: 'all' %> <%=\n    javascript_include_tag webpack_asset_url('runtime.js') %> <%=\n    javascript_include_tag webpack_asset_url('application.js') %>  </head>\n\n  <body>\n    <%= yield %>\n  </body>\n</html>
","timeToRead":5,"frontmatter":{"date":"2018-04-04T21:06:50.000Z","link":null,"path":"/rails-webpack-webpacker","tags":["webpack","javascript","rails"],"title":"Rails + webpack - webpacker"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"afe916b1-1136-5ffd-8533-c35514e9e4aa"}}}