feat: webpack-html-plugin

This commit is contained in:
NGPixel
2018-03-17 02:35:52 -04:00
parent 1adf98eb8d
commit 3dc9b92596
7 changed files with 245 additions and 30 deletions

31
dev/templates/master.pug Normal file
View File

@@ -0,0 +1,31 @@
doctype html
html
head
meta(http-equiv='X-UA-Compatible', content='IE=edge')
meta(charset='UTF-8')
meta(name='viewport', content='user-scalable=yes, width=device-width, initial-scale=1, maximum-scale=5')
meta(name='theme-color', content='#333333')
meta(name='msapplication-TileColor', content='#333333')
meta(name='msapplication-TileImage', content='/favicons/ms-icon-144x144.png')
title= config.site.title
//- Favicon
each favsize in [57, 60, 72, 76, 114, 120, 144, 152, 180]
link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href='/favicons/apple-icon-' + favsize + 'x' + favsize + '.png')
link(rel='icon', type='image/png', sizes='192x192', href='/favicons/android-icon-192x192.png')
each favsize in [32, 96, 16]
link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href='/favicons/favicon-' + favsize + 'x' + favsize + '.png')
link(rel='manifest', href='/manifest.json')
//- Site Lang
script.
var siteConfig = !{JSON.stringify(config.site)}
//- CSS
link(type='text/css', rel='stylesheet', href='https://fonts.googleapis.com/icon?family=Roboto:400,500,700|Source+Code+Pro:400,700|Material+Icons')
link(type='text/css', rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css')
block head
body
block body

View File

@@ -4,6 +4,9 @@ const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPugPlugin = require('html-webpack-pug-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
const babelConfig = fs.readJsonSync(path.join(process.cwd(), '.babelrc'))
const postCSSConfig = {
@@ -24,7 +27,7 @@ module.exports = {
path: path.join(process.cwd(), 'assets'),
publicPath: '/',
filename: 'js/[name].js',
chunkFilename: 'js/[name].chunk.js',
chunkFilename: 'js/[name].js',
globalObject: 'this'
},
module: {
@@ -195,17 +198,37 @@ module.exports = {
}),
new MiniCssExtractPlugin({
filename: 'css/bundle.css',
chunkFilename: 'css/[name].chunk.css'
chunkFilename: 'css/[name].css'
}),
new HtmlWebpackPlugin({
template: 'dev/templates/master.pug',
filename: '../server/views/master.pug',
hash: true,
inject: 'head'
}),
new HtmlWebpackPugPlugin(),
new ScriptExtHtmlWebpackPlugin({
sync: 'runtime.js',
defaultAttribute: 'async'
})
],
optimization: {
namedModules: true,
namedChunks: true,
splitChunks: {
name: 'vendor',
minChunks: 2
cacheGroups: {
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
},
vendor: {
test: /[\\/]node_modules[\\/]/,
priority: -10
}
}
},
noEmitOnErrors: true,
concatenateModules: true
runtimeChunk: 'single'
},
resolve: {
mainFields: ['browser', 'main', 'module'],

View File

@@ -19,7 +19,6 @@ module.exports = merge(common, {
format: 'compact'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
'__REACT_DEVTOOLS_GLOBAL_HOOK__': '({ isDisabled: true })'
}),
new WriteFilePlugin(),

View File

@@ -1,4 +1,3 @@
const webpack = require('webpack')
const merge = require('webpack-merge')
const CleanWebpackPlugin = require('clean-webpack-plugin')
@@ -26,9 +25,6 @@ module.exports = merge(common, {
root: process.cwd(),
verbose: false
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new OptimizeCssAssetsPlugin({
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true