Bladeren bron

修改webpack样式编译(3353,3354)

zhangxc 5 jaren geleden
bovenliggende
commit
359803c328
2 gewijzigde bestanden met toevoegingen van 25 en 15 verwijderingen
  1. 1 0
      package.json
  2. 24 15
      webpack.config.js

+ 1 - 0
package.json

@@ -18,6 +18,7 @@
     "css-loader": "^2.1.1",
     "echarts": "^4.6.0",
     "express": "^4.16.4",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
     "less": "^3.9.0",

+ 24 - 15
webpack.config.js

@@ -3,6 +3,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin') // 清空打包目录的插件
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const webpack = require('webpack');
 const proxyHost = "http://192.168.2.236:5050";
 module.exports = {
@@ -57,7 +58,8 @@ module.exports = {
         'window.jQuery': 'jquery'
     }),
     new webpack.HotModuleReplacementPlugin(),
-    new CleanWebpackPlugin()
+    new CleanWebpackPlugin(),
+    new ExtractTextPlugin("stylesheets/[name].css"),
   ],
   optimization: { //webpack4.x的最新优化配置项,用于提取公共代码
     minimizer: [
@@ -112,25 +114,32 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: [{
-            loader: MiniCssExtractPlugin.loader
-          },
+        use:ExtractTextPlugin.extract({
+          use: [
+          // {
+          //   loader: MiniCssExtractPlugin.loader
+          // },
           'css-loader'
         ]
+        })
       },
       {
         test: /\.less$/,
-        use: [
-          {
-            loader: 'style-loader', // creates style nodes from JS strings
-          },
-          {
-            loader: 'css-loader', // translates CSS into CommonJS
-          },
-          {
-            loader: 'less-loader', // compiles Less to CSS
-          },
-        ],
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+              // {
+              //   loader: 'style-loader', // creates style nodes from JS strings
+              // },
+              {
+                loader: 'css-loader', // translates CSS into CommonJS
+              },
+              {
+                loader: 'less-loader', // compiles Less to CSS
+              },
+            ],
+          })
+        
       },
       { 
         test: /\.(png|jpg|jpeg|gif|svg)$/,