Webpack 4 实例教程：从搭建脚手架到优化部署

本文介绍了如何使用 Webpack 4 搭建前端工程项目的过程，并且详细讲解了如何进行优化部署，希望对正在学习前端的同学们有所帮助。

前置知识

  • 基本的 HTML、CSS、JS 知识
  • Node.js 知识

Webpack 简介

Webpack 是一个用于打包 Web 应用程序的工具，它的目的是将多个 JavaScript 文件打包成单个文件，以便于在网页中引用。

它还有一个非常重要的功能，就是可以使用各种插件和加载器来扩展其功能，例如使用插件来优化代码、压缩文件大小以及使用加载器来处理各种类型的文件。

Webpack4 安装

可以通过以下命令来安装 Webpack4：

npm install webpack webpack-cli --save-dev
  • webpack：Webpack 的核心模块。
  • webpack-cli：Webpack 的命令行界面。

在安装完成后，我们需要创建一个项目文件夹，并在该文件夹中创建一个 package.json 文件，用于在项目中管理依赖项。可以使用以下命令来创建一个 package.json 文件：

npm init -y

搭建脚手架

接下来我们需要搭建一个 Webpack 的脚手架，用于快速启动我们的项目。首先，我们需要创建一个 webpack.config.js 文件：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
};

这个配置文件表示，我们的入口文件是 src/index.js，打包后的文件会被放在 dist 目录下，文件名为 main.js。

在 package.json 文件中添加我们将要使用的命令：

"scripts": {
  "build": "webpack --config webpack.config.js"
},

现在，我们可以使用以下命令来构建项目：

npm run build

使用加载器处理 CSS

在我们的项目中，处理 CSS 文件也非常重要。Webpack 默认不支持 CSS 文件，我们需要使用加载器来帮助我们处理 CSS 文件。

安装所需要的加载器：

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

解释一波各个 Loader 和插件：

  • css-loader：在打包时处理 CSS 文件。
  • style-loader：将 CSS 插入 DOM 中，让 CSS 生效。
  • sass-loader：在打包时处理 Scss 文件。
  • sass：Scss 的编译器。
  • webpack：Webpack 的核心模块。

更新我们的 webpack.config.js 文件：

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

在我们应用的JS代码中引入CSS文件，如下：

import './main.scss';

现在，我们的 Webpack 就已经可以处理 CSS 文件了。

使用 Babel 处理 ES6

ES6 的语法已经成为了 Web 开发的事实标准，但是一些旧版本的浏览器并不支持 ES6。我们需要使用 Babel 将 ES6 转换成 ES5。

安装我们所需要的加载器：

npm install babel-loader @babel/core @babel/preset-env --save-dev

解释一波各个 Loader 和插件：

  • babel-loader：用于转换 ES6 代码。
  • @babel/core：Babel 的核心模块。
  • @babel/preset-env：提供了将 ES6 转换为 ES5 的规则。

更新我们的 webpack.config.js 文件：

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
};

现在，我们的 Webpack 已经可以将 ES6 转换成 ES5 了。

优化部署

在我们的项目中，我们需要考虑如何优化部署，以提高 Web 应用程序的加载速度。

压缩文件大小

Webpack 可以使用以下插件来压缩文件大小：

npm install --save-dev uglifyjs-webpack-plugin

在 webpack.config.js 中引入该插件，如下：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  optimization: {
    minimizer: [new UglifyJsPlugin()],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
};

现在，我们的 JavaScript 文件将被压缩。

分离 CSS

Webpack 可以使用以下插件来分离 CSS 文件：

npm install --save-dev mini-css-extract-plugin

在 webpack.config.js 中引入该插件，如下：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  optimization: {
    minimizer: [new UglifyJsPlugin()],
  },
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
};

将 MiniCssExtractPlugin.loader 添加到 SCSS 文件的加载器中，即可将所有 CSS 分离出来，我们可以通过以下命令来构建项目：

npm run build

总结

通过本文，我们了解了 Webpack4 的基本安装过程以及如何使用各种 Loader 和插件来处理我们的 Web 应用程序。

我们还介绍了如何优化部署以提高 Web 应用程序的性能，从而使用户能够更快速地加载我们的应用程序。

如果你正在学习前端开发，希望本篇文章能够对你有所帮助。

附上 webpack 配置文件：

const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  optimization: {
    minimizer: [new UglifyJsPlugin()],
  },
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
};

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b0d8edadd4f0e0ffa32a29

阅读全文

精选内容

相关推荐

    暂无