Webpack 4.0——初学者指引

2023-10-22 08:56:33

Webpack 4.0 简介

Webpack 是一个用于模块化 JavaScript 应用开发的打包工具。它可以将 JavaScript、CSS 和其他文件打包成一个或多个 bundle 文件，以便在浏览器中加载。Webpack 4.0 是 Webpack 的最新版本，它带来了许多新特性和改进，例如：

支持 Tree Shaking：Tree Shaking 是一种优化 technique，它可以删除未使用的代码，从而减小 bundle 的体积。
支持 Code Splitting：Code Splitting 是一种将代码分割成多个 bundle 的技术，这可以减少初始加载时间并提高性能。
支持 Hot Module Replacement：Hot Module Replacement 是一种在不重新加载页面情况下更新代码的技术，这可以加快开发速度。

Webpack 4.0 使用入门

安装 Webpack

首先，需要安装 Webpack。可以使用以下命令通过 npm 安装 Webpack：

npm install webpack-cli -g

创建项目

接下来，创建一个项目目录。可以使用以下命令创建一个名为 webpack-demo 的项目目录：

mkdir webpack-demo
cd webpack-demo

初始化项目

在项目目录中，使用以下命令初始化一个新的 Webpack 项目：

webpack-init

这将创建一个新的 package.json 文件，其中包含 Webpack 的默认配置。

安装依赖

接下来，需要安装项目所需的依赖。可以使用以下命令安装项目所需的依赖：

npm install

这将安装项目所需的依赖，包括 Webpack、Babel、以及其他一些开发工具。

创建入口文件

接下来，需要创建一个入口文件。入口文件是 Webpack 打包的起点，它告诉 Webpack 从哪里开始打包。可以使用以下命令创建一个名为 index.js 的入口文件：

touch index.js

编写代码

接下来，就可以在 index.js 文件中编写代码了。可以使用以下代码作为示例：

console.log('Hello World!');

配置 Webpack

接下来，需要配置 Webpack。可以使用以下命令打开 Webpack 的配置文件 webpack.config.js：

vim webpack.config.js

在 webpack.config.js 文件中，可以配置 Webpack 的各种选项。可以使用以下代码作为示例：

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