summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDavid Mehren2018-10-10 21:54:27 +0200
committerDavid Mehren2018-10-10 22:09:46 +0200
commit9f92bba036860c61277d252a39a5417f67231bc1 (patch)
tree2e66c92dd963efac07b9a93b7b7f09852fc8d481
parent9a2dcd40d37c01896deeae0c8059564b4bdd6dc1 (diff)
Use webpack-merge.
Move html export config to own file. Delete unnecessary config options. Use cheap source maps. Signed-off-by: David Mehren <dmehren1@gmail.com>
-rw-r--r--package.json1
-rw-r--r--webpack.common.js1
-rw-r--r--webpack.dev.js53
-rw-r--r--webpack.htmlexport.js25
-rw-r--r--webpack.prod.js90
5 files changed, 59 insertions, 111 deletions
diff --git a/package.json b/package.json
index 44e22449..3aa28fad 100644
--- a/package.json
+++ b/package.json
@@ -188,6 +188,7 @@
"url-loader": "^1.0.1",
"webpack": "^4.14.0",
"webpack-cli": "^3.1.0",
+ "webpack-merge": "^4.1.4",
"webpack-parallel-uglify-plugin": "^1.1.0"
},
"standard": {
diff --git a/webpack.common.js b/webpack.common.js
index 8df19b71..377992b3 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -10,6 +10,7 @@ var gracefulFs = require('graceful-fs')
gracefulFs.gracefulify(fs)
module.exports = {
+ name: 'app',
plugins: [
new webpack.ProvidePlugin({
Visibility: 'visibilityjs',
diff --git a/webpack.dev.js b/webpack.dev.js
index d0d1a423..b1ed3612 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -1,41 +1,14 @@
-var baseConfig = require('./webpack.common')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-var path = require('path')
+const common = require('./webpack.common.js')
+const htmlexport = require('./webpack.htmlexport')
+const merge = require('webpack-merge')
-module.exports = [Object.assign({}, baseConfig, {
- plugins: baseConfig.plugins.concat([
- new MiniCssExtractPlugin({
- filename: '[name].css',
- chunkFilename: '[id].css'
- })
-
- ]),
- devtool: 'source-map'
-}), {
- devtool: 'source-map',
- entry: {
- htmlExport: path.join(__dirname, 'public/js/htmlExport.js')
- },
- module: {
- rules: [{
- test: /\.css$/,
- use: ['style-loader', 'css-loader']
- }, {
- test: /\.scss$/,
- use: ['style-loader', 'sass-loader']
- }, {
- test: /\.less$/,
- use: ['style-loader', 'less-loader']
- }]
- },
- output: {
- path: path.join(__dirname, 'public/build'),
- publicPath: '/build/',
- filename: '[name].js'
- },
- plugins: [
- new MiniCssExtractPlugin({
- filename: 'html.min.css'
- })
- ]
-}]
+module.exports = [
+ // merge common config
+ merge(common, {
+ mode: 'development',
+ devtool: 'cheap-module-eval-source-map'
+ }),
+ merge(htmlexport, {
+ mode: 'development',
+ devtool: 'cheap-module-eval-source-map'
+ })]
diff --git a/webpack.htmlexport.js b/webpack.htmlexport.js
new file mode 100644
index 00000000..dd6f4c01
--- /dev/null
+++ b/webpack.htmlexport.js
@@ -0,0 +1,25 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const path = require('path')
+
+module.exports = {
+ name: 'save-as-html',
+ entry: {
+ htmlExport: path.join(__dirname, 'public/js/htmlExport.js')
+ },
+ module: {
+ rules: [{
+ test: /\.css$/,
+ use: [MiniCssExtractPlugin.loader, 'css-loader']
+ }]
+ },
+ output: {
+ path: path.join(__dirname, 'public/build'),
+ publicPath: '/build/',
+ filename: '[name].js'
+ },
+ plugins: [
+ new MiniCssExtractPlugin({
+ filename: 'html.min.css'
+ })
+ ]
+}
diff --git a/webpack.prod.js b/webpack.prod.js
index f3c7dad3..188d9881 100644
--- a/webpack.prod.js
+++ b/webpack.prod.js
@@ -1,75 +1,23 @@
-var baseConfig = require('./webpack.common')
-var webpack = require('webpack')
-var path = require('path')
+const common = require('./webpack.common.js')
+const htmlexport = require('./webpack.htmlexport')
+const merge = require('webpack-merge')
+const path = require('path')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-module.exports = [Object.assign({}, baseConfig, {
- plugins: baseConfig.plugins.concat([
- new webpack.DefinePlugin({
- 'process.env': {
- 'NODE_ENV': JSON.stringify('production')
- }
- })
- ]),
-
- optimization: {
- minimizer: [
- new UglifyJsPlugin({
- parallel: true,
- cache: true
- })
- ],
- splitChunks: {
- chunks: 'async',
- minChunks: Infinity
+module.exports = [
+ merge(common, {
+ mode: 'production',
+ output: {
+ path: path.join(__dirname, 'public/build'),
+ publicPath: '/build/',
+ filename: '[name].[contenthash].js'
}
- },
-
- output: {
- path: path.join(__dirname, 'public/build'),
- publicPath: '/build/',
- filename: '[id].[name].[hash].js'
- // baseUrl: '<%- url %>'
- }
-}), {
- // This Chunk is used in the 'save as html' feature.
- // It is embedded in the html file and contains CSS for styling.
-
- entry: {
- htmlExport: path.join(__dirname, 'public/js/htmlExport.js')
- },
-
- output: {
- path: path.join(__dirname, 'public/build'),
- publicPath: '/build/',
- filename: '[name].js'
- },
- plugins: [
- new webpack.DefinePlugin({
- 'process.env': {
- 'NODE_ENV': JSON.stringify('production')
- }
- }),
- new MiniCssExtractPlugin({
- filename: 'html.min.css'
- })
- ],
-
- optimization: {
- minimizer: [
- new OptimizeCSSAssetsPlugin({})
- ]
- },
-
- module: {
- rules: [{
- test: /\.css$/,
- use: [
- MiniCssExtractPlugin.loader,
- 'css-loader'
+ }),
+ merge(htmlexport, {
+ mode: 'production',
+ optimization: {
+ minimizer: [
+ new OptimizeCSSAssetsPlugin({})
]
- }]
- }
-}]
+ }
+ })]