javascript - webpack2.2不想打包vue文件,如何设置?
天蓬老师
天蓬老师 2017-04-11 12:01:14
[JavaScript讨论组]

如题,请问下在webpack.config.js里面如何设置不打包vue文件,而是直接通过cdn来引用,下面是我的webpack.config.js代码:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}
天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(1)
大家讲道理

如果楼主使用的vue-cli生成的项目那么可以这么修改

在main.js中不要使用import Vue from 'vue'这一句(告诉webpack我不需要引入vue)

在index.html文件中的使用script标签外链vue文件,一定要写在</body>上面(从外部引入vue)

最后更改webpack.base.conf.js文件,在配置中与'entry'字段同级的地方加入externals:{Vue:"Vue"},类似这样(告诉webpack在main.js中的Vue是一个全局变量)

  entry: {
    app: './src/main.js'
  },
  externals: {
    Vue: "Vue"
  }

我刚才试过了,确定是可以使用的

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号