代码之家  ›  专栏  ›  技术社区  ›  timpone

如何不将vue源代码包含到网页包构建中

  •  0
  • timpone  · 技术社区  · 6 年前

    https://codeburst.io/building-your-very-first-component-with-vuejs-21b4a2f6a15a ) :

    $ npm install -g vue-cli
    $ vue init webpack-simple acme-app
    $ cd acme-app
    $ npm install
    $ npm run dev
    

    问题是我如何编辑webpack.config.js以便不包含vue源代码(因为我们已经从cdn提供了vue源代码)?

    这是我的webpack.config.js-我需要编辑什么才能从构建中删除vue源代码

    var path = require('path')
    var webpack = require('webpack')
    
    module.exports = {
      entry: './src/main.js',
      output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build-jt.js'
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              'vue-style-loader',
              'css-loader'
            ],
          },
          {
            test: /\.scss$/,
            use: [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
          },
          {
            test: /\.sass$/,
            use: [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ],
          },
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
              loaders: {
                // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                // the "scss" and "sass" values for the lang attribute to the right configs here.
                // other preprocessors should work out of the box, no loader config like this necessary.
                'scss': [
                  'vue-style-loader',
                  'css-loader',
                  'sass-loader'
                ],
                'sass': [
                  'vue-style-loader',
                  'css-loader',
                  'sass-loader?indentedSyntax'
                ]
              }
              // 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.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
      },
      devServer: {
        historyApiFallback: true,
        noInfo: true,
        overlay: 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 回复  |  直到 6 年前
        1
  •  3
  •   Max Sinev    6 年前

    你需要定义 externals 节并删除webpack配置中的vue别名:

    //...
    externals: {
        // define module 'vue' which will point to window.Vue in result bundle
        vue: 'Vue'
    },
    resolve: {
        alias: {
          // remove this alias
          //'vue$': 'vue/dist/vue.esm.js'
        },
    },
    //...
    

    文件: Externals

    推荐文章