使用Webpack遇问题：找不到vender.js且无法在public目录生成HTML

Hey there, let's break down and fix the two problems you're hitting when running npm run dev:

1. Missing vendor.js File #

You mentioned adjusting the output in webpack.dll.js, but let's refine that setup to ensure your vendor bundle is generated and found correctly:

• Fix Path Resolution: String concatenation like __dirname + 'public/dist' can cause cross-platform path errors (e.g., Windows vs. Linux separators). Use path.resolve() for reliable, system-agnostic paths:

  // webpack.dll.js
  const path = require('path');
  
  output: {
    path: path.resolve(__dirname, 'public/dist'),
    filename: '[name].[chunkhash:8].js',
    library: '[name]_[chunkhash:8]'
  }
  

• Precompile Your DLL Bundle: The vendor file won't exist unless you explicitly build it first. Add a DLL build script to your package.json:

  "scripts": {
    "dll": "webpack --config webpack.dll.js",
    "dev": "webpack-dev-server --config webpack.dev.js"
  }
  

  Run npm run dll before npm run dev to generate the vendor bundle and its manifest file.
• Validate DllReferencePlugin Setup: In webpack.dev.js, make sure the plugin points to the correct manifest file and matches your project context:

  new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require('./public/dist/vendor-manifest.json')
  })
  

2. No HTML File Generated in Public Directory #

Let's get HtmlWebpackPlugin to output your HTML directly to the public folder:

• Adjust Output Path & Filename: If your webpack.dev.js output points to public/dist, tell the plugin to place the HTML one level up:

  // webpack.dev.js
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // Path to your source HTML template
      filename: '../index.html' // Outputs to public/index.html
    })
  ]
  

• Simplify Output Structure (Alternative): Set your webpack.dev.js output path directly to public to avoid navigating directories:

  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'dist/[name].js'
  }
  

  Then you can set filename: 'index.html' in HtmlWebpackPlugin to output directly to the public folder.
• Double-Check Plugin Inclusion: Ensure HtmlWebpackPlugin is properly required and added to the plugins array in webpack.dev.js—it's easy to overlook this when merging config files!

After making these tweaks, run npm run dll followed by npm run dev—your vendor bundle should be detected, and the HTML file will appear in the public directory as expected.

内容的提问来源于stack exchange，提问作者Abbott Liu