Upgrading webpack to 4.0

Needed to replace favicon generator
This commit is contained in:
Jeff Avallone 2018-03-07 19:09:08 -05:00
parent e28fd69c73
commit cbe538c007
5 changed files with 1528 additions and 647 deletions

View File

@ -139,10 +139,9 @@
"eslint": "^4.17.0", "eslint": "^4.17.0",
"eslint-plugin-jest": "^21.8.0", "eslint-plugin-jest": "^21.8.0",
"eslint-plugin-react": "^7.6.1", "eslint-plugin-react": "^7.6.1",
"extract-text-webpack-plugin": "^3.0.2", "extract-text-webpack-plugin": "^4.0.0-beta.0",
"favicons-webpack-plugin-cesco": "^0.0.6",
"feather-icons": "^4.5.0", "feather-icons": "^4.5.0",
"html-webpack-plugin": "^2.30.1", "html-webpack-plugin": "^3.0.0",
"i18next": "^10.3.0", "i18next": "^10.3.0",
"i18next-browser-languagedetector": "^2.1.0", "i18next-browser-languagedetector": "^2.1.0",
"identity-obj-proxy": "^3.0.0", "identity-obj-proxy": "^3.0.0",
@ -161,7 +160,9 @@
"svg-react-loader": "^0.4.5", "svg-react-loader": "^0.4.5",
"uglifyjs-webpack-plugin": "^1.1.8", "uglifyjs-webpack-plugin": "^1.1.8",
"url-search-params": "^0.10.0", "url-search-params": "^0.10.0",
"webpack": "^3.10.0", "webapp-webpack-plugin": "^1.1.1",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.9",
"webpack-merge": "^4.1.1", "webpack-merge": "^4.1.1",
"webpack-node-externals": "^1.6.0", "webpack-node-externals": "^1.6.0",
"workbox-webpack-plugin": "^2.1.2" "workbox-webpack-plugin": "^2.1.2"
@ -170,6 +171,6 @@
"http-server": "^0.11.1", "http-server": "^0.11.1",
"husky": "^0.14.3", "husky": "^0.14.3",
"js-yaml": "^3.10.0", "js-yaml": "^3.10.0",
"webpack-dev-server": "^2.11.1" "webpack-dev-server": "3.1.0"
} }
} }

View File

@ -3,7 +3,7 @@ const fs = require('fs');
const webpack = require('webpack'); const webpack = require('webpack');
const CopyPlugin = require('copy-webpack-plugin'); const CopyPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin');
const FaviconsPlugin = require('favicons-webpack-plugin-cesco'); const WebappPlugin = require('webapp-webpack-plugin');
const HtmlPlugin = require('html-webpack-plugin'); const HtmlPlugin = require('html-webpack-plugin');
const pkg = require('./package.json'); const pkg = require('./package.json');
@ -47,6 +47,12 @@ module.exports = {
resolve: { resolve: {
modules: ['src', 'node_modules'] modules: ['src', 'node_modules']
}, },
optimization: {
splitChunks: {
name: 'common',
minChunks: 2
}
},
plugins: [ plugins: [
new webpack.EnvironmentPlugin({ new webpack.EnvironmentPlugin({
NODE_ENV: 'development', NODE_ENV: 'development',
@ -56,19 +62,21 @@ module.exports = {
BANNER: process.env.NODE_ENV === 'production' ? null : (process.env.NODE_ENV || 'development'), BANNER: process.env.NODE_ENV === 'production' ? null : (process.env.NODE_ENV || 'development'),
BUILD_ID: buildId BUILD_ID: buildId
}), }),
new webpack.optimize.CommonsChunkPlugin({ new ExtractTextPlugin({
name: 'common', filename: 'css/[name].[contenthash:8].css',
minChunks: 2 allChunks: true
}), }),
new FaviconsPlugin({ new CopyPlugin(['./public']),
...pagePlugins,
new WebappPlugin({ // MUST be after pagePlugins
logo: './src/favicon.svg', logo: './src/favicon.svg',
persistentCache: true, prefix: 'icons-[hash:8]/',
inject: true, inject: true,
config: { favicons: {
appName: 'Regexper', appName: 'Regexper',
appDescription: pkg.description, appDescription: pkg.description,
developerName: pkg.author.name, developerName: pkg.author.name,
developerUrl: 'https://github.com/javallone/', developerURL: 'https://github.com/javallone/',
background: '#6b6659', background: '#6b6659',
theme_color: '#bada55', theme_color: '#bada55',
start_url: '/', start_url: '/',
@ -82,13 +90,7 @@ module.exports = {
yandex: false yandex: false
} }
} }
}), })
new ExtractTextPlugin({
filename: 'css/[name].[contenthash:8].css',
allChunks: true
}),
new CopyPlugin(['./public']),
...pagePlugins
], ],
module: { module: {
rules: [ rules: [

View File

@ -2,6 +2,7 @@ const merge = require('webpack-merge');
const common = require('./webpack.common.js'); const common = require('./webpack.common.js');
module.exports = merge(common, { module.exports = merge(common, {
mode: 'development',
devtool: 'cheap-module-source-map', devtool: 'cheap-module-source-map',
devServer: { devServer: {
contentBase: './build' contentBase: './build'

View File

@ -9,6 +9,7 @@ const nodeExternals = require('webpack-node-externals');
module.exports = [ module.exports = [
// Web // Web
merge(common, { merge(common, {
mode: 'production',
devtool: 'source-map', devtool: 'source-map',
plugins: [ plugins: [
new UglifyJSPlugin({ new UglifyJSPlugin({
@ -36,6 +37,7 @@ module.exports = [
}), }),
// Node (prerender) // Node (prerender)
{ {
mode: 'production',
target: 'node', target: 'node',
externals: [nodeExternals({ externals: [nodeExternals({
whitelist: [ /\.svg$/ ] whitelist: [ /\.svg$/ ]

2129
yarn.lock

File diff suppressed because it is too large Load Diff