Skip to content

Instantly share code, notes, and snippets.

@arsenetoumani arsenetoumani/webpack.config.js Secret
Last active Feb 28, 2019

Embed
What would you like to do?
'use strict';
const webpack = require('webpack');
const path = require('path');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
/**
* Env
* Get npm lifecycle event to identify the environment
*/
var ENV = process.env.npm_lifecycle_event;
var isTest = ENV === 'test' || ENV === 'test-watch';
var isProd = ENV === 'build';
var isDev = ENV === 'server';
module.exports = function makeWebpackConfig() {
var config = {
mode: isDev ? "development" : "production",
entry: {
app: ['./webpack/vendors-styles.js', './webpack/vendors.js', './webpack/app.js']
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: isDev ? '/' : './',
filename: isProd ? '[name].[contenthash].js' : '[name].bundle.js',
chunkFilename: isProd ? '[name].[contenthash].js' : '[name].bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
// HTML LOADER
// Reference: https://github.com/webpack/raw-loader
// Allow loading html through js
test: /\.html$/,
loader: 'raw-loader'
},
{
test: /\.css$/,
use: [
isProd ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader'
]
},
{
test: /\.less$/,
use: [
isProd ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader',
'less-loader'
]
},
{
// ASSET LOADER
// Reference: https://github.com/webpack/file-loader
// Copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files to output
// Rename the file using the asset hash
// Pass along the updated reference to your code
// You can add here any file extension you want to get copied to your output
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader: 'file-loader'
}
]
},
resolve: {
modules: ['node_modules'],
descriptionFiles: ['package.json'],
extensions: [
'.js'
]
},
plugins: [
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
new LodashModuleReplacementPlugin({
//this setting solves the 'iteratee is not a function' errors. Refer to the issue https://github.com/lodash/lodash/issues/3101 for more info.
'shorthands': true
}),,
new HtmlWebpackPlugin({
template: './src/index.html',
// inject generated js bundles in the head if on localhost; otherwise inject them to the body. when not on localhost, files will be split into css and js using the MiniCssExtractPlugin.
inject: isDev ? 'head' : 'body'
}),
//copy the assets and i18n folder to the app's root so their resources can be resolved when referenced in code
new CopyWebpackPlugin([
{ from: path.resolve(__dirname, './src/assets'), to: 'assets' },
{ from: path.resolve(__dirname, './src/app/i18n'), to: 'i18n' }
])
],
optimization: {
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
commons: {
test: /[\\\/]node_modules[\\\/]/,
name: 'vendor',
chunks: 'all'
}
}
}
},
//setings for webpack's local dev server
devServer: {
port: 3000,
contentBase: '/',
stats: 'minimal',
host: 'localhost'
}
}
if (isTest) {
config.devtool = 'inline-source-map';
}
else if (isProd) {
config.devtool = 'source-map';
config.plugins.push(new MiniCssExtractPlugin()); // this splits css and js into different files and injects css to <head>, and js to end of <body>
}
else {
config.devtool = 'eval-source-map';
if(isDev) {
//copy the config file to the right path. we don't need to do this on the server (dev, staging, prod) because the file is already there.
config.plugins.push(new CopyWebpackPlugin([{ from: path.resolve(__dirname, './src/config.json'), to: './' }]));
}
}
return config;
}();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.