better webpack optimization

This commit is contained in:
muerwre 2019-03-08 10:48:03 +07:00
parent 14ed2d2893
commit acfd5138df
3 changed files with 1172 additions and 95 deletions

1220
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -15,9 +15,9 @@
"license": "ISC",
"keywords": [],
"devDependencies": {
"awesome-typescript-loader": "^5.2.1",
"@babel/cli": "^7.0.0-rc.1",
"@babel/preset-env": "^7.0.0-rc.1",
"awesome-typescript-loader": "^5.2.1",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.4",
@ -42,13 +42,14 @@
"html-webpack-plugin": "^3.2.0",
"identity-obj-proxy": "^3.0.0",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.5.0",
"style-loader": "^0.21.0",
"ts-node": "^8.0.1",
"typescript": "^3.2.4",
"uglifyjs-webpack-plugin": "^1.3.0",
"webpack": "^4.6.0",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14",
"ts-node": "^8.0.1",
"typescript": "^3.2.4"
"webpack-dev-server": "^3.1.14"
},
"dependencies": {
"@types/classnames": "^2.2.7",
@ -81,6 +82,7 @@
"mongoose": "^5.3.14",
"morgan": "~1.9.0",
"mysql": "^2.16.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"pt-sans-cyrillic": "0.0.4",
"pug": "2.0.0-beta11",
"raleway-cyrillic": "^4.0.2",

View file

@ -2,15 +2,16 @@
const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');
// const FlowWebpackPlugin = require('flow-webpack-plugin');
const { version } = require('./package.json');
const WebpackGitHash = require('webpack-git-hash');
// const { version } = require('./package.json');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
// const WebpackGitHash = require('webpack-git-hash');
const { join } = require('path');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
/* Plugins */
const concatPlugin = new webpack.optimize.ModuleConcatenationPlugin();
// const concatPlugin = new webpack.optimize.ModuleConcatenationPlugin();
const htmlPlugin = new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html',
@ -19,12 +20,17 @@ const htmlPlugin = new HtmlWebPackPlugin({
favicon: 'src/sprites/favicon.png',
});
const miniCssExractPlugin = new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
});
const isDevelopment = process.env.NODE_ENV !== 'production';
const devtool = isDevelopment ? 'cheap-module-eval-source-map' : 'source-map';
// const flowPlugin = new FlowWebpackPlugin();
const gitPlugin = new WebpackGitHash();
// const gitPlugin = new WebpackGitHash();
/* Resolve */
@ -52,8 +58,10 @@ module.exports = () => {
// concatPlugin,
htmlPlugin,
// flowPlugin,
gitPlugin,
new webpack.IgnorePlugin(/^osrm-text-instructions$/, /leaflet-routing-machine$/)
// gitPlugin,
new webpack.IgnorePlugin(/^osrm-text-instructions$/, /leaflet-routing-machine$/),
miniCssExractPlugin,
new webpack.HashedModuleIdsPlugin(),
];
return {
@ -69,7 +77,8 @@ module.exports = () => {
{
test: /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader },
// { loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
@ -109,7 +118,7 @@ module.exports = () => {
},
output: {
publicPath: '/',
filename: '[name].bundle.[githash].js',
filename: isDevelopment ? '[name].[hash].js' : '[name].[contenthash].js',
},
optimization: {
splitChunks: {
@ -137,6 +146,14 @@ module.exports = () => {
}
}
},
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
],
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
},
devServer: {