save

build/webpack.dev.conf copy.js → build/webpack.copy.js

@@ -2,32 +2,118 @@
 const utils = require('./utils')
 const webpack = require('webpack')
 const config = require('../config')
-const merge = require('webpack-merge')
 const path = require('path')
-const baseWebpackConfig = require('./webpack.base.conf')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const vueLoaderConfig = require('./vue-loader.conf')
+const workerConfig = require('./worker.conf')
 // const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 // const ESLintPlugin = require('eslint-webpack-plugin');
 // const VueLoaderPlugin = require('vue-loader/lib/plugin');
 // const {VueLoaderPlugin} = require('vue-loader')
 const portfinder = require('portfinder')
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
 const HOST = process.env.HOST
 const PORT = process.env.PORT && Number(process.env.PORT)
 
-const devWebpackConfig = merge(baseWebpackConfig, {
+const devWebpackConfig = {
+  cache: {
+    type: 'filesystem',
+    allowCollectingMemory: true,
+    buildDependencies: {
+      // This makes all dependencies of this file - build dependencies
+      config: [__filename],
+      // 默认情况下 webpack 与 loader 是构建依赖。
+    },
+  },
+  target: 'web',
+entry: {
+  app: './src/main.js',
+ // sdk: path.join(__dirname, '../src/sdk/NIM_Web_SDK_v5.0.0.js')
+},
+externals:{
+  'BMap':'BMap',
+},
+resolve: {
+  extensions: ['.js', '.vue', '.json'],
+  alias: {
+    'vue$': 'vue/dist/vue.esm.js',
+    '@': resolve('src'),
+  },
+  fallback: {
+    timers: require.resolve("timers-browserify"),
+    zlib: require.resolve("browserify-zlib"),
+    "constants": require.resolve("constants-browserify"),
+    "os": require.resolve("os-browserify/browser")
+}
+},
   mode: 'development',
   // 避免额外的优化步骤 Webpack 通过执行额外的算法任务，来优化输出结果的体积和加载性能。这些优化适用于小型代码库，但是在大型代码库中却非常耗费性能
-  optimization: {
-    removeAvailableModules: false,
-    removeEmptyChunks: false,
-    splitChunks: false,
-  },
+  // optimization: {
+  //   removeAvailableModules: false,
+  //   removeEmptyChunks: false,
+  //   splitChunks: false,
+  // },
   output: { //Webpack 会在输出的 bundle 中生成路径信息。然而，在打包数千个模块的项目中，这会导致造成垃圾回收性能压力。在 options.output.pathinfo 设置中关闭
     pathinfo: false,
+    path: config.build.assetsRoot,
+    assetModuleFilename: '[hash][ext][query]',
+    filename: '[name].js',
+    publicPath: config.build.assetsPublicPath
   },
   module: {
-    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+  rules: [
+    // ...(config.dev.useEslint ? [createLintingRule()] : []),
+    ...utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }),
+    {
+      test: /\.vue$/,
+      use: [{loader:"thread-loader",options:workerConfig}, {loader:'vue-loader', options: vueLoaderConfig}],
+      // loader:'vue-loader', options: vueLoaderConfig
+    },
+    {
+      test: /\.js$/,
+      use: [{loader:"thread-loader",options:workerConfig},'babel-loader'],
+      exclude: /NIM_Web_SDK_v5.0.0.js/,
+      include: [resolve('src'), resolve('test')]
+    },
+    {
+      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+      type: 'asset',
+      // loader: 'url-loader',
+      // options: {
+      //   limit: 10000,
+      //   name: utils.assetsPath('img/[name].[hash:7].[ext]')
+      // }
+    },
+    {
+      test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+      type: 'asset',
+      // loader: 'url-loader',
+      // options: {
+      //   limit: 10000,
+      //   name: utils.assetsPath('media/[name].[hash:7].[ext]')
+      // }
+    },
+    {
+      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+      type: 'asset',
+      // loader: 'url-loader',
+      // options: {
+      //   limit: 10000,
+      //   name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+      // }
+    },
+    {
+      test: /\.(mp3)(\?.*)?$/,
+      type: 'asset',
+      // loader: 'url-loader',
+      // options: {
+      //   name: utils.assetsPath('assets/[name].[hash:7].[ext]')
+      // }
+    }
+  ]
   },
   // cheap-module-eval-source-map is faster for development
   devtool: config.dev.devtool,
@@ -73,15 +159,18 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       inject: true
     }),
     // copy custom static assets
-    new CopyWebpackPlugin([
+    new CopyWebpackPlugin({patterns:[
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.dev.assetsSubDirectory,
+      },
       {
         from: path.resolve(__dirname, '../static'),
         to: config.dev.assetsSubDirectory,
-        ignore: ['.*']
       }
-    ])
+    ]})
   ]
-})
+}
 const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
 const smp = new SpeedMeasurePlugin();
 // module.exports = new Promise((resolve, reject) => {

build/webpack.dev.conf.js

@@ -81,21 +81,35 @@ resolve: {
     },
     {
       test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-      type: 'asset'
+      loader: 'url-loader',
+      options: {
+        limit: 10000,
+        name: utils.assetsPath('img/[name].[hash:7].[ext]')
+      }
     },
     {
       test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
-      type: 'asset'
+      loader: 'url-loader',
+      options: {
+        limit: 10000,
+        name: utils.assetsPath('media/[name].[hash:7].[ext]')
+      }
     },
     {
       test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-      type: 'asset'
+      loader: 'url-loader',
+      options: {
+        limit: 10000,
+        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+      }
     },
     {
       test: /\.(mp3)(\?.*)?$/,
-      type: 'asset'
-    }      
-    
+      loader: 'url-loader',
+      options: {
+        name: utils.assetsPath('assets/[name].[hash:7].[ext]')
+      }
+    }
   ]
   },
   // cheap-module-eval-source-map is faster for development
@@ -143,6 +157,10 @@ resolve: {
     }),
     // copy custom static assets
     new CopyWebpackPlugin({patterns:[
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.dev.assetsSubDirectory,
+      },
       {
         from: path.resolve(__dirname, '../static'),
         to: config.dev.assetsSubDirectory,

build/worker.conf.js

@@ -2,7 +2,7 @@
 module.exports = {
   // 产生的 worker 的数量，默认是 (cpu 核心数 - 1)，或者，
   // 在 require('os').cpus() 是 undefined 时回退至 1
-  workers: 3,
+  workers: 4,
 
   // 一个 worker 进程中并行执行工作的数量
   // 默认为 20

package.json

@@ -5,6 +5,7 @@
   "author": "VIITTO",
   "private": true,
   "scripts": {
+    "copy": "webpack serve --hot --progress --config build/webpack.copy.js",
     "dev": "webpack serve --hot --open --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
     "lint": "eslint --ext .js,.vue src",