在Webpack 3.12.0版本上运行编译出Hello World

叶玖洛·星尘2024-10-10

新建一个项目文件夹

今天这个项目与之前那个项目可以分开，给这个项目新建一个文件夹在本文件夹内打开终端

编辑文件

首先在这个项目根目录下创建webpack.config.js文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'bundle.js', // 输出文件名
    path: path.resolve(__dirname, 'dist') // 输出路径
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Hello World', // 生成的HTML文件的标题
      filename: 'index.html', // 输出的HTML文件名
      template: 'src/index.html' // 模板文件
    })
  ]
};

根路径下新建一个src目录，并在src目录内新建index.html、index.js两个文件。

index.html这样写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

index.js这样写：

document.getElementById('app').innerHTML = 'Hello World';

写完后保存这些文件。

然后此时你的目录结构应该是这样的：

项目文件夹
│  webpack.config.js(项目根目录下的文件)
│
└─src(目录)
        index.html(src下的文件)
        index.js(src下的文件)

相关依赖安装

首先版本问题：确保你的 webpack 和 webpack-cli 版本兼容。如果你正在使用Webpack 3，你可能需要安装 webpack-cli 的一个旧版本。

npm install --save-dev webpack-cli@3.3.12

安装与 webpack 4 兼容的 html-webpack-plugin 版本：如果您不能升级 webpack，您可以选择安装一个与 webpack 4 兼容的 html-webpack-plugin 版本。例如，html-webpack-plugin 的 4.x 版本与 webpack 4 兼容。

npm install html-webpack-plugin@4 --save-dev

通过这些步骤，你应该能够解决 webpack-cli 模块找不到的问题。如果问题依旧，请检查你的项目结构和npm配置，确保一切设置正确。

运行Webpack：

安装 webpack-cli 后，运行Webpack：

npx webpack

编译完成后应该会生成一个dist目录。

里面会有一个编译完成的index.html文件，打开它，浏览器里面输出如下内容就可以了。