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>
This commit is contained in:
David Mehren 2018-10-10 21:54:27 +02:00
parent 9a2dcd40d3
commit 9f92bba036
No known key found for this signature in database
GPG Key ID: 6017AF117F9756CB
5 changed files with 59 additions and 111 deletions

View File

@ -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 File

@ -10,6 +10,7 @@ var gracefulFs = require('graceful-fs')
gracefulFs.gracefulify(fs)
module.exports = {
name: 'app',
plugins: [
new webpack.ProvidePlugin({
Visibility: 'visibilityjs',

View File

@ -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'
})]

25
webpack.htmlexport.js Normal file
View File

@ -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 File

@ -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({})
]
}]
}
}]
}
})]