Permalink
Browse files

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>
  • Loading branch information...
davidmehren committed Oct 10, 2018
1 parent 9a2dcd4 commit 9f92bba036860c61277d252a39a5417f67231bc1
Showing with 59 additions and 111 deletions.
  1. +1 −0 package.json
  2. +1 −0 webpack.common.js
  3. +13 −40 webpack.dev.js
  4. +25 −0 webpack.htmlexport.js
  5. +19 −71 webpack.prod.js
View
@@ -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": {
View
@@ -10,6 +10,7 @@ var gracefulFs = require('graceful-fs')
gracefulFs.gracefulify(fs)
module.exports = {
name: 'app',
plugins: [
new webpack.ProvidePlugin({
Visibility: 'visibilityjs',
View
@@ -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'
})]
View
@@ -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'
})
]
}
View
@@ -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({})
]
}]
}
}]
}
})]

0 comments on commit 9f92bba

Please sign in to comment.