无法让 webpack 在客户端与 Babel 一起工作答案

【问题标题】：Can't get webpack to work client-side with Babel无法让 webpack 在客户端与 Babel 一起工作
【发布时间】：2017-06-08 09:57:49
【问题描述】：

Full Code here

我正在尝试使用 express/handlebars 实现 Vue Single File Components。根据那个页面，我去安装了 Webpack（然后是 Babel）。

从表面上看，Webpack 是有效的：

webpack built 770ca5c82f424a41909d in 285ms
Hash: 770ca5c82f424a41909d
Version: webpack 1.14.0
Time: 285ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.84 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 428 bytes [rendered]
    [0] ./public/client.js 428 bytes {0} [built]
webpack: bundle is now VALID.

这是我的 index.html

<html>
<head>
    <title>writing.io</title>

    <script src="public/bundle.js"></script>
</head>

<body>
    <script>
    import Vue from 'vue';
    import Home from './Home.vue';
    import Game from './Game.vue';

    new Vue({
        el: '#app',
        render: h => h(Home)
    })
    ...

我在import Vue from 'vue'; 上收到unexpected token import（现在“应该”与 Babel 一起使用）。

尝试用var Vue = require('Vue').Vue 替换该行，但随后无法识别require。

我错过了什么？

【问题讨论】：

我看不到你的 webpack 文件中定义的 Vue 加载器——因为我知道单文件组件需要它
@BelminBedak - 我正在努力让它工作......我发现是一个使用vue-cli 的完整生成器。希望适应我当前的项目，而不是从头开始......仍然不确定如何使用该加载程序。
看看我的示例 repo webpack.config.js 文件，你会看到如何初始化 vue-loader（确保你已经通过 npm 安装了它），也看看 .babelrc 文件- github.com/bedakb/vuewp
顺便说一句，我什至在你的 packages.json 中都看不到 vue
@BelminBedak 谢谢，就像一个魅力（嗯，现在遇到其他错误，但 this 似乎已解决）。

标签： webpack vue.js babeljs

【解决方案1】：

首先我看不到 vue-loader 定义到你的 webpack 文件中，所以考虑将它添加为加载器，因为当你想使用单文件组件时它是必需的。

var path = require('path');

module.exports = {
  entry: './public/client.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/public'
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
      { test: /\.vue$/, loader: 'vue' }
    ]
  }
};

同时确保你已经通过 npm/yarn 在你的应用中安装了 vue-loader。

最后确保你安装了 VueJS

【讨论】：

嗯，实际上我修复了一堆依赖错误，我的 bundle.js 现在更大了（应该是），但我又回到了原来的错误 - 在我的 .vue 文件中，两者都没有import 和 require 均已定义。
嗯，让我研究一下，需要一些时间来看看可能的问题。
好吧，我想我找到了——所以你有 client.js 作为入口文件，但是我看不到任何与 vue 相关的导入，所以 webpack 在这里看不到 vue——考虑一下将内容从 index.html（js 部分）移动到 client.js - 看看我是怎么做到的 github.com/bedakb/vuewp/blob/master/public/app/themes/vuewp/app/… - 对我来说这是 webpack 中的入口文件
是的，我同时发现了同样的事情。谢谢一百万！