使用vue单文件组件，使用webpack(v3.5.6)打包时报错 ?

Question

如题，以下是webpack.config.js的配置

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    app: './src/app.js',
    application:'./src/application.vue'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // plugins: [
  //   new HtmlWebpackPlugin({
  //     title: 'try!'
  //   })
  // ],
  devtool: 'inline-source-map',
  module: {
    rules: [{
      test: '/\.js$/',
      use: ['babel-core', 'babel-loader']
    }, {
      test: '/\.css$/',
      use: ['style-loader', 'css-loader']
    },{
      test:'/\.vue$/',
      use:['vue-loader','vue-style-loader','vue-html-loader']
    }]
  },
  devServer: {
    contentBase: './dist'
  }
}

这是package.josn配置

{
  "name": "demo4-try-vuewebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "css-loader": "^0.28.7",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.18.2",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^13.0.4",
    "vue-style-loader": "^3.0.1",
    "webpack": "^3.5.6",
    "webpack-dev-server": "^2.7.1"
  },
  "dependencies": {
    "vue": "^2.4.2"
  }
}

以下是webpack的报错

Answer 1

entry: {
    app: './src/app.js',
    application:'./src/application.vue'        //这里
},

不能用一个vue文件作为入口文件，因为这个时候webpack还不知道怎么加载.vue文件

再说了用vue文件做入口有什么意义？它只是一个组件。你坚持这么做的话可以在application.vue的同目录下建立一个application.js，里面这么写

import Application from './application.vue'
export default Application

然后把入口文件改成application.js