From 2201a174feb4ffd4ab7fdc5a0b3d48756f36f43e Mon Sep 17 00:00:00 2001 From: Shuanglei Tao Date: Sun, 6 May 2018 18:06:33 +0800 Subject: [PATCH] webpack: optimize css for production --- html/package.json | 7 ++++--- html/webpack.config.js | 1 + html/webpack.dev.js | 1 - html/webpack.prod.js | 11 +++++++++++ html/yarn.lock | 18 ++++++++++++++++-- src/index.html | 4 ++-- 6 files changed, 34 insertions(+), 8 deletions(-) diff --git a/html/package.json b/html/package.json index d469636..a6831d2 100644 --- a/html/package.json +++ b/html/package.json @@ -10,9 +10,8 @@ "author": "Shuanglei Tao ", "license": "MIT", "scripts": { - "build": "webpack --config webpack.prod.js && gulp", - "clean": "gulp clean", - "start": "webpack-serve webpack.dev.js" + "build": "NODE_ENV=production webpack --config webpack.prod.js && gulp", + "start": "gulp clean && webpack-serve webpack.dev.js" }, "dependencies": { "bulma": "^0.6.1", @@ -36,8 +35,10 @@ "koa-connect": "^2.0.1", "mini-css-extract-plugin": "^0.4.0", "node-sass": "^4.7.2", + "optimize-css-assets-webpack-plugin": "^4.0.1", "sass-loader": "^6.0.6", "style-loader": "^0.19.1", + "uglifyjs-webpack-plugin": "^1.2.5", "webpack": "^4.6.0", "webpack-cli": "^2.1.2", "webpack-merge": "^4.1.2", diff --git a/html/webpack.config.js b/html/webpack.config.js index 4ed9f53..d324eed 100644 --- a/html/webpack.config.js +++ b/html/webpack.config.js @@ -42,4 +42,5 @@ module.exports = { performance : { hints : false }, + devtool: devMode ? 'cheap-module-eval-source-map' : 'source-map', } diff --git a/html/webpack.dev.js b/html/webpack.dev.js index 59f79f1..53530bc 100644 --- a/html/webpack.dev.js +++ b/html/webpack.dev.js @@ -6,7 +6,6 @@ const config = require('./webpack.config.js'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = merge(config, { - devtool: 'source-map', mode: 'development', plugins: [ new HtmlWebpackPlugin({ diff --git a/html/webpack.prod.js b/html/webpack.prod.js index 42d36c4..24c4660 100644 --- a/html/webpack.prod.js +++ b/html/webpack.prod.js @@ -3,9 +3,20 @@ const config = require('./webpack.config.js'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin'); +const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); +const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); module.exports = merge(config, { mode: 'production', + optimization: { + minimizer: [ + new UglifyJsPlugin({ + cache: true, + parallel: true, + }), + new OptimizeCSSAssetsPlugin({}), + ] + }, plugins: [ new HtmlWebpackPlugin({ inlineSource: '.(js|css)$', diff --git a/html/yarn.lock b/html/yarn.lock index 2d0df3c..ea66996 100644 --- a/html/yarn.lock +++ b/html/yarn.lock @@ -1906,7 +1906,7 @@ cssesc@^0.1.0: version "0.1.0" resolved "http://registry.npm.taobao.org/cssesc/download/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4" -cssnano@^3.10.0: +cssnano@^3.10.0, cssnano@^3.4.0: version "3.10.0" resolved "http://registry.npm.taobao.org/cssnano/download/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38" dependencies: @@ -4212,6 +4212,13 @@ koa@^2.4.1: type-is "^1.5.5" vary "^1.0.0" +last-call-webpack-plugin@^3.0.0: + version "3.0.0" + resolved "http://registry.npm.taobao.org/last-call-webpack-plugin/download/last-call-webpack-plugin-3.0.0.tgz#9742df0e10e3cf46e5c0381c2de90d3a7a2d7555" + dependencies: + lodash "^4.17.5" + webpack-sources "^1.1.0" + latest-version@^3.0.0: version "3.1.0" resolved "http://registry.npm.taobao.org/latest-version/download/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15" @@ -5298,6 +5305,13 @@ opn@^5.1.0: dependencies: is-wsl "^1.1.0" +optimize-css-assets-webpack-plugin@^4.0.1: + version "4.0.1" + resolved "http://registry.npm.taobao.org/optimize-css-assets-webpack-plugin/download/optimize-css-assets-webpack-plugin-4.0.1.tgz#48f016766752c7648b92cc1e795b999732bd87a2" + dependencies: + cssnano "^3.4.0" + last-call-webpack-plugin "^3.0.0" + ora@^0.2.3: version "0.2.3" resolved "http://registry.npm.taobao.org/ora/download/ora-0.2.3.tgz#37527d220adcd53c39b73571d754156d5db657a4" @@ -7217,7 +7231,7 @@ uglify-js@3.3.x: commander "~2.13.0" source-map "~0.6.1" -uglifyjs-webpack-plugin@^1.2.4: +uglifyjs-webpack-plugin@^1.2.4, uglifyjs-webpack-plugin@^1.2.5: version "1.2.5" resolved "http://registry.npm.taobao.org/uglifyjs-webpack-plugin/download/uglifyjs-webpack-plugin-1.2.5.tgz#2ef8387c8f1a903ec5e44fa36f9f3cbdcea67641" dependencies: diff --git a/src/index.html b/src/index.html index e026a96..f6e8825 100644 --- a/src/index.html +++ b/src/index.html @@ -5,7 +5,7 @@ ttyd - Terminal - +
- + -- 2.43.4