基本配置和页面

package.json

@@ -10,10 +10,12 @@
     "webpack-cli": "^3.3.1"
   },
   "devDependencies": {
+    "clean-webpack-plugin": "^2.0.1",
     "css-loader": "^2.1.1",
     "express": "^4.16.4",
     "file-loader": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
+    "less": "^3.9.0",
     "less-loader": "^4.1.0",
     "mini-css-extract-plugin": "^0.6.0",
     "style-loader": "^0.23.1",
@@ -24,7 +26,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack",
     "watch": "webpack --watch",
-    "dev": "webpack-dev-server --open",
+    "dev": "webpack-dev-server --open --mode development",
     "server": "node server.js"
   },
   "repository": {

src/css/index.less

@@ -0,0 +1,94 @@
+.iframeWrap {
+  width: 450px;
+  margin: 100px auto;
+  height: 500px;
+  border: 1px solid #ccc;
+  padding: 20px;
+  overflow: auto;
+  .conditionHintPub {
+    border: 1px solid #F2F2F2;
+    margin-bottom: 15px;
+    .conditionMain {
+      padding: 17px;
+    }
+    .alertModal{
+      position: relative;
+    }
+    .treatPlanWrap {
+      padding-bottom: 10px;
+      border-bottom: 1px solid #D8D8D8;
+      .treatPlan {
+        font-weight: bold;
+      }
+    }
+    .treatMedicine {
+      padding-top: 10px;
+      .treatPlan {
+        font-weight: bold;
+      }
+      .medicine {
+        color: #267FD7;
+        border-bottom: 1px solid #267FD7;
+        position: relative;
+        cursor: pointer;
+        a {
+          display: none;
+          width: 28px;
+          height: 28px;
+          position: absolute;
+          top: -20px;
+          left: 50%;
+          margin-left: -14px;
+          background: url("../images/tmp1.png") center center no-repeat;
+        }
+        a:hover {
+          background: url("../images/tmp2.png") center center no-repeat;
+        }
+      }
+      .medicine:hover {
+        a {
+          display: inline-block;
+        }
+      }
+      .medicineWaring {
+        background-color: #f4c051;
+        color: #000;
+        font-size: 12px;
+        border-radius: 2px;
+      }
+    }
+    p {
+      height: 24px;
+      line-height: 24px;
+      span {
+        display: inline-block;
+      }
+    }
+  }
+  .conditionHint{
+
+  }
+  h4 {
+    color: red;
+    height: 40px;
+    line-height: 40px;
+    background-color: #FDF4EE;
+    font-size: 16px;
+  }
+  
+  h4 {
+    i {
+      content: '';
+      width: 40px;
+      height: 40px;
+      float: left;
+      background: url("../images/tips.png") center center no-repeat;
+    }
+  }
+}
+
+#receiverIframe {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

src/css/page.css

@@ -0,0 +1,3 @@
+p {
+  color: blueviolet;
+}

src/css/popup.less

@@ -0,0 +1,110 @@
+.popupModal {
+  position: absolute;
+  top: 24px;
+  left: 0;
+  width: 410px;
+  left: 50%;
+  margin-left: -215px;
+  top: 250px;
+  background: #FFFFFF;
+  box-shadow: 0 3px 10px -5px;
+  border: 1px solid #efefef;
+  .modalTitle {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 20px;
+    background: #DFEAFE;
+    i {
+      float: right;
+    }
+  }
+  .modalMainOne {
+    padding: 20px 0;
+    height: 30px;
+    line-height: 30px;
+    margin: 0 20px;
+    border-bottom: 1px solid #979797;
+    ul {
+      display: inline-block;
+    }
+    .modalMaintltle {
+      float: left;
+    }
+    .radioCheck {
+      float: left;
+      i {
+        height: 28px;
+        width: 28px;
+        float: left;
+        background: url('../images/tmp1.png') center center no-repeat;
+      }
+    }
+  }
+  .modalMainTwo {
+    padding: 20px 0;
+    margin: 0 20px;
+    border-bottom: 1px solid #979797;
+    .radioCheck {
+      height: 30px;
+      line-height: 30px;
+      margin: 10px 0;
+      position: relative;
+      padding-left: 98px;
+      padding-right: 20px;
+      .modalMaintltle {
+        float: left;
+        width: 98px;
+        position: absolute;
+        left: 0;
+      }
+      input[type=text] {
+        border: 1px solid #3B9ED0;
+        border-radius: 2px;
+        height: 30px;
+        line-height: 30x;
+        padding: 0 10px;
+        width: 100%;
+      }
+      input[type=radio] {
+        position: relative;
+        top: 3px;
+        width: 18px;
+        height: 18px;
+      }
+      i {
+        height: 28px;
+        width: 28px;
+        float: left;
+        background: url('../images/tmp1.png') center center no-repeat;
+      }
+    }
+    .calculate {
+      height: 32px;
+      line-height: 32px;
+      margin: 15px 0px;
+      text-align: center;
+      background-color: #DBDBDB;
+      color: #fff;
+      width: 100%;
+      cursor: not-allowed;
+    }
+    .result {
+      span {
+        display: inline-block;
+        width: 98px;
+      }
+    }
+  }
+  .btnWrap {
+    padding: 10px 20px;
+    .sureScore {
+      border: 1px solid #267FD7;
+      border-radius: 4px;
+      width: 66px;
+      height: 32px;
+      line-height: 30px;
+      float: right;
+      color: #267FD7;
+    }
+  }
+}

src/css/reset.css

@@ -0,0 +1,78 @@
+html,
+body,
+div,
+span,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+a,
+img,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+label,
+tr,
+th,
+td,
+input {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 14px;
+  font-style: normal;
+}
+
+html,
+body {
+  height: 100%;
+  font-family: 'Microsoft YaHei', arial, tahoma, sans-serif;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+li {
+  list-style: none;
+}
+
+button {
+  cursor: pointer;
+  outline: none;
+  background-color: #fff;
+  border: 0 none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+input,
+textarea {
+  border: none;
+  margin: 0;
+  padding: 0;
+  outline: none;
+}
+.clearfix:after{
+  content: ""; 
+  display: block; 
+  height: 0; 
+  clear: both; 
+  visibility: hidden;  
+}
+
+.clearfix {
+  zoom: 1; 
+}

src/html/index.html

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+
+<body>
+  <a href="./page.html">打开页面page</a>
+  <a href="./scoreSheet.html">打开页面scoreSheet</a>
+  <div class="iframeWrap" id="iframeWrap">
+    <ul>
+      <li class="conditionHintPub">
+        <h4 href="javascript:void(0);"><i></i>病情提示</h4>
+        <div class="conditionMain">
+          <p>患者可能有糖尿病周围神经病变</p>
+          <p id="alertModal" class="alertModal">可能结果<span class="mayResult">结果选择：</span></p>
+        </div>
+      </li>
+      <li class="conditionHintPub">
+        <h4 href="javascript:void(0);"><i></i>病情提示</h4>
+        <div class="conditionMain">
+          <p>患者可能有糖尿病周围神经病变</p>
+          <p id="alertModal" class="alertModal">可能结果<span class="mayResult">结果选择：</span></p>
+        </div>
+      </li>
+      <li class="conditionHintPub">
+        <h4 href="javascript:void(0);"><i></i>推荐治疗方案（急性支气管炎）</h4>
+        <div class="conditionMain">
+          <div class="treatPlanWrap">
+            <p class="treatPlan">一般治疗</p>
+            <p>1 注意休息，进食富有营养及维生素的流质或半流质食物。</p>
+            <p>2 发热病人注意体液的补充，预防脱水。</p>
+            <p>3 有发绀或低氧血症时，应吸入氧气。</p>
+          </div>
+          <div class="treatMedicine">
+            <p class="treatPlan">常用药物治疗</p>
+            <p>1 祛痰药：<span class="medicine"><a href="#"></a> 羧甲司坦</span><span class="medicineWaring">慎用</span>
+              ；使用率80%，乙酰半胱氨酸。</p>
+            <p>2 发热病人注意体液的补充，预防脱水。</p>
+            <p>3 有发绀或低氧血症时，应吸入氧气。</p>
+          </div>
+        </div>
+      </li>
+      <li class="conditionHintPub">
+        <h4 href="javascript:void(0);"><i></i>病情提示</h4>
+        <div class="conditionMain">
+          <p>患者可能有糖尿病周围神经病变</p>
+          <p id="alertModal" class="alertModal">
+            可能结果
+            <span class="mayResult">结果选择：<span>结果</span>
+              <!-- <div id="popupModal" class="popupModal">
+                  <div class="modalTitle">结果选择<i>X</i></div>
+                  <div class="modalMainOne">
+                    <span class="modalMaintltle">是否贫血：</span>
+                    <ul class="clearfix">
+                      <li class="radioCheck"><i></i> 一级</li>
+                      <li class="radioCheck"><i></i> 二级</li>
+                      <li class="radioCheck"><i></i> 三级</li>
+                    </ul>
+                  </div>
+                  <div class="modalMainTwo">
+                    <ul class="clearfix">
+                      <li class="radioCheck">
+                        <span class="modalMaintltle">请提高年龄：</span>
+                        <input type="text" placeholder="请输入">
+                      </li>
+                      <li class="radioCheck">
+                        <span class="modalMaintltle">请输入血肌酐：</span>
+                        <input type="text" placeholder="请输入">
+                      </li>
+                      <li class="radioCheck">
+                        <span class="modalMaintltle">请选择性别：</span>
+                        <input type="radio" name="sex" id="male">
+                        <label for="male">男</label>
+                        <input type="radio" style="margin-left:30px;" id="female" name="sex">
+                        <label for="female">女</label>
+                      </li>
+                      <li class="radioCheck">
+                        <span class="modalMaintltle">请选择性别：</span>
+                        <input type="text" placeholder="请输入">
+                      </li>
+                    </ul>
+                    <button class="calculate">计算</button>
+                    <p class="result"><span>GFR值：</span>2222asdasd</p>
+                    <p class="result"><span>评估结论：</span>是的撒多撒</p>
+                  </div>
+                  <div class="btnWrap clearfix">
+                    <button class="sureScore">确定</button>
+                  </div>
+                </div> -->
+            </span>
+          </p>
+        </div>
+      </li>
+    </ul>
+    <!-- <iframe src="./page.html" frameborder="0" id="receiverIframe"></iframe> -->
+  </div>
+</body>
+
+</html>

src/html/page.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+<body>
+  <p id="jsjs">test</p>
+  <p>test</p>
+  <p>test</p>
+  <p>test</p>
+  <img src="/images/webpack.png" alt="">
+  
+</body>
+</html>

src/html/scoreSheet.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+<body>
+  <div class="scoreSheet">
+    危重病人APACHE II评分表
+  </div>
+</body>
+</html>

src/index.css

@@ -1,10 +0,0 @@
-a{
-    color: red;
-}
-a::before{
-   content: '';
-    display: inline-block;
-    width: 26px;
-    height: 26px;
-    background: url("./imgs/tips.png");
-}

src/index.html

@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>Output Management</title>
-</head>
-<body>
-<a href="./test.html">打开页面</a>
-</body>
-</html>

src/js/index.js

@@ -1,6 +0,0 @@
-import '../index.css';
-
-console.log('2221331');
-$.post('/api/icss/tranFieldInfo/getInfoByUuid',{},function(res){
-  console.log(res);
-});

src/js/popup.js

@@ -0,0 +1,21 @@
+function popup(obj){
+  $(".popupModal").remove()
+  $(obj.dom).append('<div id="popupModal" class="popupModal">ssss</div>')
+  $(".radioCheck").click(function(){
+    $(this).children("i").html('7777')
+  })
+}
+(function(){
+  $(".radioCheck").eq(0).children("i").css({
+    "background":"url('../images/tmp2.png') center center no-repeat"
+  })
+  $(".radioCheck").click(function(){
+    $(this).children("i").css({
+      "background":"url('../images/tmp2.png') center center no-repeat"
+    })
+    $(this).siblings().children("i").css("background","url('../images/tmp1.png') center center no-repeat")
+  })
+})()
+module.exports = {
+  popup
+}

src/js/promise.js

@@ -0,0 +1,32 @@
+const qs = require('qs');
+
+const config = {
+  pushInner:'/api/icss/push/pushInner',
+}
+const getUrlArgObject = (parm) => {  
+  let query = window.location.search;
+  // let query = '?'+url.split('?')[1];
+  let args = qs.parse(query.substr(1));
+  return args[parm];//返回对象  
+} 
+const post = function(url,data){
+  return new Promise((resolve,reject)=>{
+    $.ajax({
+      method:'post',
+      url:url,
+      data:JSON.stringify(data),
+      contentType:"application/json; charset=UTF-8",
+      success:function(res){
+        resolve({data:res});
+      },
+      error:function(error){
+        reject(error);
+      },
+    });
+  });
+}
+export {
+  config,
+  post,
+  getUrlArgObject
+}

src/page.js

@@ -0,0 +1,9 @@
+import './css/page.css'
+import './images/webpack.png'
+
+$(function(){
+  $("#jsjs").css({
+    "color":"red",
+    "background":"yellow"
+  })
+})

src/scoreSheet.js

@@ -0,0 +1 @@
+console.log('危重病人APACHE II评分表')

src/test.html

@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>Output Management</title>
-</head>
-<body>
-test
-</body>
-</html>

webpack.config.js

@@ -1,44 +1,93 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CleanWebpackPlugin = require('clean-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/js/index.js',
-  output:{
-    filename: "main.js",
-    path:path.resolve(__dirname, 'dist'),
-    publicPath:'/'
+  entry: {
+    index: path.resolve(__dirname, 'src', 'index.js'),
+    page: path.resolve(__dirname, 'src', 'page.js'),
+    scoreSheet: path.resolve(__dirname, 'src', 'scoreSheet.js'),
+    vendor:'lodash' // 多个页面所需的公共库文件，防止重复打包带入
   },
-  mode:'development',
-  devtool: 'inline-source-map',
-  devServer: {
-    contentBase: './dist',
-    proxy:{
-      '/api':proxyHost
-    },
-    hot: true
+  output: {
+    publicPath: '/', //这里要放的是静态资源CDN的地址
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'js/[name].js'
+  },
+  resolve: {
+    extensions: [".js", ".css", ".json"],
+    alias: {} //配置别名可以加快webpack查找模块的速度
   },
   plugins: [
+    // 多入口的html文件用chunks这个参数来区分
     new HtmlWebpackPlugin({
-      title: '11111',
-      template:'./src/index.html',
-      filename:'index.html'
+      title: 'index',
+      template: path.resolve(__dirname, 'src/html', 'index.html'),
+      filename: 'index.html',
+      chunks: ['index', 'vendor','common'],
+      inject: true,
+      hash: true, //防止缓存
+      minify: {
+        removeAttributeQuotes: true, //压缩 去掉引号
+        removeComments: true, //移除HTML中的注释
+        collapseWhitespace: true //删除空白符与换行符
+      }
     }),
     new HtmlWebpackPlugin({
-      title: 'test',
-      template:'./src/test.html',
-      filename:'test.html'
+      title: 'page',
+      template: path.resolve(__dirname, 'src/html', 'page.html'),
+      filename: 'page.html',
+      chunks: ['page', 'vendor','common'],
+      inject: true,
+      hash: true, //防止缓存
+      minify: {
+        removeAttributeQuotes: true, //压缩 去掉引号
+        removeComments: true, //移除HTML中的注释
+        collapseWhitespace: true //删除空白符与换行符
+      }
+    }),
+    new HtmlWebpackPlugin({
+      title: 'scoreSheet',
+      template: path.resolve(__dirname, 'src/html', 'scoreSheet.html'),
+      filename: 'scoreSheet.html',
+      chunks: ['scoreSheet', 'vendor','common'],
+      inject: true,
+      hash: true, //防止缓存
+      minify: {
+        removeAttributeQuotes: true, //压缩 去掉引号
+        removeComments: true, //移除HTML中的注释
+        collapseWhitespace: true //删除空白符与换行符
+      }
     }),
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output
       // both options are optional
-      filename: '[name].css',
+      filename: 'css/[name].css',
       chunkFilename: '[id].css',
     }),
+    new webpack.HotModuleReplacementPlugin(),
+    new CleanWebpackPlugin(),
   ],
+  optimization: { //webpack4.x的最新优化配置项，用于提取公共代码
+    splitChunks: {
+      cacheGroups: {
+        commons: {
+          chunks: "initial",
+          name: "common",
+          minChunks: 2,
+          maxInitialRequests: 5, // The default limit is too small to showcase the effect
+          minSize: 0, // This is example is too small to create commons chunks
+          reuseExistingChunk: true // 可设置是否重用该chunk（查看源码没有发现默认值）
+        }
+      }
+    }
+  },
+  
   module: {
+    // 多个loader是有顺序要求的，从右往左写，因为转换的时候是从右往左转换的
     rules: [
       {
         test: /\.js$/,
@@ -46,29 +95,40 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: [
-          {
+        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: /\.less$/,
+        use: ['style-loader','css-loader','less-loader']
+      },
+      { //file-loader 解决css等文件中引入图片路径的问题
+        // url-loader 当图片较小的时候会把图片BASE64编码，大于limit参数的时候还是使用file-loader 进行拷贝
+        test: /\.(png|jpg|jpeg|gif|svg)$/,
+        use: {
+          loader: 'file-loader',
+          options: {
+            outputPath: 'images/', // 图片输出的路径和存储路径保持一致
+            limit: 100,
+            name: '[name].[ext]'
+          }
+        }
       },
-      {
-        test: /\.(png|svg|jpg|gif)$/,
-        use: [
-          'file-loader'
-        ]
-      }
     ]
-  }
-
+  },
+  devtool: 'cheap-module-eval-source-map', //开发环境cheap-module-eval-source-map   //生产环境cheap-module-source-map
+  devServer: {
+    contentBase: path.join(__dirname, "dist"), //静态文件根目录
+    proxy: {
+      '/api': proxyHost
+    },
+    hot: true
+  },
 }