基于cornerstone3D的dicom影像浏览器 第一章 webpack5+vue2+cornerstonejs项目创建

1.下载相关依赖，package.json文件

{
  "name": "weichang",
  "version": "3.8.8",
  "description": "微场医疗-管理系统",
  "author": "微场",
  "license": "MIT",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack serve --config ./vue.config.js",
    "build:prod": "cross-env NODE_ENV=production webpack --config ./vue.config.js",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  },
  "keywords": [
    "vue",
    "admin",
    "dashboard",
    "element-ui",
    "boilerplate",
    "admin-template",
    "management-system"
  ],
  "repository": {
    "type": "git",
    "url": "https://gitee.com/y_project/RuoYi-Vue.git"
  },
  "dependencies": {
    "@babel/core": "^7.26.10",
    "@babel/eslint-parser": "^7.12.16",
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
    "@babel/plugin-transform-class-static-block": "7.23.4",
    "@babel/plugin-transform-runtime": "^7.26.10",
    "@babel/preset-env": "^7.26.9",
    "@babel/runtime-corejs3": "^7.27.0",
    "@cornerstonejs/adapters": "^2.19.0",
    "@cornerstonejs/calculate-suv": "1.1.0",
    "@cornerstonejs/core": "^2.19.0",
    "@cornerstonejs/dicom-image-loader": "^2.19.0",
    "@cornerstonejs/nifti-volume-loader": "^2.19.0",
    "@cornerstonejs/tools": "^2.19.0",
    "@icr/polyseg-wasm": "0.4.0",
    "@kitware/vtk.js": "29.7.0",
    "@riophae/vue-treeselect": "0.4.0",
    "axios": "0.28.1",
    "babel-loader": "^10.0.0",
    "babel-polyfill": "^6.26.0",
    "big.js": "^7.0.1",
    "clipboard": "2.0.8",
    "core-js": "3.37.1",
    "cornerstone-wado-image-loader": "^4.13.2",
    "cross-env": "^7.0.3",
    "css-minimizer-webpack-plugin": "^7.0.2",
    "dcmjs": "^0.30.0",
    "dicom-parser": "^1.8.21",
    "dicomweb-client": "^0.10.4",
    "dotenv-webpack": "^8.1.0",
    "echarts": "5.4.0",
    "element-china-area-data": "^6.1.0",
    "element-ui": "2.15.14",
    "file-saver": "^2.0.5",
    "fuse.js": "6.4.3",
    "highlight.js": "9.18.5",
    "install": "^0.13.0",
    "js-beautify": "1.13.0",
    "js-cookie": "3.0.1",
    "jsencrypt": "3.0.0-rc.1",
    "jszip": "^3.10.1",
    "mini-css-extract-plugin": "^2.9.4",
    "npm": "^10.8.3",
    "nprogress": "0.2.0",
    "path-browserify": "^1.0.1",
    "postcss": "^8.4.31",
    "postcss-loader": "^7.3.3",
    "postcss-pxtorem": "^6.0.0",
    "quill": "1.3.7",
    "sass": "^1.91.0",
    "sass-loader": "^10.2.1",
    "screenfull": "5.0.2",
    "sortablejs": "1.10.2",
    "unplugin-auto-import": "^0.16.0",
    "unplugin-vue-components": "^0.22.0",
    "vue": "2.6.12",
    "vue-count-to": "1.0.13",
    "vue-cropper": "0.5.5",
    "vue-loader": "^15.11.1",
    "vue-meta": "2.4.0",
    "vue-router": "3.4.9",
    "vue-style-loader": "^4.1.3",
    "vuedraggable": "2.24.3",
    "vuex": "3.6.0",
    "wasm-loader": "^1.3.0",
    "webpack": "5.72.1",
    "webpack-cli": "5.0.0",
    "webpack-dev-server": "4.9.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "4.4.6",
    "@vue/cli-plugin-eslint": "4.4.6",
    "@vue/cli-service": "4.4.6",
    "babel-eslint": "10.1.0",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-dynamic-import-node": "2.3.3",
    "chalk": "4.1.0",
    "compression-webpack-plugin": "6.1.2",
    "connect": "3.6.6",
    "eslint": "7.15.0",
    "eslint-plugin-vue": "7.2.0",
    "lint-staged": "10.5.3",
    "prettier": "^2.4.1",
    "runjs": "4.4.2",
    "sass": "1.32.13",
    "sass-loader": "10.1.1",
    "script-ext-html-webpack-plugin": "2.1.5",
    "svg-sprite-loader": "5.1.1",
    "thread-loader": "^4.0.4",
    "vue-template-compiler": "2.6.12"
  },
  "engines": {
    "node": ">=8.9",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

2.vue.config.js

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const os = require("os");
const { DefinePlugin } = require("webpack")
const Dotenv = require("dotenv-webpack")
const threads = os.cpus().length;
const TerserPlugin = require("terser-webpack-plugin")

const env = process.env.NODE_ENV || "development"
const styleLoaders = (isProduction) => {
  const loaders = [
    isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader',
    'css-loader',
    'postcss-loader'
  ];

  return {
    test: /\.css$/,
    use: loaders
  };
};

const scssLoaders = (isProduction) => {
  const loaders = [
    isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader',
    'css-loader',
    'postcss-loader',
    'sass-loader'
  ];

  return {
    test: /\.scss$/,
    use: loaders
  };
};

const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/main.js',
  output: {
    filename: '[name]-[contenthash:6].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: isProduction === "production" ? "/" : "/",
    clean: true,
  },
  resolve: {
    extensions: ['.vue', '.js', '.json', '.wasm', '.ts'], // 自动解析的扩展名
    mainFiles: ['index'], // 主文件名
    alias: {
      '@': path.resolve(__dirname, 'src'),
      vue: "vue/dist/vue.esm.js",
      'path': require.resolve('path-browserify')
    }
  },
  externals: {
    fs: require('fs')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            preserveWhitespace: false
          },
          options: {
            cacheDirectory: path.resolve(
              __dirname,
              "node_modules/.cache/vue-loader"
            ),
          }
        }
      },
      {
        test: /\.wasm/,
        type: 'asset/resource',
      },
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "thread-loader",
            options: {
              workers: threads,
            },
          },
          {
            loader: "babel-loader",
            options: {
              cacheDirectory: false,
              cacheCompression: false,
              targets: {
                "browsers": [">0.1%"]
              },
              // presets: [
              //   ["@babel/preset-env", {
              //     useBuiltIns: "usage",
              //     corejs: 3
              //   }]
              // ],
              // plugins: [
              //   [
              //     "@babel/plugin-transform-runtime",
              //     {
              //       corejs: false,
              //       helpers: true,
              //       regenerator: true
              //     }
              //   ]
              // ]
            }
          }
        ]
      },
      styleLoaders(isProduction),
      scssLoaders(isProduction),
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        type: 'asset/resource',
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024,
          },
        },
        generator: {
          filename: 'img/[name].[hash:8][ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name].[hash:8][ext]'
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        type: 'asset/resource',
        generator: {
          filename: 'media/[name].[hash:8][ext]'
        }
      }
    ]
  },
  // optimization: {
  //   minimize: true,
  //   minimizer: [
  //     new CssMinimizerPlugin(),
  //     new TerserPlugin({
  //       parallel: threads
  //     })
  //   ],
  // },
  devServer: {
    host: 'localhost',
    port: 9000,
    open: true,
    hot: true,
    proxy: {
      "/dev-api": {
        target: 'http://10.100.2.94:7066',
        changeOrigin: true,
        logLevel: "debug",
        pathRewrite: {
          "/dev-api": '/prod-api'
        },
        onProxyRes(proxyRes, req, res) {
          const realUrl = "http://10.100.2.94:7066" + req.url || '';
          console.log('请求的真实地址', realUrl)
          proxyRes.headers['A-Real-Url'] = realUrl;
        }
      }
    }
  },
  plugins: [
    new VueLoaderPlugin(),
    new DefinePlugin({}),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/index.html'),
      filename: "index.html",
      templateParameters: {
        BASE_URL: `/`
      },
      title: '微场医疗-管理系统'
    }),
    new Dotenv({
      path: `./.env.${env}`
    }),
    ...(isProduction ? [new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css',
      chunkFilename: 'css/[name].[contenthash:8].chunk.css'
    })] : [])
  ],
};

3.babel.config.js

module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: ['@babel/plugin-proposal-optional-chaining'],
  'env': {
    'development': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      'plugins': ['dynamic-import-node']
    },
    'production': {
      'plugins': [
        '@babel/plugin-proposal-optional-chaining'
      ]
    }
  }
}