账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    webpack打包vue项目的js不是所需的export,而是整个文件
    34
    0

    项目vue: 2.5.0 webpack: 3.6.0
    打包配置

    webpack.base.conf.js

    'use strict';
    const path = require('path');
    const utils = require('./utils');
    const vueLoaderConfig = require('./vue-loader.conf');
    
    function resolve (dir) {
      return path.join(__dirname, '..', dir)
    }
    
    module.exports = {
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
        }
      },
      module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            include: [resolve('src'), resolve('test')]
          },
          {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
          },
          {
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('media/[name].[hash:7].[ext]')
            }
          },
          {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
          }
        ]
      }
    };

    webpack.prod.conf.js

    'use strict';
    const path = require('path');
    const utils = require('./utils');
    const webpack = require('webpack');
    const config = require('../config');
    const merge = require('webpack-merge');
    const baseWebpackConfig = require('./webpack.base.conf');
    const CopyWebpackPlugin = require('copy-webpack-plugin');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
    
    const env = config.build.env;
    
    const webpackConfig = merge(baseWebpackConfig, {
      entry: {
        app: './src/main.js'
      },
      output: {
        path: config.build.assetsRoot,
        filename: utils.assetsPath('[name].js'),
        publicPath: config.build.assetsPublicPath
      },
      module: {
        rules: utils.styleLoaders({
          sourceMap: config.build.productionSourceMap,
          extract: true
        })
      },
      devtool: config.build.productionSourceMap ? '#source-map' : false,
      plugins: [
        new webpack.DefinePlugin({
          'process.env': env
        }),
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false
          }
        }),
        new ExtractTextPlugin({
          filename: utils.assetsPath('css/[name].css')
        }),
        new OptimizeCSSPlugin({
          cssProcessorOptions: {
            safe: true
          }
        }),
        new CopyWebpackPlugin([
          {
            from: path.resolve(__dirname, '../static'),
            to: config.build.assetsSubDirectory,
            ignore: ['.*']
          }
        ])
      ]
    });
    
    if (config.build.productionGzip) {
      const CompressionWebpackPlugin = require('compression-webpack-plugin');
    
      webpackConfig.plugins.push(
        new CompressionWebpackPlugin({
          asset: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp(
            '\\.(' +
            config.build.productionGzipExtensions.join('|') +
            ')$'
          ),
          threshold: 10240,
          minRatio: 0.8
        })
      )
    }
    
    module.exports = webpackConfig;

    入口文件:

    const install = function(Vue, opts = {}) {
    
      Object.keys(components).forEach(key => {
        Vue.component(key, components[key]);
      });
    
      Vue.prototype.$Modal = lanModal;
      Vue.prototype.$Message = lanMessage;
      Vue.prototype.$messageBox = lanMessageBox;
    };
    
    if (typeof window !== 'undefined' && window.Vue) {
      install(window.Vue);
    };
    
    export default {
      version: '0.0.9',
      install,
      ...components
    };

    按照上述打包打包出来的是一个完整的js文件,但是我想要的是打包出来是一个所有组件的对象,求问?打包配置哪里不对吗

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 白丝妖娆 普通会员 1楼

      在webpack打包vue项目时,由于项目的打包依赖,例如vue-router、vue-element-admin等,这些依赖的js文件并不会被打包进最终的dist文件中,而是会作为依赖项被引入。这就导致了在dist文件中并不直接有这些依赖项的js文件。

      为了在打包后的dist文件中包含这些依赖项的js文件,需要在webpack配置中进行一些设置。例如,可以将这些依赖项的js文件打包进单独的js文件中,然后在打包后的dist文件中通过import语句导入这些js文件。

      此外,也可以将这些依赖项的js文件作为插件进行打包,然后在需要的时候通过使用这些插件来引入这些js文件。这种方式的优点是可以保证在dist文件中包含了所有的依赖项的js文件,但是缺点是需要安装和配置这些插件,而且插件的引入和使用可能会比直接引入js文件稍微复杂一些。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部