从零开始 Webpack 持续集成搭建-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一个现代化的前端构建工具，它可以将多个 JavaScript 文件打包成一个文件，并且支持处理 CSS、图片等资源。在前端开发中，Webpack 已经成为了不可或缺的工具。本文将介绍如何从零开始搭建 Webpack，并且使用持续集成工具来自动化构建和部署。

安装 Webpack

首先，我们需要安装 Webpack。可以通过 npm 来进行安装：

npm install webpack webpack-cli --save-dev

安装完成后，我们就可以使用 Webpack 来打包我们的代码了。下面是一个简单的 Webpack 配置文件示例：

// javascriptcn.com 代码示例
const path = require('path');

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

这个配置文件指定了入口文件为 src/index.js，输出文件为 dist/bundle.js。我们可以使用 npx webpack 命令来执行打包操作。

配置 Babel

在实际项目中，我们通常需要使用 ES6、ES7 等语法，而不是仅仅使用 ES5。但是，不是所有的浏览器都支持这些新的语法，因此我们需要使用 Babel 将新的语法转换成 ES5 语法。下面是一个简单的 Babel 配置文件示例：

// javascriptcn.com 代码示例
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: ['last 2 versions'],
        },
      },
    ],
  ],
};

这个配置文件指定了 Babel 的预设为 @babel/preset-env，同时指定了转换的目标浏览器为最近的两个版本。我们可以使用 npm install @babel/core @babel/preset-env --save-dev 命令来安装 Babel 和预设。

配置持续集成

持续集成是指在代码提交到版本控制系统后，自动执行构建、测试和部署等操作。这样可以让开发人员专注于编写代码，而不需要手动执行这些操作。在本文中，我们将使用 Travis CI 来进行持续集成。

首先，我们需要在 Travis CI 上注册账号，并将代码仓库与 Travis CI 关联。然后，我们需要在仓库根目录下创建一个 .travis.yml 文件，这个文件包含了 Travis CI 的配置信息。下面是一个简单的 .travis.yml 文件示例：

// javascriptcn.com 代码示例
language: node_js
node_js:
  - '14'
cache:
  directories:
    - node_modules
script:
  - npm run build
deploy:
  provider: pages
  skip_cleanup: true
  github_token: $GITHUB_TOKEN
  local_dir: dist
  on:
    branch: master

这个配置文件指定了使用 Node.js 14 来运行构建脚本，并且使用缓存来加速构建。npm run build 命令会执行 Webpack 打包操作。deploy 部分指定了部署到 GitHub Pages，并且指定了本地的构建目录为 dist。$GITHUB_TOKEN 是一个环境变量，需要在 Travis CI 上进行配置。

示例代码

下面是一个完整的示例代码，包含了 Webpack 和 Babel 的配置文件，以及持续集成的配置文件。

`webpack.config.js`

// javascriptcn.com 代码示例
const path = require('path');

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

`.babelrc`

// javascriptcn.com 代码示例
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: ['last 2 versions'],
        },
      },
    ],
  ],
};

`.travis.yml`

// javascriptcn.com 代码示例
language: node_js
node_js:
  - '14'
cache:
  directories:
    - node_modules
script:
  - npm run build
deploy:
  provider: pages
  skip_cleanup: true
  github_token: $GITHUB_TOKEN
  local_dir: dist
  on:
    branch: master

总结

本文介绍了如何从零开始搭建 Webpack，并且使用持续集成工具来自动化构建和部署。通过本文的学习，读者可以掌握 Webpack 和 Babel 的基本配置，以及如何使用 Travis CI 进行持续集成。这些知识对于前端开发人员来说都非常重要，希望本文对读者有所帮助。

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