title: Module not found: Error: Can’t resolve ‘./router’ in ‘C:\HK\Vue-learning\testapp1\src’
body: <p>I am new to Vue js. I have installed a basic vue template and added a web pack for bundling. But when I use “webpack --config webpack.config.js” to build the app I am getting the following error.</p>
  
  <p>**ERROR in ./src/main.ts
  Module not found: Error: Can’t resolve ‘./router’ in ‘C:\HK\Vue-learning\testapp1\src’
  @ ./src/main.ts 2:0-30 7:12-18</p>
  
  <p>ERROR in ./src/main.ts
  Module not found: Error: Can’t resolve ‘./store’ in ‘C:\HK\Vue-learning\testapp1\src’
  @ ./src/main.ts 3:0-28 8:11-16</p>
  
  <p>ERROR in Error: Child compilation failed:
  Entry module not found: Error: Can’t resolve ‘C:\HK\Vue-learning\testapp1\static\index.html’ in ‘C:\HK\Vue-learning\testapp1’:
  Error: Can’t resolve ‘C:\HK\Vue-learning\testapp1\static\index.html’ in ‘C:\HK\Vue-learning\testapp1’</p>
  
  <p>compiler.js:79 childCompiler.runAsChild
  [testapp1]/[html-webpack-plugin]/lib/compiler.js:79:16</p>
  
  <p>Compiler.js:343 compile
  [testapp1]/[webpack]/lib/Compiler.js:343:11</p>
  
  <p>Compiler.js:681 hooks.afterCompile.callAsync.err
  [testapp1]/[webpack]/lib/Compiler.js:681:15</p>
  
  <p>Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [testapp1]/[tapable]/lib/Hook.js:154:20</p>
  
  <p>Compiler.js:678 compilation.seal.err
  [testapp1]/[webpack]/lib/Compiler.js:678:31</p>
  
  <p>Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [testapp1]/[tapable]/lib/Hook.js:154:20</p>
  
  <p>Compilation.js:1423 hooks.optimizeAssets.callAsync.err
  [testapp1]/[webpack]/lib/Compilation.js:1423:35</p>
  
  <p>Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [testapp1]/[tapable]/lib/Hook.js:154:20</p>
  
  <p>Compilation.js:1414 hooks.optimizeChunkAssets.callAsync.err
  [testapp1]/[webpack]/lib/Compilation.js:1414:32</p>
  
  <p>index.js:321 taskRunner.run
  [testapp1]/[terser-webpack-plugin]/dist/index.js:321:9</p>
  
  <p>TaskRunner.js:48 TaskRunner.run
  [testapp1]/[terser-webpack-plugin]/dist/TaskRunner.js:48:7</p>
  
  <p>index.js:227 TerserPlugin.optimizeFn
  [testapp1]/[terser-webpack-plugin]/dist/index.js:227:18</p>
  
  <p>Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [testapp1]/[tapable]/lib/Hook.js:154:20</p>
  
  <p>Compilation.js:1409 hooks.additionalAssets.callAsync.err
  [testapp1]/[webpack]/lib/Compilation.js:1409:36</p>
  
  <p>Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [testapp1]/[tapable]/lib/Hook.js:154:20</p>
  
  <p>Compilation.js:1405 hooks.optimizeTree.callAsync.err
  [testapp1]/[webpack]/lib/Compilation.js:1405:32</p>
  
  <p>Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [testapp1]/[tapable]/lib/Hook.js:154:20</p>
  
  <p>Compilation.js:1342 Compilation.seal
  [testapp1]/[webpack]/lib/Compilation.js:1342:27</p>
  
  <p>Compiler.js:675 compilation.finish.err
  [testapp1]/[webpack]/lib/Compiler.js:675:18</p>
  
  <p>Compilation.js:1261 hooks.finishModules.callAsync.err
  [testapp1]/[webpack]/lib/Compilation.js:1261:4</p>
  
  <p>Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [testapp1]/[tapable]/lib/Hook.js:154:20</p>
  
  <p>Compilation.js:1253 Compilation.finish
  [testapp1]/[webpack]/lib/Compilation.js:1253:28</p>
  
  <p>Compiler.js:672 hooks.make.callAsync.err
  [testapp1]/[webpack]/lib/Compiler.js:672:17</p>
  
  <p>Compilation.js:1185 _addModuleChain
  [testapp1]/[webpack]/lib/Compilation.js:1185:12</p>
  
  <p>Compilation.js:1044 errorAndCallback.bail.err
  [testapp1]/[webpack]/lib/Compilation.js:1044:6</p>
  
  <p>Compilation.js:1075 moduleFactory.create
  [testapp1]/[webpack]/lib/Compilation.js:1075:14</p>
  
  <p>NormalModuleFactory.js:401 factory
  [testapp1]/[webpack]/lib/NormalModuleFactory.js:401:22</p>
  
  <p>Child html-webpack-plugin for “index.html”:</p>
  
  <p>ERROR in Entry module not found: Error: Can't resolve 'C:\HK\Vue-learning\testapp1\static\index.html' in 'C:\HK\Vue-learning\testapp1'
  npm ERR! code ELIFECYCLE
  npm ERR! errno 2
  npm ERR! testapp1@0.1.0 build:prod: webpack --config webpack.config.js
  npm ERR! Exit status 2
  npm ERR!
  npm ERR! Failed at the testapp1@0.1.0 build:prod script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.</p>
  
  <p>npm ERR! A complete log of this run can be found in:
  npm ERR! C:\Users\AppData\Roaming\npm-cache_logs\2020-02-17T04_54_32_639Z-debug.log**</p>
  
  <pre><code> webpack.config.js
  ------------------------
  const { VueLoaderPlugin } = require('vue-loader');
  const path = require('path');
  
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  const env = process.env.NODE_ENV;
  
  const config = {
  entry: path.join(__dirname, 'src', 'main.ts'),
  mode: env,
  output: {
  publicPath: '/build',
  },
  optimization: {
  splitChunks: {
    // Must be specified for HtmlWebpackPlugin to work correctly.
    // See: https://github.com/jantimon/html-webpack-plugin/issues/882
    chunks: 'all',
  },
  },
  module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
    },
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: "babel-loader",
      exclude: /node_modules/,
  },
  {
      test: /\.ts$/,
      loader: "ts-loader",
      options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true
      }
  },
  {
      test: /\.css$/,
      loader: "css-loader"
  }
  ],
  },
  plugins: [
  new VueLoaderPlugin(),
  new HtmlWebpackPlugin({
    filename: path.join(__dirname, 'dist', 'index.html'),
    template: path.join(__dirname, 'static', 'index.html'),
    inject: true,
  }),
  ],
   };
  
  module.exports = config;'
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>package.json
  
  {
  “name”: “testapp1”,
  “version”: “0.1.0”,
  “private”: true,
  “scripts”: {
  “serve”: “vue-cli-service serve”,
  “build”: “vue-cli-service build”,
  “build:prod”: “webpack --config webpack.config.js”,
  “lint”: “vue-cli-service lint”
  },
  “dependencies”: {
  “vue”: “^2.6.11”,
  “vue-class-component”: “^7.2.2”,
  “vue-property-decorator”: “^8.3.0”,
  “vue-router”: “^3.1.5”,
  “vuex”: “^3.1.2”
  },
  “devDependencies”: {
  “@typescript-eslint/eslint-plugin”: “^2.18.0”,
  “@typescript-eslint/parser”: “^2.18.0”,
  “@vue/cli-plugin-eslint”: “~4.2.0”,
  “@vue/cli-plugin-router”: “~4.2.0”,
  “@vue/cli-plugin-typescript”: “~4.2.0”,
  “@vue/cli-plugin-vuex”: “~4.2.0”,
  “@vue/cli-service”: “~4.2.0”,
  “@vue/eslint-config-standard”: “^5.1.0”,
  “@vue/eslint-config-typescript”: “^5.0.1”,
  “eslint”: “^6.7.2”,
  “eslint-plugin-import”: “^2.20.1”,
  “eslint-plugin-node”: “^11.0.0”,
  “eslint-plugin-promise”: “^4.2.1”,
  “eslint-plugin-standard”: “^4.0.0”,
  “eslint-plugin-vue”: “^6.1.2”,
  “typescript”: “~3.7.5”,
  “vue-template-compiler”: “^2.6.11”,
  “vue-webpack”: “^1.10.2”,
  “webpack-cli”: “^3.3.11”
  },
  “eslintConfig”: {
  “root”: true,
  “env”: {
  “node”: true
  },
  “extends”: [
  “plugin:vue/essential”,
  “@vue/standard”,
  “@vue/typescript/recommended”
  ],
  “parserOptions”: {
  “ecmaVersion”: 2020
  },
  “rules”: {}
  },
  “browserslist”: [
  “&gt; 1%”,
  “last 2 versions”
  ]
  }
  </code></pre>