Skip to content

Instantly share code, notes, and snippets.

@andrewfluck

andrewfluck/babel.config.js

Last active August 28, 2018 20:14
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andrewfluck/51b483a56ba40a3852eeddaf1948ba00 to your computer and use it in GitHub Desktop.
Save andrewfluck/51b483a56ba40a3852eeddaf1948ba00 to your computer and use it in GitHub Desktop.
Download ZIP
My *almost* perfect Webpack config
Raw
babel.config.js
module.exports = {
presets: [
'@babel/react',
],
plugins: [
'@babel/proposal-class-properties',
[ '@babel/proposal-decorators', { legacy: true }],
'@babel/proposal-do-expressions',
'@babel/proposal-export-default-from',
'@babel/proposal-export-namespace-from',
'@babel/proposal-function-bind',
'@babel/proposal-function-sent',
'@babel/proposal-json-strings',
'@babel/proposal-logical-assignment-operators',
'@babel/proposal-nullish-coalescing-operator',
'@babel/proposal-numeric-separator',
'@babel/proposal-object-rest-spread',
'@babel/proposal-optional-chaining',
[ '@babel/proposal-pipeline-operator', { "proposal": "minimal" }],
'@babel/proposal-throw-expressions',
'@babel/syntax-dynamic-import',
'@babel/syntax-import-meta',
]
};
Raw
package.json
{
"scripts": {
"start:dev": "npm run build:dev:vendor && webpack-dev-server",
"start:dev:watch": "npm run build:dev:vendor && webpack-dev-server --watch",
"build:dev": "npm run build:dev:vendor && webpack",
"build:dev:watch": "npm run build:dev:vendor && webpack --watch",
"build:dev:vendor": "webpack --config=vendor.webpack.config.js"
},
"devDependencies": {
"@babel/core": "^7.0.0-beta.55",
"@babel/plugin-proposal-class-properties": "7.0.0-beta.54",
"@babel/plugin-proposal-decorators": "7.0.0-beta.54",
"@babel/plugin-proposal-do-expressions": "7.0.0-beta.54",
"@babel/plugin-proposal-export-default-from": "7.0.0-beta.54",
"@babel/plugin-proposal-export-namespace-from": "7.0.0-beta.54",
"@babel/plugin-proposal-function-bind": "7.0.0-beta.54",
"@babel/plugin-proposal-function-sent": "7.0.0-beta.54",
"@babel/plugin-proposal-json-strings": "7.0.0-beta.54",
"@babel/plugin-proposal-logical-assignment-operators": "7.0.0-beta.54",
"@babel/plugin-proposal-nullish-coalescing-operator": "7.0.0-beta.54",
"@babel/plugin-proposal-numeric-separator": "7.0.0-beta.54",
"@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.55",
"@babel/plugin-proposal-optional-chaining": "7.0.0-beta.54",
"@babel/plugin-proposal-pipeline-operator": "7.0.0-beta.54",
"@babel/plugin-proposal-throw-expressions": "7.0.0-beta.54",
"@babel/plugin-syntax-dynamic-import": "7.0.0-beta.54",
"@babel/plugin-syntax-import-meta": "7.0.0-beta.54",
"@babel/preset-env": "^7.0.0-beta.55",
"@babel/preset-react": "^7.0.0-beta.55",
"babel-loader": "^8.0.0-beta.0",
"css-loader": "^1.0.0",
"file-loader": "^1.1.11",
"html-webpack-dll-file-plugin": "^1.0.4",
"html-webpack-plugin": "^4.0.0-alpha",
"mini-css-extract-plugin": "^0.4.1",
"node-sass": "^4.9.2",
"sass-loader": "^7.0.3",
"webpack": "^4.16.3",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
},
"dependencies": {
"classnames": "^2.2.6",
"history": "^4.7.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-loadable": "^5.4.0",
"react-router": "^4.3.1",
"recompose": "^0.28.0"
}
}
Raw
src > tmpl > index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title || 'Webpack App' %></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<% if (htmlWebpackPlugin.options.appMountId) { %>
<div id="<%= htmlWebpackPlugin.options.appMountId%>"></div>
<% } %>
<script src="/js/vendor.bundle.js"></script>
</body>
</html>
Raw
vendor.webpack.config.js
const webpack = require('webpack');
const path = require('path');
const getEnv = () =>
process.env.NODE_ENV !== 'development' ? 'production' : 'development';
const isDev = () =>
process.env.NODE_ENV !== 'development';
module.exports = {
mode: 'development',
entry: {
vendor: [ 'react', 'react-dom', 'react-router/es', 'classnames' ]
},
output: {
filename: 'js/vendor.bundle.js',
path: path.resolve(__dirname, 'build'),
library: 'vendor_lib',
},
plugins: [
new webpack.DllPlugin({
name: 'vendor_lib',
path: 'build/vendor-manifest.json'
})
],
};
Raw
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const getEnv = () =>
process.env.NODE_ENV !== 'development' ? 'production' : 'development';
const isDev = () =>
process.env.NODE_ENV !== 'development';
module.exports = {
mode: 'development',
entry: {
bundle: './src/js/index.js',
},
output: {
filename: 'js/[name].js',
chunkFilename: 'js/[name].js',
path: path.resolve(__dirname, 'build'),
publicPath: '/',
},
devServer: {
host: '0.0.0.0',
contentBase: path.resolve(__dirname, 'build'),
historyApiFallback: true,
compress: true,
port: 8080,
headers: {
'Service-Worker-Allowed': '/',
},
},
resolve: {
extensions: [ '.js', '.jsx' , '.json' ],
modules: [
'node_modules',
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'src', 'css'),
path.resolve(__dirname, 'src', 'js'),
],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
}, {
test: /\.(c|sa|sc)ss$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: {
modules: true,
importLoaders: 2,
camelCase: true,
localIdentName: isDev() ? '[local]__[hash:base62:5]' : '[hash:base62:5]',
}},
'sass-loader',
],
}, {
test: /\.(svg|png|jpg)$/,
use: [{ loader: 'file-loader', options: {
name: '[name].[ext]',
outputPath: 'assets/'
}}],
}
],
},
optimization: {
splitChunks: {
cacheGroups: {
critical: {
name: 'critical',
test: /(.+)?(critical)(.+)?\.(c|sa|sc)ss$/,
chunks: 'all',
enforce: true,
priority: 1,
},
styles: {
name: 'styles',
test: /\.(c|sa|sc)ss$/,
chunks: 'all',
enforce: true,
},
},
},
},
plugins: [
new webpack.DllReferencePlugin({
context: '.',
manifest: require('./build/vendor-manifest.json')
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
}),
new HtmlWebpackPlugin({
title: 'Title',
appMountId: 'app-mount',
template: path.resolve(__dirname, 'src', 'tmpl', 'index.html'),
}),
],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment