Vue -webpack:等到捆绑包完成:/

时间:2019-09-16 20:44:39

标签: javascript webpack frontend

当我执行npm start时,我有:

Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
wait until bundle finished: /

就这些了。控制台中仅此而已。编译不会发生。当我去本地主机时,我有无尽的加载页面。日志文件为空。 我尝试从那里Angular 4 - webpack: wait until bundle finished: /执行建议,但对我而言无效。

package.json

{
  "name": "ui",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "babel-loader": "^8.0.6",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.40.2",
    "webpack-cli": "^3.3.8",
    "webpack-dev-server": "^3.8.1"
  },
  "dependencies": {
    "lodash": "^4.17.15",
    "vue": "^2.6.10",
    "vue-resource": "^1.5.1"
  }
}

webpack.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development',
  entry: path.join(__dirname, 'src', 'main', 'resources', 'static', 'js', 'main.js'),
  devtool: 'inline-source-map',
  devServer: {
        contentBase: './dist',
        openPage: ''
    },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  resolve: {
      modules: [
          path.join(__dirname, 'src', 'main', 'resources', 'static', 'js'),
          path.join(__dirname, 'node_modules'),
      ],
  }
};

src层次结构

   src
    ├── main
    │   │                   
    │   │                   
    │   └── resources
    │       └── static
    │           ├── index.html
    │           └── js
    │               ├── components
    │               │   └── response
    │               │       ├── parent.vue
    │               │       └── sheetData.vue
    │               ├── main.js
    │               └── page
    │                   └── App.vue
    └── test
        └── java

0 个答案:

没有答案