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