Skip to content

Commit

Permalink
Merge pull request #10 from satendra02/webpack4
Browse files Browse the repository at this point in the history 
Upgraded webpack 3.x to 4.x
  • Loading branch information
@satendra02
satendra02 authored Sep 18, 2019
2 parents 7470b20 + 3de7dbf commit e5526e9
Show file tree
Hide file tree
Showing 5 changed files with 4,747 additions and 2,321 deletions.
4 changes: 3 additions & 1 deletion config/webpack.config.dev.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const env = getClientEnvironment(publicUrl);
// It is focused on developer experience and fast rebuilds.
// The production configuration is different and lives in a separate file.
module.exports = {
mode: 'development',
// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
// See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
devtool: 'cheap-module-source-map',
Expand Down Expand Up @@ -215,12 +216,13 @@ module.exports = {
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In development, this will be an empty string.
new InterpolateHtmlPlugin(env.raw),
// new InterpolateHtmlPlugin(env.raw),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// Add module names to factory functions so they appear in browser profiler.
new webpack.NamedModulesPlugin(),
// Makes some environment variables available to the JS code, for example:
Expand Down
138 changes: 72 additions & 66 deletions config/webpack.config.prod.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
Expand Down Expand Up @@ -50,6 +50,7 @@ const extractTextPluginOptions = shouldUseRelativeAssetPaths
// It compiles slowly and is focused on producing a fast and minimal bundle.
// The development configuration is different and lives in a separate file.
module.exports = {
mode: 'production',
// Don't attempt to continue if there are any errors.
bail: true,
// We generate sourcemaps in production. This is slow but gives good results.
Expand All @@ -60,6 +61,9 @@ module.exports = {
app: [require.resolve('./polyfills'), paths.appIndexJs],
content: [require.resolve('./polyfills'), './src/content.js']
},
optimization: {
minimize: false //Update this to true or false
},
output: {
// The build folder.
path: paths.appBuild,
Expand Down Expand Up @@ -170,49 +174,50 @@ module.exports = {
// in the main CSS file.
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
},
},
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
extractTextPluginOptions
)
),
use: [{loader: MiniCssExtractPlugin.loader},'css-loader']
// loader: ExtractTextPlugin.extract(
// Object.assign(
// {
// fallback: {
// loader: require.resolve('style-loader'),
// options: {
// hmr: false,
// },
// },
// use: [
// {
// loader: require.resolve('css-loader'),
// options: {
// importLoaders: 1,
// minimize: true,
// sourceMap: shouldUseSourceMap,
// },
// },
// {
// loader: require.resolve('postcss-loader'),
// options: {
// // Necessary for external CSS imports to work
// // https://github.com/facebookincubator/create-react-app/issues/2677
// ident: 'postcss',
// plugins: () => [
// require('postcss-flexbugs-fixes'),
// autoprefixer({
// browsers: [
// '>1%',
// 'last 4 versions',
// 'Firefox ESR',
// 'not ie < 9', // React doesn't support IE8 anyway
// ],
// flexbox: 'no-2009',
// }),
// ],
// },
// },
// ],
// },
// extractTextPluginOptions
// )
// ),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
// "file" loader makes sure assets end up in the `build` folder.
Expand Down Expand Up @@ -242,7 +247,7 @@ module.exports = {
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In production, it will be an empty string unless you specify "homepage"
// in `package.json`, in which case it will be the pathname of that URL.
new InterpolateHtmlPlugin(env.raw),
// new InterpolateHtmlPlugin(env.raw),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
Expand All @@ -260,34 +265,35 @@ module.exports = {
minifyURLs: true,
},
}),
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV was set to production here.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
// Minify the code.
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebookincubator/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
},
mangle: {
safari10: true,
},
output: {
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebookincubator/create-react-app/issues/2488
ascii_only: true,
},
sourceMap: shouldUseSourceMap,
}),
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false,
// // Disabled because of an issue with Uglify breaking seemingly valid code:
// // https://github.com/facebookincubator/create-react-app/issues/2376
// // Pending further investigation:
// // https://github.com/mishoo/UglifyJS2/issues/2011
// comparisons: false,
// },
// mangle: {
// safari10: true,
// },
// output: {
// comments: false,
// // Turned on because emoji and regex is not minified properly using default
// // https://github.com/facebookincubator/create-react-app/issues/2488
// ascii_only: true,
// },
// sourceMap: shouldUseSourceMap,
// }),
// Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
new ExtractTextPlugin({
new MiniCssExtractPlugin({
filename: cssFilename,
}),
// Generate a manifest file which contains a mapping of all asset filenames
Expand Down
50 changes: 31 additions & 19 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,45 +4,43 @@
"private": true,
"dependencies": {
"autoprefixer": "7.1.6",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-core": "6.26.3",
"babel-eslint": "10.x",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-preset-react-app": "^3.1.1",
"babel-preset-react-app": "^9.0.1",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.7",
"dotenv": "4.0.0",
"dotenv-expand": "4.2.0",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"eslint": "6.x",
"eslint-config-react-app": "^5.0.1",
"eslint-loader": "2.2.1",
"eslint-plugin-flowtype": "3.x",
"eslint-plugin-import": "2.x",
"eslint-plugin-jsx-a11y": "6.x",
"eslint-plugin-react": "7.x",
"file-loader": "4.2.0",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"html-webpack-plugin": "^4.0.0-beta.8",
"jest": "20.0.4",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"promise": "8.0.1",
"prop-types": "^15.7.2",
"raf": "3.4.0",
"react": "^16.4.1",
"react-dev-utils": "^5.0.1",
"react-dev-utils": "^9.0.0-next.68",
"react-dom": "^16.4.1",
"react-frame-component": "^4.0.0",
"resolve": "1.6.0",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"sw-precache-webpack-plugin": "^0.11.5",
"url-loader": "0.6.2",
"webpack": "3.8.1",
"webpack-dev-server": ">=3.1.11",
"webpack-manifest-plugin": "1.3.2",
"webpack-manifest-plugin": "2.0.4",
"whatwg-fetch": "2.0.3"
},
"scripts": {
Expand Down Expand Up @@ -86,10 +84,24 @@
},
"babel": {
"presets": [
"react-app"
"react-app",
"@babel/preset-env",
"@babel/preset-react"
]
},
"eslintConfig": {
"extends": "react-app"
},
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"@typescript-eslint/eslint-plugin": "^2.3.0",
"@typescript-eslint/parser": "^2.3.0",
"babel-loader": "^8.0.4",
"eslint-plugin-react-hooks": "^2.0.1",
"mini-css-extract-plugin": "^0.8.0",
"webpack": "4.16.5",
"webpack-cli": "3.1.0"
}
}
2 changes: 1 addition & 1 deletion scripts/start.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ choosePort(HOST, DEFAULT_PORT)
const appName = require(paths.appPackageJson).name;
const urls = prepareUrls(protocol, HOST, port);
// Create a webpack compiler that is configured with custom messages.
const compiler = createCompiler(webpack, config, appName, urls, useYarn);
const compiler = createCompiler({webpack, config, appName, urls, useYarn});
// Load proxy config
const proxySetting = require(paths.appPackageJson).proxy;
const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
Expand Down
Loading

0 comments on commit e5526e9

Please sign in to comment.