From e08db864da488bdb0c7967d0a2da5ab21ab08224 Mon Sep 17 00:00:00 2001 From: Daniel Date: Sat, 5 Jan 2019 01:21:56 -0500 Subject: [PATCH] [update] webpack 4 babel 7 dependency hell --- .babelrc | 4 --- package.json | 34 ++++++++++-------- webpack.4.config.babel.js | 74 --------------------------------------- webpack.config.babel.js | 74 +++++++++++++++++++++++++++------------ 4 files changed, 71 insertions(+), 115 deletions(-) delete mode 100644 .babelrc delete mode 100644 webpack.4.config.babel.js diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 8dbcf11..0000000 --- a/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["env", "react", "stage-1"], - "plugins": ["transform-decorators-legacy"] -} diff --git a/package.json b/package.json index 66d6296..efe2eda 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "name": "chaoticbackup", - "version": "1.4.0", + "version": "2.0.0", "description": "Chaotic Backup", "scripts": { "start": "webpack-dev-server -d --inline --host 0.0.0.0 --history-api-fallback", - "build": "webpack -d" + "build": "webpack -p" }, "repository": { "type": "git", @@ -30,26 +30,30 @@ "whatwg-fetch": "^2.0.3" }, "devDependencies": { - "babel-core": "^6.21.0", - "babel-eslint": "^10.0.0", - "babel-loader": "^7.1.5", - "babel-plugin-transform-decorators-legacy": "^1.3.4", - "babel-polyfill": "^6.26.0", - "babel-preset-env": "^1.6.1", - "babel-preset-react": "^6.16.0", - "babel-preset-stage-1": "^6.16.0", - "css-loader": "^1.0.0", + "@babel/cli": "^7.2.3", + "@babel/core": "^7.2.2", + "@babel/node": "^7.2.2", + "@babel/plugin-proposal-class-properties": "^7.2.3", + "@babel/plugin-proposal-decorators": "^7.2.3", + "@babel/plugin-transform-runtime": "^7.2.0", + "@babel/polyfill": "^7.2.5", + "@babel/preset-env": "^7.2.3", + "@babel/preset-flow": "^7.0.0", + "@babel/preset-react": "^7.0.0", + "@babel/register": "^7.0.0", + "babel-loader": "^8.0.5", + "css-loader": "^2.1.0", "eslint": "^5.7.1", "eslint-config-airbnb": "^17.1.0", "eslint-plugin-import": "^2.2.0", "eslint-plugin-jsx-a11y": "^6.1.2", "eslint-plugin-react": "^7.0.0", - "extract-text-webpack-plugin": "^3.0.2", - "mini-css-extract-plugin": "^0.4.4", + "mini-css-extract-plugin": "^0.5.0", "node-sass": "^4.10.0", "sass-loader": "^7.0.x", "style-loader": "^0.23.1", - "webpack": "^3.12.0", - "webpack-dev-server": "^2.11.3" + "webpack": "^4.28.3", + "webpack-cli": "^3.2.0", + "webpack-dev-server": "^3.1.14" } } diff --git a/webpack.4.config.babel.js b/webpack.4.config.babel.js deleted file mode 100644 index 3e5d9dd..0000000 --- a/webpack.4.config.babel.js +++ /dev/null @@ -1,74 +0,0 @@ -import webpack from 'webpack'; -import path from 'path'; - -const MiniCssExtractPlugin = require("mini-css-extract-plugin"); -const devMode = process.env.NODE_ENV !== 'production' - -export default { - entry: ['babel-polyfill', `${__dirname}/src/components/index.js`], - - output: { - path: `${__dirname}/build`, - publicPath: '/build/', - filename: 'bundle.js', - }, - - optimization: { - splitChunks: { - cacheGroups: { - styles: { - name: 'styles', - test: /\.css$/, - chunks: 'all', - enforce: true - } - } - } - }, - - module: { - rules: [ - { - test: /\.jsx?$/, exclude: /node_modules/, - use: 'babel-loader' - }, - { - test: /\.s?[ac]ss$/, - use: [ - devMode ? 'style-loader' : MiniCssExtractPlugin.loader, - 'css-loader', - 'sass-loader', - ], - } - ] - }, - - resolve: { - extensions: ['.js', '.jsx'], - }, - - node: { - fs: 'empty', - }, - - // First array is dev only, second is production - plugins: process.argv.indexOf('-p') === -1 ? [ - new MiniCssExtractPlugin({ - filename: devMode ? '[name].css' : '[name].[hash].css', - }) - ] : [ - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify('production'), - }), - new webpack.optimize.UglifyJsPlugin({ - output: { - comments: false, - }, - warnings: true, - }), - new ExtractTextPlugin({ - filename: 'style.css', - allChunks: true - }) - ], -}; diff --git a/webpack.config.babel.js b/webpack.config.babel.js index a9493c5..e23e826 100644 --- a/webpack.config.babel.js +++ b/webpack.config.babel.js @@ -1,31 +1,58 @@ -import webpack from 'webpack'; -import path from 'path'; +const path = require('path'); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const webpack = require('webpack'); +require("@babel/register"); -let ExtractTextPlugin = require('extract-text-webpack-plugin'); +const devMode = (process.env.NODE_ENV !== 'production' && process.argv.indexOf('-p') === -1); + +const config = { + entry: ["@babel/polyfill", `${__dirname}/src/components/index.js`], -export default { - entry: ['babel-polyfill', `${__dirname}/src/components/index.js`], output: { path: `${__dirname}/build`, publicPath: '/build/', filename: 'bundle.js', }, + optimization: { + splitChunks: { + cacheGroups: { + styles: { + name: 'styles', + test: /\.css$/, + chunks: 'all', + enforce: true + } + } + } + }, + module: { rules: [ { - test: /\.jsx?$/, exclude: /node_modules/, - use: 'babel-loader' + test: /\.(js|jsx)$/, + exclude: /node_modules/, + loader: 'babel-loader', + options: { + "presets": [ + "@babel/preset-env", + "@babel/preset-react", + "@babel/preset-flow", + ], + "plugins": [ + "@babel/plugin-transform-runtime", + ["@babel/plugin-proposal-decorators", {"legacy": true }], + ["@babel/plugin-proposal-class-properties", { "loose": true }] + ] + } }, { - test: /\.scss$/, - use: ExtractTextPlugin.extract({ - fallback: 'style-loader', - use: [ - {loader: 'css-loader', options: { sourceMap: true }}, - {loader: 'sass-loader', options: { sourceMap: true }}, - ] - }) + test: /\.s?[ac]ss$/, + use: [ + devMode ? 'style-loader' : MiniCssExtractPlugin.loader, + 'css-loader', + 'sass-loader', + ], } ] }, @@ -39,10 +66,10 @@ export default { }, // First array is dev only, second is production - plugins: process.argv.indexOf('-p') === -1 ? [ - new ExtractTextPlugin({ - filename: 'style.css', - allChunks: true + plugins: devMode ? [ + new MiniCssExtractPlugin({ + filename: '[name].css', + chunkFilename: '[id].css', }) ] : [ new webpack.DefinePlugin({ @@ -54,9 +81,12 @@ export default { }, warnings: true, }), - new ExtractTextPlugin({ - filename: 'style.css', - allChunks: true + new MiniCssExtractPlugin({ + filename: '[name].[hash].css', + chunkFilename: '[id].[hash].css', }) ], }; + +// Exports +module.exports = config;