trailpack-webpack

Webpack asset pipeline trailpack for Trails.

1. Install

$ npm install trailpack-webpack --save

2. Configure

a. Set your environment.

By default, Trails (and express) sets NODE_ENV=development. In this setting, webpack will watch for changes in the directories you specify in your config/webpack.js.

NODE_ENV	webpack mode	description
development	webpack.watch()	Rebuilds on file changes during runtime
staging or production	webpack.run()	Build bundle once on load.

b. Configure Webpack

This trailpack includes basic Webpack Configuration. Below is a more complete example of using webpack to compile a React.js application located in assets/js/.

// config/webpack.js
module.exports = {
  entry: [
    './client/js/app.js'
  ],
  output: {
    path: './public',
    filename: 'app.js',
    publicPath: ''
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Trails Application'
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel',
      exclude: /node_modules/,
      query: {
        presets: [ 'react', 'es2015', 'stage-0' ]
      }
    }, {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }, {
      test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
      loader: 'file-loader?name=fonts/[name].[ext]'
    }, {
      test: /\.(png|jpg)$/,
      loader: require.resolve('url-loader')
    }]
  }
}

3. Start!

$ npm start

Contributing

We love contributions! Please check out our Contributor's Guide for more information on how our projects are organized and how to get started.

License

MIT