为什么要用 webpack 和 babel？

开发环境的前端代码重在易于阅读和编写，生产环境的前端代码追求更快地运行，所以需要通过前端构建工具将开发环境的前端代码通过混淆压缩打包构建成生产环境的前端代码。

webpack 是众多前端构建工具的一种，主要实现以下功能：

  • 压缩代码
    将JS、CSS代码混淆压缩，让代码体积更小，加载更快
  • 编译语法
    将 Less、Sass、ES6、TypeScript 等浏览器可能不兼容的语法编译成浏览器支持的语法，如使用Babel编译ES6语法
    CSS和JS的模块化语法，有的浏览器也不兼容，需使用webpack、Rollup等进行处理。

安装 webpack 和 babel

安装 node.js

创建文件夹 webpack_demo

初始化项目

npm init -y

安装 webpack

为提升安装速度，此处使用了 cnpm （若无法使用，先执行 npm i cnpm 安装 cnpm ）

cnpm install webpack webpack-cli -D

安装 babel

用于将 ES6 语法编译成 ES5

cnpm install @babel/core @babel/preset-env babel-loader -D

新建文件 .babelrc

添加 babel 相关的配置

{
    "presets": ["@babel/preset-env"],
}

安装 webpack-dev-server

用于启动服务

cnpm install webpack-dev-server

安装 html-webpack-plugin

用于解析 html

cnpm install html-webpack-plugin -D

新建文件 webpack.config.js

开发环境 webpack 的配置文件（具体含义详见代码注释）

// 导入js包 -- path 用于拼接文件路径
const path = require("path");
// 导入插件 -- html-webpack-plugin 用于打包 html
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 构建模式，默认值为 production (会压缩代码并进行各种优化，如 tree shaking)，还可设置为 development，方便调试
  mode: "development",
  // 指定入口文件为 src/index
  entry: path.join(__dirname, "src", "index"),
  // 将js文件打包到 dist/bundle.js 中
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist"),
  },
  // 模块
  module: {
    // 规则
    rules: [
      {
        // 正则匹配所有以.js结尾的文件
        test: /\.js$/,
        // 使用 babel-loader 插件
        loader: ["babel-loader"],
        // 搜索 src 文件夹中的文件
        include: path.join(__dirname, "src"),
        // 不搜索 node_modules 中的文件
        exclude: /node_modules/,
      },
    ],
  },
  //  配置插件
  plugins: [
    // 使用插件 html-webpack-plugin 将 src/index.html 打包到 dist/index.html 中
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src", "index.html"),
      filename: "index.html",
    }),
  ],
  // 开发环境服务配置 —— 以下配置的含义：自动打开浏览器，访问 localhost:3000/index.html 渲染 dist/index.html
  devServer: {
    // 端口
    port: 3000,
    // 路径
    contentBase: path.join(__dirname, "dist"), // 根目录
    // 是否自动打开浏览器
    open: true,
  },
}

新建文件 webpack.prod.js

打包构建生产环境代码时的 webpack 配置文件（具体含义详见代码注释）

// 导入js包 -- path 用于拼接文件路径
const path = require("path");
// 导入插件 -- html-webpack-plugin 用于打包 html
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 构建模式，默认值为 production (会压缩代码并进行各种优化，如 tree shaking)，还可设置为 development，方便调试
  mode: "production",
  // 指定入口文件为 src/index
  entry: path.join(__dirname, "src", "index"),
  // 将js文件打包到 dist/bundle.js 中
  output: {
    // 添加了 [contenthash] ，用于打包时，根据代码内容生成一个 hash 字符串，若代码没发生改变，则这个 hash 字符串不会改变，利于命中浏览器缓存，提升性能
    filename: "bundle.[contenthash].js",
    path: path.join(__dirname, "dist"),
  },
  // 模块
  module: {
    // 规则
    rules: [
      {
        // 正则匹配所有以.js结尾的文件
        test: /\.js$/,
        // 使用 babel-loader 插件
        loader: ["babel-loader"],
        // 搜索 src 文件夹中的文件
        include: path.join(__dirname, "src"),
        // 不搜索 node_modules 中的文件
        exclude: /node_modules/,
      },
    ],
  },
  //  配置插件
  plugins: [
    // 使用插件 html-webpack-plugin 将 src/index.html 打包到 dist/index.html 中
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src", "index.html"),
      filename: "index.html",
    }),
  ],
};

新建文件 src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>任意内容</p>
</body>
</html>

新建文件 src/index.js

// ES6语法范例 —— 箭头函数
const sum = (a, b) => a + b
const result = sum(10, 20)
console.log(result)

在 package.json 的 scripts 中添加

  • dev 默认使用的 webpack.config.js 的配置，用于本地开发启动项目
  • build 明确指出使用 webpack.prod.js 的配置，用于打包构建生产代码
"build": "webpack --config webpack.prod.js",
    "dev": "webpack-dev-server"

本地运行项目

npm run dev

在浏览器中查看源码，可见 ES6 语法已编译为 ES5 语法

打包项目

npm run build

查 dist 文件中的代码，可见 ES6 语法已编译为 ES5 语法