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