Skip to content

Instantly share code, notes, and snippets.

@drcmda
Last active September 12, 2022 06:23
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save drcmda/8a30d897f87293efd215d23e5edbee69 to your computer and use it in GitHub Desktop.
Save drcmda/8a30d897f87293efd215d23e5edbee69 to your computer and use it in GitHub Desktop.
webpack 4
"scripts": {
"dev": "node .dev/webpack.dev.server.js",
"dev-prod": "node .dev/webpack.dev.server.js --production",
"build": "rimraf ./dist && webpack --config .dev/webpack.config.production.js --colors",
},
"devDependencies": {
"@babel/core": "7.0.0-beta.38",
"@babel/plugin-proposal-class-properties": "7.0.0-beta.38",
"@babel/plugin-proposal-decorators": "7.0.0-beta.38",
"@babel/plugin-transform-classes": "7.0.0-beta.38",
"@babel/plugin-transform-runtime": "7.0.0-beta.38",
"@babel/preset-env": "7.0.0-beta.38",
"@babel/preset-react": "7.0.0-beta.38",
"@babel/preset-stage-0": "7.0.0-beta.38",
"babel-loader": "8.0.0-beta.0",
"css-loader": "0.28.9",
"html-webpack-plugin": "git://github.com/Graham42/html-webpack-plugin.git#feat/webpack-4",
"image-webpack-loader": "4.0.0",
"progress-bar-webpack-plugin": "1.10.0",
"react-hot-loader": "4.0.0-beta.18",
"react-hot-loader-loader": "^0.0.3",
"uglifyjs-webpack-plugin": "1.1.6",
"webpack": "4.0.0-beta.0",
"webpack-bundle-analyzer": "2.9.2",
"webpack-cli": "^2.0.4",
"webpack-dev-middleware": "^2.0.4",
"webpack-hot-middleware": "^2.21.0",
"webpack-notifier": "1.5.1",
"yargs": "^11.0.0"
},
"dependencies": {
"@babel/polyfill": "7.0.0-beta.38",
"@babel/runtime": "^7.0.0-beta.38",
const path = require('path')
const WebpackNotifierPlugin = require('webpack-notifier')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
output: {
filename: '[name].[hash].bundle.js',
chunkFilename: '[name].[hash].chunk.js',
path: path.resolve('./dist'),
publicPath: '/',
},
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{
test: /\.(gif|png|jpe?g|svg)$/,
use: [
'file-loader?hash=sha512&digest=hex&name=images/[hash].[ext]',
'image-webpack-loader',
],
},
],
},
resolve: {
modules: [path.resolve('./'), path.resolve('./node_modules'), 'node_modules'],
extensions: ['.js', '.jsx'],
},
plugins: [
new HtmlWebpackPlugin({ template: path.resolve('./.dev/index.template.ejs'), inject: true }),
new ProgressBarPlugin(),
new WebpackNotifierPlugin(),
],
performance: { hints: false },
}
const path = require('path')
const fs = require('fs')
const webpack = require('webpack')
const Base = require('./webpack.config.base')
const options = {
babelrc: false,
cacheDirectory: true,
presets: [
['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }],
'@babel/preset-stage-0',
'@babel/preset-react',
],
plugins: [
'react-hot-loader/babel',
// The following three only due to react-hot-loader having trouble with real classes atm
'@babel/plugin-proposal-decorators',
'@babel/plugin-proposal-class-properties',
'@babel/plugin-transform-classes',
],
}
module.exports = {
...Base,
module: {
rules: [
...Base.module.rules,
{ test: /\.jsx?$/, exclude: /node_modules/, use: { loader: 'babel-loader', options } },
{ test: /\/App\.js$/, loader: 'react-hot-loader-loader' },
],
},
entry: ['webpack-hot-middleware/client', 'index.js'],
plugins: [
...Base.plugins,
new webpack.HotModuleReplacementPlugin(),
new webpack.SourceMapDevToolPlugin(),
],
devServer: { hot: true, contentBase: path.resolve('./'), stats: 'errors-only', historyApiFallback: true },
devtool: 'cheap-module-eval-source-map',
mode: 'development',
}
const webpack = require('webpack')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const Base = require('./webpack.config.base')
const options = {
babelrc: false,
cacheDirectory: true,
presets: [['@babel/preset-env', { modules: false, loose: true, useBuiltIns: 'usage' }], '@babel/preset-stage-0', '@babel/preset-react'],
plugins: [
['@babel/transform-runtime', { helpers: true, polyfill: false, regenerator: true, moduleName: '@babel/runtime' }],
],
}
module.exports = {
...Base,
module: {
rules: [
...Base.module.rules,
{ sideEffects: false, test: /\.jsx?$/, exclude: /node_modules/, use: { loader: 'babel-loader', options } },
],
},
entry: ['./.dev/polyfills.js', 'index.js'],
plugins: [
...Base.plugins,
new BundleAnalyzerPlugin({ openAnalyzer: false, analyzerMode: 'static', defaultSizes: 'gzip' }),
new webpack.LoaderOptionsPlugin({ minimize: true, debug: false }),
],
devtool: undefined,
optimization: { runtimeChunk: true, splitChunks: { chunks: 'all' } },
mode: 'production',
}
const webpack = require('webpack')
const express = require('express')
const middleware = require('webpack-dev-middleware')
const argv = require('yargs').argv
const path = `./webpack.config.${argv.production ? 'production' : 'development'}`
const config = require(path)
const compiler = webpack(config)
const app = express()
app.use(middleware(compiler, { noInfo: true, publicPath: config.output.publicPath }))
app.use(require('webpack-hot-middleware')(compiler))
app.listen(8080, () => console.log('App listening on port 8080!'))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment