Awesome
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.