From ea77f309362dc7d639dc4935afe904008dc00f11 Mon Sep 17 00:00:00 2001
From: gaofei <gaofei@yixia.com>
Date: Thu, 21 Nov 2019 15:15:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=87=E7=BA=A7webpack=E5=88=B0=E6=9C=80?=
 =?UTF-8?q?=E6=96=B0=E7=89=88=E6=9C=AC,=E4=BF=AE=E6=94=B9=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json      |  9 +++++----
 webpack.config.js | 25 ++++++++++++++++---------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index f4564cb..b92bbb1 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "multipage-frame",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "在一个项目中可以同时使用`vue`、`react`、`zepto`等其他前端框架,也可以直接用`ES6`开发",
   "main": "index.js",
   "scripts": {
@@ -22,7 +22,6 @@
     "css-loader": "^0.28.10",
     "exports-loader": "^0.7.0",
     "expose-loader": "^0.7.5",
-    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.11",
     "html-loader": "^0.5.5",
     "html-webpack-inline-source-plugin": "0.0.10",
@@ -30,13 +29,15 @@
     "html-withimg-loader": "^0.1.16",
     "image-webpack-loader": "^4.3.1",
     "imagemin-webpack-plugin": "^2.2.0",
+    "mini-css-extract-plugin": "^0.8.0",
     "open-browser-webpack-plugin": "0.0.5",
     "script-loader": "^0.7.2",
     "style-loader": "^0.20.3",
     "uglifyjs-webpack-plugin": "^1.2.3",
     "url-loader": "^1.0.1",
-    "webpack": "^3.5.5",
-    "webpack-dev-server": "^1.14.1"
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.9.0"
   },
   "dependencies": {
     "fastclick": "^1.0.6",
diff --git a/webpack.config.js b/webpack.config.js
index 283db44..c819043 100755
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,7 +3,7 @@ var webpack = require('webpack');
 var htmlWebpackPlugin = require('html-webpack-plugin');
 var cleanWebpackPlugin = require('clean-webpack-plugin');
 var uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
+const miniCssExtractPlugin = require('mini-css-extract-plugin');
 var OpenBrowserPlugin = require('open-browser-webpack-plugin');
 //var ImageminPlugin = require('imagemin-webpack-plugin').default;
 let fs = require('fs')
@@ -77,7 +77,7 @@ module.exports = {
 		rules:[
 			{//css loader
 				test:/\.css$/,
-				use:ExtractTextPlugin.extract({
+				/*use:ExtractTextPlugin.extract({
 					fallback:'style-loader',
 					//use:['css-loader']
 					use:[
@@ -88,7 +88,16 @@ module.exports = {
                             }
                         }
                     ]
-				})
+				})*/
+				use: [
+                    miniCssExtractPlugin.loader,
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            minimize: true //css压缩
+                        }
+                    }
+                ]
 			},
 			{//js loader
 				test:/\.js$/,
@@ -191,16 +200,14 @@ module.exports = {
             }
 		}),*/
 		...getTplConfig(),
-		//new cleanWebpackPlugin(['dist']),
 		new uglifyjsWebpackPlugin(),
 		//new cleanWebpackPlugin(['dist']),
-		new ExtractTextPlugin({ //提取css
-			filename:'css/[name].css',
+		new miniCssExtractPlugin({ //提取css
+            filename:'css/[name].css',
 			disable:false,
-
 			allChunks:true
-		}),
-		/*new webpack.optimize.CommonsChunkPlugin({ //打包公共js
+        }),
+		/*new webpack.optimize.SplitChunksPlugin({ //打包公共js
 			//name:['flexible','zepto'],
 			name:'common',
 			chunks:['./src/lib'],