DapperFox/webpack-conver.md

## webpack-conver.md

      
    Raw
  

              webpack-conver.md
            
          
    Webpack Conversion

Problems with current setup

Asset Pipeline to Webpack
What's wrong with our current system?

Dependent on Sprockets-ES6 experimental "will never reach stable"
Poor debugging with es6
Using modulejs to define and require modules.
Stuck using gems for front end use.
Limited capability to create different bundles.
Can't use emerging javascript technologies (redux, babel-flow type, babel 6, etc)

Why webpack is awesome?


It's an answer to all of the above problems
Built in bundle integration to include node_modules when required/imported
Modular configuration so we can write the code we want and build it the way we want it
Ability to use things like eslint and other front end tools
Brings us up to date with current standards

What does it take to convert to webpack?

Setup NPM


 npm init


 add gemfury proxy to .npmrc


 npm install any packages that were currently being installed through a gem (react, lodash, jQuery, transcend-js, etc.) npm install react --save


 Install all of the required packages for webpack/babel npm install babel babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 css-loader expose-loader file-loader node-sass sass-loader style-loader url-loader webpack --save


 Add .babelrc to use the presets installed above like so


 Add  $transcend-font-path: '~transcend-js/fonts/'; $transcend-image-path: '~transcend-js/images/'; @import "~transcend-js/stylesheets/transcend"; to application.scss


 Implement new router with views in application.js


Rails Asset Pipeline Removal


 Add config.assets.enabled = false to turn off asset pipeline
 Remove transcend gem
 convert files from modulejs to import export
 Remove any front end gems that were installed with npm earlier

For a reference on how to implement look at smithers
Webpack configuration

See UHF for a better webpack config implementation
var path = require("path");

module.exports = {
  context: path.resolve(__dirname, "app/client/"),
  entry: path.resolve(__dirname, "app/client/application.js"),
  output: {
    path: path.resolve(__dirname, "public/settings"),
    filename: "bundle.js",
    publicPath: "/settings/"
  },
  resolve: {
    modulesDirectories: ['node_modules'],
    extensions: ['', '.js', '.jsx', '.scss'],
    root: [path.resolve(__dirname, "app/client/")]
  },
  module: {
    loaders: [
      {
        loader: 'babel-loader',
        test: /\.js?$/,
        exclude: /node_modules/
      },
      {
        loader: 'url-loader',
        query: {
          limit: 8192
        },
        test: /\.(jpe?g|png|gif|svg|ttf|eot|woff|woff2)$/
      },
      {
        loader: 'style-loader!css-loader!sass-loader',
        test: /\.scss$/
      }
    ]
  }
};
I moved all of my assets into app/client and have my application.js file there which is the entry point.
This output's straight to the public/ folder, I namespaced it with settings for smithers.
You should add what ever folder you're building to to the .gitignore (in my case /public/settings)
The loaders included here are babel-loader (transpiles the es6), url-loader (for images and fonts), and style-loader!css-loader!sass-loader (for stylesheets)
As you can see we're not excluding node_modules in url-loader and sass-loader so that we can pull in the transcend-js styles, images, and fonts.
Deployment


 See here for circle-ci build process

Node 4.1.0
Dependency overrides including the gemfury registry


 Run heroku config:add BUILDPACK_URL=https://github.com/ddollar/heroku-buildpack-multi.git


 Add .buildpacks file to include nodejs


 Create rake task to run webpack


 To create a hashed bundle for cache invalidation see this pull request which is how it is implemented in smithers Webpack-Hash


Development


 Create Procfile.dev if you don't have one yet and set it to run build: webpack -w -d (-w for watch -d for source maps) after you run your web server. See smithers procfile for an example


 Run foreman start -f Procfile.dev


 If you want to run them separately you can run rails s and webpack at the same time to get separate errors instead of them both being ouput in the same console
No results found