From de0b46de45f2f2937176be3bb93205e8402ff268 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=9D=B0?= <810158465@qq.com> Date: Mon, 20 Aug 2018 17:00:45 +0800 Subject: [PATCH] =?UTF-8?q?ExtractTextPlugin=E6=94=B9=E4=B8=BAMiniCssExtra?= =?UTF-8?q?ctPlugin=20=EF=BC=88webpack4=E4=B8=8BExtractTextPlugin=E6=9C=89?= =?UTF-8?q?=E9=97=AE=E9=A2=98https://github.com/webpack-contrib/extract-te?= =?UTF-8?q?xt-webpack-plugin/issues/701=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 164 ++++++++++++++++++++++------------------- package.json | 2 +- webpack.base.config.js | 33 +++++++-- 3 files changed, 115 insertions(+), 84 deletions(-) diff --git a/package-lock.json b/package-lock.json index ea39e0d..a0d88fa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -197,6 +197,60 @@ "long": "3.2.0" } }, + "@webpack-contrib/schema-utils": { + "version": "1.0.0-beta.0", + "resolved": "http://registry.npm.taobao.org/@webpack-contrib/schema-utils/download/@webpack-contrib/schema-utils-1.0.0-beta.0.tgz", + "integrity": "sha1-v5Y4yUZNF3tIIJ6EIJ4jvuLrT2U=", + "requires": { + "ajv": "6.5.2", + "ajv-keywords": "3.2.0", + "chalk": "2.4.1", + "strip-ansi": "4.0.0", + "text-table": "0.2.0", + "webpack-log": "1.2.0" + }, + "dependencies": { + "ansi-regex": { + "version": "3.0.0", + "resolved": "http://registry.npm.taobao.org/ansi-regex/download/ansi-regex-3.0.0.tgz", + "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=" + }, + "ansi-styles": { + "version": "3.2.1", + "resolved": "http://registry.npm.taobao.org/ansi-styles/download/ansi-styles-3.2.1.tgz", + "integrity": "sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=", + "requires": { + "color-convert": "1.9.2" + } + }, + "chalk": { + "version": "2.4.1", + "resolved": "http://registry.npm.taobao.org/chalk/download/chalk-2.4.1.tgz", + "integrity": "sha1-GMSasWoDe26wFSzIPjRxM4IVtm4=", + "requires": { + "ansi-styles": "3.2.1", + "escape-string-regexp": "1.0.5", + "supports-color": "5.5.0" + } + }, + "strip-ansi": { + "version": "4.0.0", + "resolved": "http://registry.npm.taobao.org/strip-ansi/download/strip-ansi-4.0.0.tgz", + "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", + "requires": { + "ansi-regex": "3.0.0" + } + }, + "supports-color": { + "version": "5.5.0", + "resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-5.5.0.tgz", + "integrity": "sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=", + "requires": { + "has-flag": "3.0.0" + } + } + } + }, "abbrev": { "version": "1.1.1", "resolved": "http://registry.npm.taobao.org/abbrev/download/abbrev-1.1.1.tgz", @@ -232,7 +286,6 @@ "version": "6.5.2", "resolved": "http://registry.npm.taobao.org/ajv/download/ajv-6.5.2.tgz", "integrity": "sha1-Z4SV+bgvfMpr4kjdkvWb/14fQ2A=", - "dev": true, "requires": { "fast-deep-equal": "2.0.1", "fast-json-stable-stringify": "2.0.0", @@ -249,8 +302,7 @@ "ajv-keywords": { "version": "3.2.0", "resolved": "http://registry.npm.taobao.org/ajv-keywords/download/ajv-keywords-3.2.0.tgz", - "integrity": "sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo=", - "dev": true + "integrity": "sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo=" }, "amdefine": { "version": "1.0.1", @@ -438,15 +490,6 @@ "integrity": "sha1-ECyenpAF0+fjgpvwxPok7oYu6bk=", "dev": true }, - "async": { - "version": "2.6.1", - "resolved": "http://registry.npm.taobao.org/async/download/async-2.6.1.tgz", - "integrity": "sha1-skWiPKcZMAROxT+kaqAKPofGphA=", - "dev": true, - "requires": { - "lodash": "4.17.10" - } - }, "async-each": { "version": "1.0.1", "resolved": "http://registry.npm.taobao.org/async-each/download/async-each-1.0.1.tgz", @@ -1357,8 +1400,7 @@ "big.js": { "version": "3.2.0", "resolved": "http://registry.npm.taobao.org/big.js/download/big.js-3.2.0.tgz", - "integrity": "sha1-pfwpi4G54Nyi5FiCR4S2XFK6WI4=", - "dev": true + "integrity": "sha1-pfwpi4G54Nyi5FiCR4S2XFK6WI4=" }, "binary-extensions": { "version": "1.11.0", @@ -1885,7 +1927,6 @@ "version": "1.9.2", "resolved": "http://registry.npm.taobao.org/color-convert/download/color-convert-1.9.2.tgz", "integrity": "sha1-SYgbj7pn3xKpa98/VsCqueeRMUc=", - "dev": true, "requires": { "color-name": "1.1.1" } @@ -1893,8 +1934,7 @@ "color-name": { "version": "1.1.1", "resolved": "http://registry.npm.taobao.org/color-name/download/color-name-1.1.1.tgz", - "integrity": "sha1-SxQVMEz1ACjqgWQ2Q72C6gWANok=", - "dev": true + "integrity": "sha1-SxQVMEz1ACjqgWQ2Q72C6gWANok=" }, "combined-stream": { "version": "1.0.6", @@ -2230,7 +2270,6 @@ "version": "1.0.0", "resolved": "http://registry.npm.taobao.org/d/download/d-1.0.0.tgz", "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=", - "dev": true, "requires": { "es5-ext": "0.10.46" } @@ -2280,7 +2319,6 @@ "version": "1.1.3", "resolved": "http://registry.npm.taobao.org/define-properties/download/define-properties-1.1.3.tgz", "integrity": "sha1-z4jabL7ib+bbcJT2HYcMvYTO6fE=", - "dev": true, "requires": { "object-keys": "1.0.12" } @@ -2544,8 +2582,7 @@ "emojis-list": { "version": "2.1.0", "resolved": "http://registry.npm.taobao.org/emojis-list/download/emojis-list-2.1.0.tgz", - "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=", - "dev": true + "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=" }, "encodeurl": { "version": "1.0.2", @@ -2633,7 +2670,6 @@ "version": "0.10.46", "resolved": "http://registry.npm.taobao.org/es5-ext/download/es5-ext-0.10.46.tgz", "integrity": "sha1-79mfZ8Wn7Hibqj2qf3mHA4j39XI=", - "dev": true, "requires": { "es6-iterator": "2.0.3", "es6-symbol": "3.1.1", @@ -2644,7 +2680,6 @@ "version": "2.0.3", "resolved": "http://registry.npm.taobao.org/es6-iterator/download/es6-iterator-2.0.3.tgz", "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=", - "dev": true, "requires": { "d": "1.0.0", "es5-ext": "0.10.46", @@ -2655,7 +2690,6 @@ "version": "3.1.1", "resolved": "http://registry.npm.taobao.org/es6-symbol/download/es6-symbol-3.1.1.tgz", "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=", - "dev": true, "requires": { "d": "1.0.0", "es5-ext": "0.10.46" @@ -2680,8 +2714,7 @@ "escape-string-regexp": { "version": "1.0.5", "resolved": "http://registry.npm.taobao.org/escape-string-regexp/download/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", - "dev": true + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" }, "eslint-scope": { "version": "4.0.0", @@ -2997,18 +3030,6 @@ } } }, - "extract-text-webpack-plugin": { - "version": "4.0.0-beta.0", - "resolved": "http://registry.npm.taobao.org/extract-text-webpack-plugin/download/extract-text-webpack-plugin-4.0.0-beta.0.tgz", - "integrity": "sha1-9zYdf/QwtClh+NEyG6jBdXtdTEI=", - "dev": true, - "requires": { - "async": "2.6.1", - "loader-utils": "1.1.0", - "schema-utils": "0.4.7", - "webpack-sources": "1.1.0" - } - }, "extsprintf": { "version": "1.3.0", "resolved": "http://registry.npm.taobao.org/extsprintf/download/extsprintf-1.3.0.tgz", @@ -3018,14 +3039,12 @@ "fast-deep-equal": { "version": "2.0.1", "resolved": "http://registry.npm.taobao.org/fast-deep-equal/download/fast-deep-equal-2.0.1.tgz", - "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=", - "dev": true + "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=" }, "fast-json-stable-stringify": { "version": "2.0.0", "resolved": "http://registry.npm.taobao.org/fast-json-stable-stringify/download/fast-json-stable-stringify-2.0.0.tgz", - "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=", - "dev": true + "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=" }, "fastparse": { "version": "1.1.1", @@ -3248,8 +3267,7 @@ "function-bind": { "version": "1.1.1", "resolved": "http://registry.npm.taobao.org/function-bind/download/function-bind-1.1.1.tgz", - "integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0=", - "dev": true + "integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0=" }, "gauge": { "version": "2.7.4", @@ -3485,14 +3503,12 @@ "has-flag": { "version": "3.0.0", "resolved": "http://registry.npm.taobao.org/has-flag/download/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" }, "has-symbols": { "version": "1.0.0", "resolved": "http://registry.npm.taobao.org/has-symbols/download/has-symbols-1.0.0.tgz", - "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=", - "dev": true + "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=" }, "has-unicode": { "version": "2.0.1", @@ -4300,8 +4316,7 @@ "json-schema-traverse": { "version": "0.4.1", "resolved": "http://registry.npm.taobao.org/json-schema-traverse/download/json-schema-traverse-0.4.1.tgz", - "integrity": "sha1-afaofZUTq4u4/mO9sJecRI5oRmA=", - "dev": true + "integrity": "sha1-afaofZUTq4u4/mO9sJecRI5oRmA=" }, "json-stringify-safe": { "version": "5.0.1", @@ -4318,8 +4333,7 @@ "json5": { "version": "0.5.1", "resolved": "http://registry.npm.taobao.org/json5/download/json5-0.5.1.tgz", - "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=", - "dev": true + "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=" }, "jsprim": { "version": "1.4.1", @@ -4385,7 +4399,6 @@ "version": "1.1.0", "resolved": "http://registry.npm.taobao.org/loader-utils/download/loader-utils-1.1.0.tgz", "integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=", - "dev": true, "requires": { "big.js": "3.2.0", "emojis-list": "2.1.0", @@ -4448,7 +4461,6 @@ "version": "2.2.0", "resolved": "http://registry.npm.taobao.org/log-symbols/download/log-symbols-2.2.0.tgz", "integrity": "sha1-V0Dhxdbw39pK2TI7UzIQfva0xAo=", - "dev": true, "requires": { "chalk": "2.4.1" }, @@ -4457,7 +4469,6 @@ "version": "3.2.1", "resolved": "http://registry.npm.taobao.org/ansi-styles/download/ansi-styles-3.2.1.tgz", "integrity": "sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=", - "dev": true, "requires": { "color-convert": "1.9.2" } @@ -4466,7 +4477,6 @@ "version": "2.4.1", "resolved": "http://registry.npm.taobao.org/chalk/download/chalk-2.4.1.tgz", "integrity": "sha1-GMSasWoDe26wFSzIPjRxM4IVtm4=", - "dev": true, "requires": { "ansi-styles": "3.2.1", "escape-string-regexp": "1.0.5", @@ -4477,7 +4487,6 @@ "version": "5.4.0", "resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-5.4.0.tgz", "integrity": "sha1-HGszdALCE3YF7+GfEP7DkPb6q1Q=", - "dev": true, "requires": { "has-flag": "3.0.0" } @@ -4494,7 +4503,6 @@ "version": "1.0.5", "resolved": "http://registry.npm.taobao.org/loglevelnext/download/loglevelnext-1.0.5.tgz", "integrity": "sha1-NvxPWZbWZA9Tn/IDuoGWQWgNdaI=", - "dev": true, "requires": { "es6-symbol": "3.1.1", "object.assign": "4.1.0" @@ -4713,6 +4721,16 @@ "integrity": "sha1-ggyGo5M0ZA6ZUWkovQP8qIBX0CI=", "dev": true }, + "mini-css-extract-plugin": { + "version": "0.4.1", + "resolved": "http://registry.npm.taobao.org/mini-css-extract-plugin/download/mini-css-extract-plugin-0.4.1.tgz", + "integrity": "sha1-0rz3e7JZa45L2SV+Q9P5Fkwuhss=", + "requires": { + "@webpack-contrib/schema-utils": "1.0.0-beta.0", + "loader-utils": "1.1.0", + "webpack-sources": "1.1.0" + } + }, "minimalistic-assert": { "version": "1.0.1", "resolved": "http://registry.npm.taobao.org/minimalistic-assert/download/minimalistic-assert-1.0.1.tgz", @@ -4887,8 +4905,7 @@ "next-tick": { "version": "1.0.0", "resolved": "http://registry.npm.taobao.org/next-tick/download/next-tick-1.0.0.tgz", - "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=", - "dev": true + "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=" }, "nice-try": { "version": "1.0.4", @@ -5137,8 +5154,7 @@ "object-keys": { "version": "1.0.12", "resolved": "http://registry.npm.taobao.org/object-keys/download/object-keys-1.0.12.tgz", - "integrity": "sha1-CcU4VTd1dTEMymL1W7M0q/97PtI=", - "dev": true + "integrity": "sha1-CcU4VTd1dTEMymL1W7M0q/97PtI=" }, "object-visit": { "version": "1.0.1", @@ -5153,7 +5169,6 @@ "version": "4.1.0", "resolved": "http://registry.npm.taobao.org/object.assign/download/object.assign-4.1.0.tgz", "integrity": "sha1-lovxEA15Vrs8oIbwBvhGs7xACNo=", - "dev": true, "requires": { "define-properties": "1.1.3", "function-bind": "1.1.1", @@ -5719,8 +5734,7 @@ "punycode": { "version": "2.1.1", "resolved": "http://registry.npm.taobao.org/punycode/download/punycode-2.1.1.tgz", - "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew=", - "dev": true + "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew=" }, "qs": { "version": "6.5.2", @@ -6700,8 +6714,7 @@ "source-list-map": { "version": "2.0.0", "resolved": "http://registry.npm.taobao.org/source-list-map/download/source-list-map-2.0.0.tgz", - "integrity": "sha1-qqR0A/eyRakvvJfqCPJQ1gh+0IU=", - "dev": true + "integrity": "sha1-qqR0A/eyRakvvJfqCPJQ1gh+0IU=" }, "source-map": { "version": "0.5.7", @@ -7032,6 +7045,11 @@ "inherits": "2.0.3" } }, + "text-table": { + "version": "0.2.0", + "resolved": "http://registry.npm.taobao.org/text-table/download/text-table-0.2.0.tgz", + "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=" + }, "through": { "version": "2.3.8", "resolved": "http://registry.npm.taobao.org/through/download/through-2.3.8.tgz", @@ -7391,7 +7409,6 @@ "version": "4.2.2", "resolved": "http://registry.npm.taobao.org/uri-js/download/uri-js-4.2.2.tgz", "integrity": "sha1-lMVA4f93KVbiKZUHwBCupsiDjrA=", - "dev": true, "requires": { "punycode": "2.1.1" } @@ -7512,8 +7529,7 @@ "uuid": { "version": "3.3.2", "resolved": "http://registry.npm.taobao.org/uuid/download/uuid-3.3.2.tgz", - "integrity": "sha1-G0r0lV6zB3xQHCOHL8ZROBFYcTE=", - "dev": true + "integrity": "sha1-G0r0lV6zB3xQHCOHL8ZROBFYcTE=" }, "v8-compile-cache": { "version": "2.0.2", @@ -7828,7 +7844,6 @@ "version": "1.2.0", "resolved": "http://registry.npm.taobao.org/webpack-log/download/webpack-log-1.2.0.tgz", "integrity": "sha1-pLNM2msitRjbsKsy5WeWLVxypD0=", - "dev": true, "requires": { "chalk": "2.4.1", "log-symbols": "2.2.0", @@ -7840,7 +7855,6 @@ "version": "3.2.1", "resolved": "http://registry.npm.taobao.org/ansi-styles/download/ansi-styles-3.2.1.tgz", "integrity": "sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=", - "dev": true, "requires": { "color-convert": "1.9.2" } @@ -7849,7 +7863,6 @@ "version": "2.4.1", "resolved": "http://registry.npm.taobao.org/chalk/download/chalk-2.4.1.tgz", "integrity": "sha1-GMSasWoDe26wFSzIPjRxM4IVtm4=", - "dev": true, "requires": { "ansi-styles": "3.2.1", "escape-string-regexp": "1.0.5", @@ -7860,7 +7873,6 @@ "version": "5.4.0", "resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-5.4.0.tgz", "integrity": "sha1-HGszdALCE3YF7+GfEP7DkPb6q1Q=", - "dev": true, "requires": { "has-flag": "3.0.0" } @@ -7880,7 +7892,6 @@ "version": "1.1.0", "resolved": "http://registry.npm.taobao.org/webpack-sources/download/webpack-sources-1.1.0.tgz", "integrity": "sha1-oQHrrlnWUHNU1x2AE5UKOot6WlQ=", - "dev": true, "requires": { "source-list-map": "2.0.0", "source-map": "0.6.1" @@ -7889,8 +7900,7 @@ "source-map": { "version": "0.6.1", "resolved": "http://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz", - "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=", - "dev": true + "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=" } } }, diff --git a/package.json b/package.json index 9067c52..c019957 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,6 @@ "clean-webpack-plugin": "^0.1.19", "cross-env": "^5.2.0", "css-loader": "^1.0.0", - "extract-text-webpack-plugin": "^4.0.0-beta.0", "html-loader": "^0.5.5", "html-webpack-plugin": "3.0.7", "node-sass": "^4.9.3", @@ -40,6 +39,7 @@ }, "dependencies": { "axios": "^0.18.0", + "mini-css-extract-plugin": "^0.4.1", "react": "^16.4.2", "react-dom": "^16.4.2" } diff --git a/webpack.base.config.js b/webpack.base.config.js index fd75625..e4fe4f5 100644 --- a/webpack.base.config.js +++ b/webpack.base.config.js @@ -3,6 +3,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin') const ExtractTextPlugin = require('extract-text-webpack-plugin') const CleanWebpackPlugin = require('clean-webpack-plugin') const webpack = require('webpack') +const MiniCssExtractPlugin = require('mini-css-extract-plugin') const config = { entry: { // 设置打包的入口文件是相对当前路径的app.js文件 @@ -16,11 +17,10 @@ const config = { rules:[ { test: /\.(scss|css)$/, - use: ExtractTextPlugin.extract({ - fallback: 'style-loader', - //resolve-url-loader may be chained before sass-loader if necessary - use: ['css-loader', 'sass-loader'] - }) + use: [ + MiniCssExtractPlugin.loader, + 'css-loader', 'sass-loader', // MiniCssExtractPlugin.loader 和 style-loader 由于某种原因不能共存。todo: 啥原因 + ] }, // 处理react 相关的内容 { @@ -43,6 +43,25 @@ const config = { } ], }, + optimization: { + splitChunks: { + cacheGroups: { + commons: { + chunks: 'initial', + minChunks: 2, + minSize: 0, + maxInitialRequests: 5, + }, + vendor: { + test: /node_modules/, + chunks: 'initial', + name: 'vendor', + priority: 10, + enforce: true, + } + } + } + }, plugins: [ new HtmlWebpackPlugin({ // webpack 指定目录(package内设置)生成静态HTML文件 title: "指定标题", @@ -52,7 +71,9 @@ const config = { inject: true, // | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。 chunks: ["main"] // 使用chunks 需要指定entry 入口文件中的哪一个模块 }), - new ExtractTextPlugin('style.css'), + new MiniCssExtractPlugin({ + filename: 'style.css' + }), new CleanWebpackPlugin(['dist']), // 清除dist文件夹下文件 new webpack.HotModuleReplacementPlugin() ],