Webpack 4从入门到精通：实操笔记

Webpack 4 实操笔记

[TOC]

Webpack 简介

Webpack 是一个现代化的前端构建工具，可以帮助您将各种资源（如 CSS、JavaScript 和图像）打包成一个或多个优化过的文件。Webpack 使用模块化的方式来组织代码，您可以将代码拆分成多个模块，然后通过 webpack 将这些模块打包成一个或多个文件。Webpack 还提供了很多其他的功能，如代码压缩、代码分割、代码热更新等。

搭建环境

Webpack 的搭建非常简单，首先需要安装 Node.js 和 npm，然后全局安装 webpack。

# 安装 Node.js 和 npm
npm install -g nodejs
npm install -g npm

# 全局安装 webpack
npm install -g webpack

安装完成后，您就可以在任何地方使用 webpack 命令了。

配置基本框架

Webpack 的基本配置非常简单，只需要创建一个名为 webpack.config.js 的文件，然后在其中配置 webpack 的选项。

module.exports = {
  entry: './src/index.js',
  output: {
    path: './dist',
    filename: 'bundle.js'
  }
};

在这个配置文件中，我们指定了 webpack 的入口文件和输出文件。入口文件是 webpack 打包的源文件，输出文件是 webpack 打包后的结果文件。

全局安装

Webpack 可以全局安装，也可以局部安装。全局安装是指将 webpack 安装到系统中，这样您就可以在任何地方使用 webpack 命令。局部安装是指将 webpack 安装到项目的 node_modules 文件夹中，这样您只能在该项目中使用 webpack 命令。

全局安装 webpack 的命令如下：

npm install -g webpack

局部安装 webpack 的命令如下：

npm install webpack --save-dev

局部安装配置

如果您选择局部安装 webpack，那么您需要在项目的 package.json 文件中配置 webpack。

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^4.0.0"
  }
}

在这个配置文件中，我们在 scripts 字段中配置了两个脚本命令：start 和 build。start 命令用于启动 webpack 的开发服务器，build 命令用于打包 webpack。

基础配置

Webpack 的基础配置包括以下几项：

• 入口文件
• 输出文件
• 加载器
• 插件

入口文件是 webpack 打包的源文件，输出文件是 webpack 打包后的结果文件。加载器用于将不同的类型的文件（如 CSS、JavaScript 和图像）转换为 webpack 可以识别的格式。插件用于扩展 webpack 的功能，如代码压缩、代码分割和代码热更新等。

简化命令行配置

Webpack 提供了多种简化命令行配置的方式，您可以使用这些方式来简化 webpack 的命令行配置。

• 使用 webpack-cli
• 使用 webpack-chain
• 使用 webpackbar

本地服务器

Webpack 可以启动一个本地服务器，以便您在浏览器中预览您的项目。要启动本地服务器，您可以使用 webpack-dev-server 命令。

webpack-dev-server --open

加载 CSS

Webpack 可以加载 CSS 文件，您可以使用 style-loader 和 css-loader 来加载 CSS 文件。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

在这个配置文件中，我们使用 style-loader 和 css-loader 来加载 CSS 文件。style-loader 将 CSS 文件注入到 HTML 文档中，css-loader 将 CSS 文件转换为 webpack 可以识别的格式。