From 6bf76333201c5fea27dd29a6ed54a7c2a45ce11b Mon Sep 17 00:00:00 2001 From: Knut Behrends Date: Sun, 19 Aug 2018 13:33:16 +0200 Subject: [PATCH] attempt to include manually changes from PR https://github.com/coryhouse/javascript-development-environment/pull/7 --- .babelrc | 18 +++++++++++--- package.json | 10 ++++---- webpack.config.dev.js | 20 ++++++++++++---- webpack.config.prod.js | 54 ++++++++++++++++++++++++++++++++---------- 4 files changed, 75 insertions(+), 27 deletions(-) diff --git a/.babelrc b/.babelrc index a5580c23..f19ce353 100644 --- a/.babelrc +++ b/.babelrc @@ -1,5 +1,17 @@ { - "presets": [ - "latest" - ] + "presets": ["env"], + "env": { + "production": { + "presets": [ + [ + "env", + { + "es2015": { + "modules": false + } + } + ] + ] + } + } } diff --git a/package.json b/package.json index 94904d9f..ba4d6da0 100644 --- a/package.json +++ b/package.json @@ -1,15 +1,14 @@ { "name": "javascript-development-environment", - "version": "1.0.0", + "version": "1.1.0", "description": "JavaScript development environment", "scripts": { "prestart": "babel-node buildScripts/startMessage.js", - "start": "npm-run-all --parallel security-check open:src lint:watch test:watch", - "start-mocked": "npm-run-all --parallel security-check open:src lint:watch test:watch start-mockapi", + "start": "npm-run-all open:src lint:watch test:watch", + "start-mocked": "npm-run-all open:src lint:watch test:watch start-mockapi", "open:src": "babel-node buildScripts/srcServer.js", "lint": "esw webpack.config.* src buildScripts --color", "lint:watch": "npm run lint -- --watch", - "security-check": "nsp check", "localtunnel": "lt --port 3000", "share": "npm-run-all --parallel open:src localtunnel", "test": "mocha --reporter progress buildScripts/testSetup.js \"src/**/*.test.js\"", @@ -49,7 +48,7 @@ "eslint-watch": "^3.1.5", "express": "^4.16.3", "extract-text-webpack-plugin": "^3.0.2", - "html-webpack-plugin": "2.22.0", + "html-webpack-plugin": "3.2.0", "jsdom": "^11.11.0", "json-schema-faker": "^0.5.0-rc15", "json-server": "^0.14.0", @@ -57,7 +56,6 @@ "mocha": "^5.2.0", "nock": "^9.6.1", "npm-run-all": "^4.1.3", - "nsp": "^3.2.1", "numeral": "^2.0.6", "open": "0.0.5", "rimraf": "^2.6.2", diff --git a/webpack.config.dev.js b/webpack.config.dev.js index da3009f2..4574e583 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -1,10 +1,14 @@ +import webpack from 'webpack'; import path from 'path'; import HtmlWebpackPlugin from 'html-webpack-plugin'; export default { - debug: true, + mode: 'development', + resolve: { + extensions: ['*', '.js', '.jsx', '.json'] + }, devtool: 'inline-source-map', - noInfo: false, + entry: [path.resolve(__dirname, 'src/index')], target: 'web', output: { @@ -13,6 +17,12 @@ export default { filename: 'bundle.js' }, plugins: [ + new webpack.LoaderOptionsPlugin({ + minimize: false, + debug: true, + noInfo: true // set to false to see a list of every file being bundled. + }), + // Create HTML file that includes reference to bundled JS. new HtmlWebpackPlugin({ template: 'src/index.html', @@ -20,9 +30,9 @@ export default { }) ], module: { - loaders: [ - { test: /\.js$/, exclude: /node_modules/, loaders: ['babel'] }, - { test: /\.css$/, loaders: ['style', 'css'] } + rules: [ + { test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader'] }, + { test: /\.css$/, loaders: ['style-loader', 'css-loader'] } ] } }; diff --git a/webpack.config.prod.js b/webpack.config.prod.js index 3fd0a291..723c8d11 100644 --- a/webpack.config.prod.js +++ b/webpack.config.prod.js @@ -3,11 +3,15 @@ import path from 'path'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import WebpackMd5Hash from 'webpack-md5-hash'; import ExtractTextPlugin from 'extract-text-webpack-plugin'; +//debug: true, +//noInfo: false, export default { - debug: true, + mode: 'production', + resolve: { + extensions: ['*', '.js', '.jsx', '.json'] + }, devtool: 'source-map', - noInfo: false, entry: { vendor: path.resolve(__dirname, 'src/vendor'), main: path.resolve(__dirname, 'src/index') @@ -18,19 +22,39 @@ export default { publicPath: '/', filename: '[name].[chunkhash].js' }, + // Webpack 4 removed the commonsChunkPlugin. Use optimization.splitChunks instead. + optimization: { + splitChunks: { + cacheGroups: { + commons: { + test: /[\\/]node_modules[\\/]/, + name: 'vendor', + chunks: 'all' + } + } + } + }, plugins: [ + // Global loader configuration + new webpack.LoaderOptionsPlugin({ + minimize: true, + debug: false, + noInfo: true // set to false to see a list of every file being bundled. + }), + // (separate css and js) // Generate an external css file with a hash in the filename - new ExtractTextPlugin('[name].[contenthash].css'), - + //new ExtractTextPlugin('[name].[contenthash].css'), + new ExtractTextPlugin('[name].[md5:contenthash:hex:20].css'), // Hash the files using MD5 so that their names change when the content changes. new WebpackMd5Hash(), // Use CommonsChunkPlugin to create a separate bundle // of vendor libraries so that they're cached separately. - new webpack.optimize.CommonsChunkPlugin({ - name: 'vendor' - }), + // No longer used for Webpack 4. See optimization.splitChunks above instead. + // new webpack.optimize.CommonsChunkPlugin({ + // name: 'vendor' + // }), // Create HTML file that includes reference to bundled JS. new HtmlWebpackPlugin({ @@ -51,18 +75,22 @@ export default { // Properties you define here are available in index.html // using htmlWebpackPlugin.options.varName trackJSToken: 'INSERT YOUR TOKEN HERE' - }), + }) // Eliminate duplicate packages when generating bundle - new webpack.optimize.DedupePlugin(), + //new webpack.optimize.DedupePlugin() + // Code is automatically minified in prod mode as of Webpack 4, so removing this. // Minify JS - new webpack.optimize.UglifyJsPlugin() + //new webpack.optimize.UglifyJsPlugin() ], module: { - loaders: [ - { test: /\.js$/, exclude: /node_modules/, loaders: ['babel'] }, - { test: /\.css$/, loader: ExtractTextPlugin.extract('css?sourceMap') } // extra param is a hint to webpack + rules: [ + { test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader'] }, + { + test: /\.css$/, + loader: ExtractTextPlugin.extract('css-loader?sourceMap') + } // extra param is a hint to webpack ] } };