升级webpack到最新版本,修改相关配置

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,21 +22,22 @@
     "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",
     "html-webpack-plugin": "^3.0.6",
     "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",

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'],