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", "url-loader": "^1.0.1",
"webpack": "^4.14.0", "webpack": "^4.14.0",
"webpack-cli": "^3.1.0", "webpack-cli": "^3.1.0",
"webpack-merge": "^4.1.4",
"webpack-parallel-uglify-plugin": "^1.1.0" "webpack-parallel-uglify-plugin": "^1.1.0"
}, },
"standard": { "standard": {

View file

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

View file

@ -1,41 +1,14 @@
var baseConfig = require('./webpack.common') const common = require('./webpack.common.js')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') const htmlexport = require('./webpack.htmlexport')
var path = require('path') const merge = require('webpack-merge')
module.exports = [Object.assign({}, baseConfig, { module.exports = [
plugins: baseConfig.plugins.concat([ // merge common config
new MiniCssExtractPlugin({ merge(common, {
filename: '[name].css', mode: 'development',
chunkFilename: '[id].css' devtool: 'cheap-module-eval-source-map'
}) }),
merge(htmlexport, {
]), mode: 'development',
devtool: 'source-map' devtool: 'cheap-module-eval-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'
})
]
}]

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') const common = require('./webpack.common.js')
var webpack = require('webpack') const htmlexport = require('./webpack.htmlexport')
var path = require('path') const merge = require('webpack-merge')
const path = require('path')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin') 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, { module.exports = [
plugins: baseConfig.plugins.concat([ merge(common, {
new webpack.DefinePlugin({ mode: 'production',
'process.env': { output: {
'NODE_ENV': JSON.stringify('production') path: path.join(__dirname, 'public/build'),
} publicPath: '/build/',
}) filename: '[name].[contenthash].js'
]),
optimization: {
minimizer: [
new UglifyJsPlugin({
parallel: true,
cache: true
})
],
splitChunks: {
chunks: 'async',
minChunks: Infinity
} }
}, }),
merge(htmlexport, {
output: { mode: 'production',
path: path.join(__dirname, 'public/build'), optimization: {
publicPath: '/build/', minimizer: [
filename: '[id].[name].[hash].js' new OptimizeCSSAssetsPlugin({})
// 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'
] ]
}] }
} })]
}]