javascript - webpack2.2不想打包vue文件，如何设置？

问题描述

问 题

如题，请问下在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
    })
  ])
}

解决方案

如果楼主使用的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"
  }

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

这篇关于javascript - webpack2.2不想打包vue文件，如何设置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！