Permalink
Browse files

Upgrade to Webpack 4

  • Loading branch information...
flexdinesh committed Mar 4, 2018
1 parent 317974f commit 69dc839ad84c37b170e4c3d6f1f8ecb735fc2791
Showing with 60 additions and 69 deletions.
  1. +33 −20 config/webpack.base.babel.js
  2. +16 −33 config/webpack.dev.babel.js
  3. +5 −11 config/webpack.prod.babel.js
  4. +5 −4 package.json
  5. +1 −1 server/middlewares/addDevMiddlewares.js
@@ -12,6 +12,7 @@ const webpack = require('webpack');
process.noDeprecation = true;

module.exports = (options) => ({
mode: options.mode,
entry: options.entry,
output: Object.assign({ // Compile into js/build.js
path: path.resolve(process.cwd(), 'build'),
@@ -28,9 +29,7 @@ module.exports = (options) => ({
},
},
{
// Preprocess our own .css files
// This is the place to add your own loaders (e.g. sass/less etc.)
// for a list of loaders, see https://webpack.js.org/loaders/#styling
// Preprocess our own .scss files
test: /\.scss$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader', 'sass-loader'],
@@ -52,31 +51,39 @@ module.exports = (options) => ({
{
loader: 'image-webpack-loader',
options: {
progressive: true,
optimizationLevel: 7,
interlaced: false,
pngquant: {
quality: '65-90',
speed: 4,
},
query: {
gifsicle: {
interlaced: true
},
mozjpeg: {
progressive: true
},
optipng: {
optimizationLevel: 7
},
pngquant: {
quality: '65-90',
speed: 4
}
}
},
},
],
},
{
test: /\.html$/,
use: 'html-loader',
use: 'html-loader'
},
{
test: /\.json$/,
use: 'json-loader',
use: 'json-loader'
},
{
test: /\.(mp4|webm)$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
limit: 10000
},
},
},
@@ -85,34 +92,40 @@ module.exports = (options) => ({
plugins: options.plugins.concat([
new webpack.ProvidePlugin({
// make fetch available
fetch: 'exports-loader?self.fetch!whatwg-fetch',
fetch: 'exports-loader?self.fetch!whatwg-fetch'
}),

// Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
// inside your code for any environment checks; UglifyJS will automatically
// drop any unreachable code.
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
},
}),
new webpack.NamedModulesPlugin(),
})
]),
resolve: {
modules: ['app', 'node_modules'],
extensions: [
'.js',
'.jsx',
'.scss',
'.react.js',
'.react.js'
],
mainFields: [
'browser',
'jsnext:main',
'main',
],
'main'
]
},
devtool: options.devtool,
target: 'web', // Make web variables accessible to webpack, e.g. window
performance: options.performance || {},
optimization: {
namedModules: true,
splitChunks: {
name: 'vendor',
minChunks: 2
}
}
});
@@ -7,56 +7,39 @@ const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');

const plugins = [
new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading
new webpack.NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({
inject: true, // Inject all files that are generated by webpack, e.g. bundle.js
template: 'app/index.html',
}),
new CircularDependencyPlugin({
exclude: /a\.js|node_modules/, // exclude node_modules
failOnError: false, // show a warning when there is a circular dependency
}),
];

module.exports = require('./webpack.base.babel')({
mode: 'development',
// Add hot reloading in development
entry: [
'eventsource-polyfill', // Necessary for hot reloading with IE
'webpack-hot-middleware/client?reload=true',
path.join(process.cwd(), 'app/app.js'), // Start with js/app.js
path.join(process.cwd(), 'app/app.js') // Start with js/app.js
],

// Don't use hashes in dev mode for better performance
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js',
chunkFilename: '[name].chunk.js'
},

// Add development plugins
plugins: dependencyHandlers().concat(plugins), // eslint-disable-line no-use-before-define
plugins: [
new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading
new HtmlWebpackPlugin({
inject: true, // Inject all files that are generated by webpack, e.g. bundle.js
template: 'app/index.html'
}),
new CircularDependencyPlugin({
exclude: /a\.js|node_modules/, // exclude node_modules
failOnError: false // show a warning when there is a circular dependency
})
],

// Emit a source map for easier debugging
// See https://webpack.js.org/configuration/devtool/#devtool
devtool: 'eval-source-map',

performance: {
hints: false,
},
hints: false
}
});

/**
* Select which plugins to use to optimize the bundle's handling of
* third party dependencies.
*/
function dependencyHandlers() {
return [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
children: true,
minChunks: 2,
async: true,
}),
];
}
@@ -1,28 +1,22 @@
// Important modules this config uses
const path = require('path');
const webpack = require('webpack');
// const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = require('./webpack.base.babel')({
mode: 'production',
// In production, we skip all hot-reloading stuff
entry: [
path.join(process.cwd(), 'app/app.js'),
path.join(process.cwd(), 'app/app.js')
],

// Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets
output: {
filename: '[name].[chunkhash].js',
chunkFilename: '[name].[chunkhash].chunk.js',
chunkFilename: '[name].[chunkhash].chunk.js'
},

plugins: [
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
children: true,
minChunks: 2,
async: true,
}),

// Minify and optimize the index.html
new HtmlWebpackPlugin({
@@ -39,7 +33,7 @@ module.exports = require('./webpack.base.babel')({
minifyCSS: true,
minifyURLs: true,
},
inject: true,
inject: true
}),
],

@@ -91,7 +91,7 @@
"file-loader": "1.1.11",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.0.4",
"image-webpack-loader": "2.0.0",
"image-webpack-loader": "4.1.0",
"imports-loader": "0.8.0",
"jest-cli": "22.4.2",
"lint-staged": "7.0.0",
@@ -105,8 +105,9 @@
"shelljs": "^0.8.1",
"style-loader": "0.20.2",
"url-loader": "1.0.1",
"webpack": "3.11.0",
"webpack-dev-middleware": "1.11.0",
"webpack-hot-middleware": "2.21.1"
"webpack": "4.0.1",
"webpack-cli": "^2.0.10",
"webpack-dev-middleware": "3.0.0",
"webpack-hot-middleware": "2.21.2"
}
}
@@ -8,7 +8,7 @@ function createWebpackMiddleware(compiler, publicPath) {
noInfo: true,
publicPath,
silent: true,
stats: 'errors-only',
stats: 'errors-only'
});
}

0 comments on commit 69dc839

Please sign in to comment.