Не открывается собранный webpack(ом) проект vue.js

303
05 декабря 2017, 23:00

var path = require('path') 
var webpack = require('webpack') 
 
module.exports = { 
  entry: './src/main.js', 
  output: { 
    path: path.resolve(__dirname, './dist'), 
    publicPath: '/dist/', 
    filename: 'builder.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 
    }) 
  ]) 
}

Подскажите, я собрал проект VUE.js с помощью webpack. Получился файл builder.js. Но не получается его запустить. В чем возможна проблема? Или я как-то неправильно подключаю? В настройках webpack? Если возможная проблема в настройках webpack, то я прикреплю webpack.config

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> 
<body>
<script src="dist/builder.js"></script>
</body>
</html>
Answer 1

А вы <div id="app"></div> не забыли перед скриптом?

READ ALSO
Передача данных между компонентами angular 2

Передача данных между компонентами angular 2

Добрый день всемПеред мной стоит задача на angular 2

408
фильтр элементов массива по checkbox

фильтр элементов массива по checkbox

Есть многоуровневый массив элементовИз него вытаскиваю ip и порты потом беру все организации, которые есть в первоночальном массиве данных

229
Microsoft edge, syntax error

Microsoft edge, syntax error

Когда, начинаю передавать параметры с помощью функции, то выдает ошибку, в мазиле такого нету все работаетругается на if(http2){

367
Webpack разбиение бандла на N файлов

Webpack разбиение бандла на N файлов

В моем проекте необходимо настроить code splitting и разбить выходной bundlejs, генерируемый вебпаком, на несколько частей

269