https://github.com/trailsjs/trailpack-webpack
:package: Webpack Trailpack.
https://github.com/trailsjs/trailpack-webpack
trailpack trails webpack
Last synced: 6 months ago
JSON representation
:package: Webpack Trailpack.
- Host: GitHub
- URL: https://github.com/trailsjs/trailpack-webpack
- Owner: trailsjs
- License: mit
- Created: 2015-11-26T08:52:25.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2017-01-14T19:13:48.000Z (over 8 years ago)
- Last Synced: 2025-04-23T05:45:26.560Z (6 months ago)
- Topics: trailpack, trails, webpack
- Language: JavaScript
- Size: 28.3 KB
- Stars: 11
- Watchers: 10
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# trailpack-webpack
[![Gitter][gitter-image]][gitter-url]
[![NPM version][npm-image]][npm-url]
[![Linux + OSX Build Status][ci-image]][ci-url]
[![Windows Build Status][appveyor-image]][appveyor-url]
[![Code Climate][codeclimate-image]][codeclimate-url]
[![Follow @trailsjs on Twitter][twitter-image]][twitter-url]
Webpack asset pipeline trailpack for Trails.
## 1. Install
```sh
$ npm install trailpack-webpack --save
```
## 2. Configure
### a. Set your environment.
By default, Trails ([and express](http://stackoverflow.com/a/16979503/291180)) 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()`](https://webpack.github.io/docs/configuration.html#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](https://webpack.github.io/docs/configuration.html).
Below is a more complete example of using webpack to compile a [React.js](https://facebook.github.io/react/) application located in `assets/js/`.
```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!
```sh
$ npm start
```
## Contributing
We love contributions! Please check out our [Contributor's Guide](https://github.com/trailsjs/trails/blob/master/.github/CONTRIBUTING.md) for more
information on how our projects are organized and how to get started.
## License
[MIT](https://github.com/trailsjs/trails/blob/master/LICENSE)
[trails-image]: http://i.imgur.com/zfT2NEv.png
[trails-url]: http://trailsjs.io
[npm-image]: https://img.shields.io/npm/v/trailpack-webpack.svg?style=flat-square
[npm-url]: https://npmjs.org/package/trailpack-webpack
[ci-image]: https://img.shields.io/travis/trailsjs/trailpack-webpack.svg?style=flat-square&label=Linux%20/%20OSX
[ci-url]: https://travis-ci.org/trailsjs/trailpack-webpack
[appveyor-image]: https://img.shields.io/appveyor/ci/trailsjs/trailpack-webpack/master.svg?style=flat-square&label=Windows
[appveyor-url]: https://ci.appveyor.com/project/trailsjs/trailpack-webpack
[codeclimate-image]: https://img.shields.io/codeclimate/github/trailsjs/trailpack-webpack.svg?style=flat-square
[codeclimate-url]: https://codeclimate.com/github/trailsjs/trailpack-webpack
[gitter-image]: http://img.shields.io/badge/+%20GITTER-JOIN%20CHAT%20%E2%86%92-1DCE73.svg?style=flat-square
[gitter-url]: https://gitter.im/trailsjs/trails
[twitter-image]: https://img.shields.io/twitter/follow/trailsjs.svg?style=social
[twitter-url]: https://twitter.com/trailsjs