loaders

package.json

@@ -12,8 +12,10 @@
   "devDependencies": {
     "css-loader": "^2.1.1",
     "express": "^4.16.4",
+    "file-loader": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
     "less-loader": "^4.1.0",
+    "mini-css-extract-plugin": "^0.6.0",
     "style-loader": "^0.23.1",
     "webpack-dev-middleware": "^3.6.2",
     "webpack-dev-server": "^3.3.1"

src/index.js

@@ -1,5 +1,5 @@
+import '../index.css';
 
-$("body").html("aa23e3332a");
 console.log('2221331');
 $.post('/api/icss/tranFieldInfo/getInfoByUuid',{},function(res){
   console.log(res);

webpack.config.js

@@ -1,9 +1,11 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const webpack = require('webpack');
+const proxyHost = "http://192.168.2.236:5050";
 
 module.exports = {
-  entry:'./src/index.js',
+  entry:'./src/js/index.js',
   output:{
     filename: "main.js",
     path:path.resolve(__dirname, 'dist'),
@@ -14,14 +16,27 @@ module.exports = {
   devServer: {
     contentBase: './dist',
     proxy:{
-      '/api':'http://192.168.2.236:5050'
+      '/api':proxyHost
     },
     hot: true
   },
   plugins: [
     new HtmlWebpackPlugin({
-      title: 'Output Management'
-    })
+      title: '11111',
+      template:'./src/index.html',
+      filename:'index.html'
+    }),
+    new HtmlWebpackPlugin({
+      title: 'test',
+      template:'./src/test.html',
+      filename:'test.html'
+    }),
+    new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // both options are optional
+      filename: '[name].css',
+      chunkFilename: '[id].css',
+    }),
   ],
   module: {
     rules: [
@@ -30,8 +45,28 @@ module.exports = {
         use: "imports-loader?$=jquery"
       },
       {
-        test:/\.less/,
+        test: /\.css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              // you can specify a publicPath here
+              // by default it uses publicPath in webpackOptions.output
+
+            },
+          },
+          'css-loader',
+        ],
+      },
+      {
+        test:/\.less$/,
         use:['style-loader','css-loader','less-loader']
+      },
+      {
+        test: /\.(png|svg|jpg|gif)$/,
+        use: [
+          'file-loader'
+        ]
       }
     ]
   }