Ubuntu 18.04系统安装Webpack的详细步骤

本文目录导读：

1. <"http://#id1" title="安装Node.js和npm" "">安装Node.js和npm
2. <"http://#id2" title="验证安装" "">验证安装
3. <"http://#id3" title="全局安装Webpack" "">全局安装Webpack
4. <"http://#id4" title="验证Webpack安装" "">验证Webpack安装
5. <"http://#id5" title="创建Webpack配置文件" "">创建Webpack配置文件
6. <"http://#id6" title="创建项目文件和目录结构" "">创建项目文件和目录结构
7. <"http://#id7" title="配置加载器" "">配置加载器
8. <"http://#id8" title="编写代码和构建项目" "">编写代码和构建项目

在Ubuntu 18.04系统中安装Webpack需要经过几个步骤，Webpack是一个强大的模块打包器，它能够将各种资源，如JavaScript、CSS、图片等打包成一个或多个bundle，以下是详细的安装步骤：

安装Node.js和npm

你需要在Ubuntu上安装Node.js和npm（Node包管理器），你可以使用以下命令来安装：

sudo apt update
sudo apt install nodejs npm

验证安装

安装完成后，你可以通过运行以下命令来验证Node.js和npm是否成功安装：

node -v
npm -v

如果成功安装，它们将显示相应的版本号。

全局安装Webpack

接下来，你可以使用npm来全局安装Webpack，运行以下命令：

npm install -g webpack webpack-cli

这将全局安装Webpack和webpack-cli。

验证Webpack安装

安装完成后，你可以通过运行以下命令来验证Webpack是否成功安装：

webpack -v

如果成功安装，它将显示Webpack的版本号。

创建Webpack配置文件

在项目根目录下创建一个名为webpack.config.js的文件，这个文件用于配置Webpack的行为，你可以配置入口点、输出文件和加载器等，以下是一个简单的示例：

const path = require('path');
module.exports = {
  entry: './src/index.js', // 入口文件路径
  output: { // 输出配置
    path: path.resolve(__dirname, 'dist'), // 输出目录路径
    filename: 'bundle.js', // 打包后的文件名
  },
};

创建项目文件和目录结构

在你的项目根目录下，创建一个src目录，用于存放源代码，在src目录下创建一个index.js文件作为入口文件，你还可以根据需要创建其他文件和目录，你可以创建一个images目录来存放图片资源。

配置加载器

加载器用于处理非JavaScript文件，如CSS、图片等，要使用加载器，你需要在Webpack配置文件中添加相应的配置，要处理CSS文件，你可以使用style-loader和css-loader，通过npm安装它们：

npm install --save-dev style-loader css-loader

在Webpack配置文件中添加以下内容：

module: {
  rules: [
    {
      test: /\.css$/, // 匹配CSS文件
      use: ['style-loader', 'css-loader'], // 使用style-loader和css-loader处理CSS文件
    },
  ],
},

编写代码和构建项目

现在你可以开始编写代码了，在src目录下编写你的JavaScript、CSS和其他资源文件，当你准备好构建项目时，运行以下命令：

webpack --config webpack.config.js // 使用webpack和webpack.config.js构建项目

这将根据Webpack配置文件的设置构建你的项目，并将结果输出到dist目录下的bundle.js文件中，你可以在浏览器中打开bundle.js来查看结果。