Skip to content

Instantly share code, notes, and snippets.

@AndrejGajdos
Last active September 3, 2018 00:40
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AndrejGajdos/412f865ebf7c311a1d0f to your computer and use it in GitHub Desktop.
Save AndrejGajdos/412f865ebf7c311a1d0f to your computer and use it in GitHub Desktop.
A sample project to demonstrate bundling ES6, React, SASS and Bootstrap with Webpack (http://andrejgajdos.com/setting-up-webpack-for-es6-react-sass-and-bootstrap/)
var webpack = require('webpack');
var merge = require('webpack-merge');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var NpmInstallPlugin = require('npm-install-webpack-plugin');
var autoprefixer = require('autoprefixer');
const TARGET = process.env.npm_lifecycle_event;
console.log("target event is " + TARGET);
var common = {
cache: true,
debug: true,
entry: './src/script/index.jsx',
resolve: {
extensions: ['', '.js', '.jsx']
},
output: {
filename: 'index.js',
sourceMapFilename: '[file].map'
},
module: {
loaders: [{
test: /\.js[x]?$/,
loaders: ['babel-loader?presets[]=es2015&presets[]=react'],
exclude: /(node_modules|bower_components)/
}, {
test: /\.css$/,
loaders: ['style', 'css']
}, {
test: /\.scss$/,
loaders: ['style', 'css', 'postcss', 'sass']
}, {
test: /\.less$/,
loaders: ['style', 'css', 'less']
}, {
test: /\.woff$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]"
}, {
test: /\.woff2$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff2&name=[path][name].[ext]"
}, {
test: /\.(eot|ttf|svg|gif|png)$/,
loader: "file-loader"
}]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
postcss: function() {
return [autoprefixer({
browsers: ['last 3 versions']
})];
}
};
if (TARGET === 'dev' || !TARGET) {
module.exports = merge(common, {
devtool: 'eval-source-map',
devServer: {
historyApiFallback: true
},
output: {
publicPath: 'http://localhost:8090/assets'
},
plugins: [
new NpmInstallPlugin({
save: true // --save
})
]
});
}
if (TARGET === 'build') {
module.exports = merge(common, {
devtool: 'source-map',
output: {
path: './dist'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack-react',
template: 'index-template.ejs'
})
]
});
}
@jantimon
Copy link

If you use title you should rather call the template index-template.ejs otherwise it might conflict when specifying a .html loader.
The inject: 'body' is the default value.. so you might skip it

@AndrejGajdos
Copy link
Author

@jantimon thank you, I will update this config and my project...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment