Skip to content

Instantly share code, notes, and snippets.

@abdullah353
Created October 8, 2018 09:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abdullah353/fdde2c9364d4ece95e171315791eeeba to your computer and use it in GitHub Desktop.
Save abdullah353/fdde2c9364d4ece95e171315791eeeba to your computer and use it in GitHub Desktop.
webpack.config.js for React + Babel + Webpack + Eslint
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
module.exports = {
mode: 'development',
entry: './web-app/index.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader']
},
{
test: /\.css$/,
include: /node_modules/,
loaders: ['style-loader', 'css-loader'],
},
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translates CSS into CommonJS modules
}, {
loader: 'postcss-loader', // Run post css actions
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compiles Sass to CSS
}]
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true, // webpack@1.x
disable: true, // webpack@2.x and newer
},
},
],
}
]
},
devServer: {
contentBase: './dist',
overlay: true,
hot: true,
historyApiFallback: true
},
plugins: [
new CopyWebpackPlugin(['resources/index.html']),
new webpack.HotModuleReplacementPlugin()
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment