Webpack安装入门实例应用

2023-12-06 13:23:13

Webpack是一个现代前端开发工具，可以帮助我们管理项目中的各种资源，包括JavaScript、CSS、图片等。通过使用Webpack，我们可以轻松地将这些资源打包成一个或多个文件，以便在浏览器中加载。

安装Webpack

Webpack的安装非常简单，我们可以使用npm包管理器来安装它。首先，我们需要确保已经安装了Node.js和npm。如果没有安装，可以访问Node.js官网下载安装包。

安装好Node.js和npm后，我们可以通过以下命令安装Webpack：

npm install webpack webpack-cli -g

这条命令将把Webpack和Webpack命令行工具（Webpack-cli）全局安装到你的系统中。安装完成后，我们就可以在任何地方使用Webpack了。

入门实例应用

为了更好地理解Webpack是如何工作的，我们创建一个简单的入门实例应用。这个应用将包含一个HTML文件、一个JavaScript文件和一个CSS文件。

HTML文件

HTML文件是我们的入口文件，它将包含对JavaScript和CSS文件的引用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello, Webpack!</h1>
  <script src="script.js"></script>
</body>
</html>

JavaScript文件

JavaScript文件将包含我们的应用程序逻辑。

console.log('Hello, Webpack!');

CSS文件

CSS文件将包含我们的应用程序样式。

body {
  font-family: sans-serif;
}

h1 {
  color: blue;
}

配置Webpack

接下来，我们需要配置Webpack，以便它能够将我们的HTML、JavaScript和CSS文件打包成一个文件。

我们在项目根目录下创建一个名为webpack.config.js的文件，并在其中写入以下代码：

const path = require('path');

module.exports = {
  entry: './index.html',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};