Skip to content

Instantly share code, notes, and snippets.

@netojose
Created March 21, 2018 13:37
Show Gist options
  • Save netojose/05a56476b2cf8de8f4a40b5324b72646 to your computer and use it in GitHub Desktop.
Save netojose/05a56476b2cf8de8f4a40b5324b72646 to your computer and use it in GitHub Desktop.
Webpack config to split css and js files by route and/or component (Webpack 2)
const path = require('path');
module.exports = {
entry: './src/index.jsx',
output: {
path: path.resolve('dist'),
filename: 'assets/js/[name].[hash:12].js',
publicPath: 'http://localhost:8080/'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
loaders: [
{
test: /\.(jpe?g|png|gif|svg|ico)$/i,
loader: "file-loader",
query: {
name: "assets/images/[name].[ext]",
publicPath: "../../"
}
},
{
test: /\.(sass|scss)$/,
loaders: [
"style-loader/url",
{
loader: "file-loader",
query: {
"name": "assets/css/[name].[hash:12].css"
}
},
"extract-loader",
"css-loader",
"sass-loader"
]
},
{
test: /.jsx?$/,
loaders: ['babel-loader', 'eslint-loader'],
exclude: /node_modules/
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: ({ resource }) => /node_modules/.test(resource)
}),
new webpack.optimize.CommonsChunkPlugin({
name: "commons",
filename: "js/commons.[hash:12].js"
})
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment