找不到输入模块：无法解析“ ./assets/app.js”

Question

我正在尝试使用Webpack，但出现错误

$ node_modules/.bin/webpack
Hash: d1aee5dc037997fae5a6
Version: webpack 3.4.1
Time: 31ms

ERROR in Entry module not found: Error: Can't resolve './assets/app.js' in 'D:\template\src'

这是我第一次使用webpack。

这是我的剧本

const path = require('path');
const webpack = require('webpack');
module.exports = {
  context: path.resolve(__dirname, './src'),
  entry: {
    app: './assets/app.js',
  },
  output: {
    path: path.resolve(__dirname, './node_modules'),
    filename: '[name].bundle.js',
  },
};

我的文件夹结构

我想我在以下context: path.resolve(__dirname, './src'),错误context: path.resolve(__dirname, './src'),我只是不知道用什么替换了那部分。

我已经阅读过此https://webpack.github.io/docs/tutorials/getting-started并且已经尝试使用google搜索有关如何使用webpack的信息。 任何解决方案吗？

  "devDependencies": {
    "buefy": "",
    "bulma": "",
    "vue": "^2.1.10",
    "webpack": "^3.4.1"
  },

Answer 1

context选项定义了用于解析webpack配置中任何内容的基本目录。 您将./src/用作基本目录，因此./assets/app.js在src目录中解析（从技术上讲是./src/assets/app.js ）。

如果没有提供context ，则webpack将使用当前目录。 您可以从配置context完全删除context 。 您可能还需要输出捆绑到一个目录下，如./dist ，而不是到./node_modules 。 您的配置如下。

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: './assets/app.js',
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].bundle.js',
  },
};

您在看webpack 1文档，但是应该使用更新得多的文档，这些文档要好得多： Webpack-Getting Started 。