commit 4f756ef17b51f267e19e03128c745794fb371979
parent 946678fa17a3196133c98449f09f92d6e7a07df8
Author: Sergej Orlov <wladimirych@gmail.com>
Date: Wed, 4 Dec 2019 01:04:54 +0100
config: replace dev + prod config files with single one
Diffstat:
6 files changed, 132 insertions(+), 173 deletions(-)
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
"version": "1.0.0",
"scripts": {
"build": "node scripts/build.js",
- "start": "webpack-dev-server --open --config webpack/webpack.config.dev.js --hot",
+ "start": "webpack-dev-server --open --config webpack/webpack.config.js --hot",
"lint": "eslint '**/*.js' && stylelint '**/*.css'"
},
"repository": {
diff --git a/scripts/build.js b/scripts/build.js
@@ -87,7 +87,7 @@ async function main() {
console.log('Version:', version);
const prevSizes = await getSizes(true);
try {
- execSync("webpack --config webpack/webpack.config.prod.js --colors", {stdio: "inherit"});
+ execSync("webpack --config webpack/webpack.config.js --colors", {stdio: "inherit"});
}
catch (e) {
process.exit(1);
diff --git a/webpack/webpack.common.js b/webpack/webpack.common.js
@@ -1,72 +0,0 @@
-const Webpack = require('webpack');
-const {CleanWebpackPlugin} = require('clean-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const StyleLintPlugin = require('stylelint-webpack-plugin');
-
-const paths = require('./paths');
-
-module.exports = {
- entry: {
- app: paths.appIndexJs
- },
- output: {
- path: paths.appBuild,
- filename: 'js/[name].[chunkhash:8].js',
- },
- optimization: {
- splitChunks: {
- chunks: 'all',
- name: true
- }
- },
- plugins: [
- new CleanWebpackPlugin(),
- new CopyWebpackPlugin([
- { from: paths.appPublic, to: 'public' }
- ]),
- new HtmlWebpackPlugin({
- template: paths.appIndexHtml
- }),
- new Webpack.DefinePlugin({
- 'NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
- 'RELEASE_VER': JSON.stringify(process.env.RELEASE_VER || 'local devel')
- }),
- new StyleLintPlugin({
- config: {"extends": "stylelint-config-recommended"},
- files: [
- 'src/**/*.css',
- 'vendored/**/*.css',
- ],
- emitWarning: true
- })
- ],
- resolve: {
- alias: {
- '~': paths.appSrc
- }
- },
- module: {
- rules: [
- {
- test: /\.mjs$/,
- include: /node_modules/,
- type: 'javascript/auto'
- },
- {
- test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
- use: {
- loader: 'url-loader',
- options: {
- limit: 10000,
- name: '[path][name].[ext]'
- }
- }
- },
- {
- test: /\.(html)(\?.*)?$/,
- loader: 'raw-loader'
- },
- ]
- }
-};
diff --git a/webpack/webpack.config.dev.js b/webpack/webpack.config.dev.js
@@ -1,43 +0,0 @@
-const Webpack = require('webpack');
-const merge = require('webpack-merge');
-
-const paths = require('./paths');
-const common = require('./webpack.common.js');
-
-module.exports = merge(common, {
- mode: 'development',
- devtool: 'cheap-eval-source-map',
- devServer: {},
- output: {
- path: paths.appBuild,
- filename: 'js/[name].js',
- },
-
- plugins: [
- new Webpack.DefinePlugin({
- 'process.env.NODE_ENV': JSON.stringify('development')
- })
- ],
- module: {
- rules: [
- {
- test: /\.js$/,
- include: paths.appSrc,
- enforce: 'pre',
- loader: 'eslint-loader',
- options: {
- emitWarning: true,
- }
- },
- {
- test: /\.js$/,
- include: paths.appSrc,
- loader: 'babel-loader'
- },
- {
- test: /\.s?css$/i,
- use: ['style-loader', 'css-loader?sourceMap=true']
- }
- ]
- }
-});
diff --git a/webpack/webpack.config.js b/webpack/webpack.config.js
@@ -0,0 +1,130 @@
+const Webpack = require('webpack');
+const {CleanWebpackPlugin} = require('clean-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const StyleLintPlugin = require('stylelint-webpack-plugin');
+// const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const paths = require('./paths');
+
+const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development';
+const isProduction = mode === 'production';
+
+const productionOutput = {
+ path: paths.appBuild,
+ filename: 'js/[name].[contenthash:8].js'
+};
+
+const plugins = [
+ new CleanWebpackPlugin(),
+ new CopyWebpackPlugin([
+ { from: paths.appPublic, to: 'public' }
+ ]),
+ new HtmlWebpackPlugin({
+ template: paths.appIndexHtml
+ }),
+ // new MiniCssExtractPlugin({
+ // filename: 'css/[name].[contenthash:8].css'
+ // }),
+ new Webpack.DefinePlugin({
+ 'NODE_ENV': JSON.stringify(mode),
+ 'RELEASE_VER': JSON.stringify(process.env.RELEASE_VER || 'local devel')
+ }),
+ new StyleLintPlugin({
+ config: {"extends": "stylelint-config-recommended"},
+ files: [
+ 'src/**/*.css',
+ 'vendored/**/*.css',
+ ],
+ emitWarning: !isProduction,
+ emitError: isProduction
+ })
+];
+
+const loaders = [
+ {
+ test: /\.mjs$/,
+ include: /node_modules/,
+ type: 'javascript/auto'
+ },
+ {
+ test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
+ use: {
+ loader: 'url-loader',
+ options: {
+ limit: 10000,
+ name: '[path][name].[ext]'
+ }
+ }
+ },
+ {
+ test: /\.(html)(\?.*)?$/,
+ loader: 'raw-loader'
+ },
+
+ {
+ test: /\.js$/,
+ include: paths.appSrc,
+ enforce: 'pre',
+ loader: 'eslint-loader',
+ options: {
+ emitWarning: !isProduction
+ }
+ },
+
+ {
+ test: /\.js$/,
+ exclude: /node_modules/,
+ use: 'babel-loader'
+ },
+
+ {
+ test: /\.s?css/i,
+ use : [
+ // MiniCssExtractPlugin.loader,
+ 'style-loader',
+ {loader: 'css-loader', options: {importLoaders: 1}},
+ {
+ loader: 'postcss-loader',
+ options: {
+ ident: 'postcss',
+ plugins: () => [
+ require('postcss-import')(),
+ require('postcss-preset-env')(),
+ require('cssnano')()
+ ]
+ }
+ },
+ ]
+ }
+];
+
+module.exports = {
+ mode: mode,
+ devtool: isProduction ? 'source-map' : 'cheap-eval-source-map',
+ stats: 'errors-warnings',
+ bail: isProduction,
+
+ entry: {
+ app: paths.appIndexJs
+ },
+
+ optimization: {
+ splitChunks: {
+ chunks: 'all',
+ name: true
+ }
+ },
+
+ resolve: {
+ alias: {
+ '~': paths.appSrc
+ }
+ },
+
+ output: isProduction ? productionOutput : {},
+ plugins: plugins,
+ module: {
+ rules: loaders
+ }
+};
diff --git a/webpack/webpack.config.prod.js b/webpack/webpack.config.prod.js
@@ -1,56 +0,0 @@
-const Webpack = require('webpack');
-const merge = require('webpack-merge');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-const common = require('./webpack.common.js');
-const paths = require('./paths');
-
-module.exports = merge(common, {
- mode: 'production',
- devtool: 'source-map',
- stats: 'errors-warnings',
- bail: true,
- plugins: [
- new Webpack.DefinePlugin({
- 'process.env.NODE_ENV': JSON.stringify('production')
- }),
- new Webpack.optimize.ModuleConcatenationPlugin(),
- new MiniCssExtractPlugin({
- filename: 'css/[name].[chunkhash:8].css'
- })
- ],
- module: {
- rules: [
- {
- test: /\.js$/,
- include: paths.appSrc,
- enforce: 'pre',
- loader: 'eslint-loader',
- },
-
- {
- test: /\.js$/,
- exclude: /node_modules/,
- use: 'babel-loader'
- },
- {
- test: /\.s?css/i,
- use : [
- MiniCssExtractPlugin.loader,
- {loader: 'css-loader', options: {importLoaders: 1}},
- {
- loader: 'postcss-loader',
- options: {
- ident: 'postcss',
- plugins: () => [
- require('postcss-import')(),
- require('postcss-preset-env')(),
- require('cssnano')()
- ]
- }
- },
- ]
- }
- ]
- }
-});
