使用 Webpack 管理 PWA 项目-JavaScript中文网-JavaScript教程资源分享门户

作为一名前端开发工程师，你一定已经听说过 PWA 即 Progressive Web Apps，它是一种全新的 Web 应用程序，它可以像原生应用程序一样在移动设备和桌面浏览器中提供快速而平滑的用户体验。利用 Service Worker 技术，PWA 还具有离线缓存能力，可以在没有互联网连接的情况下仍然可以运行。

在前端开发中，Webpack 已经成为了一个广泛使用的构建工具。它在管理 PWA 项目方面有很多优势，包括代码分割、优化资源加载、提供多种插件等。在本文中，我们将介绍如何使用 Webpack 4 管理 PWA 项目，帮助你更好的进行开发和构建。

配置 Webpack

安装 Webpack 和依赖

首先我们需要安装 Webpack 和相关依赖，具体如下：

npm install webpack webpack-dev-server webpack-cli webpack-merge path clean-webpack-plugin html-webpack-plugin workbox-webpack-plugin sass-loader css-loader style-loader postcss-loader babel-loader @babel/core @babel/preset-env @babel/preset-react file-loader

我们安装的每个库的作用分别解释如下：

webpack：核心打包工具
webpack-dev-server：开发时服务端，实现 HMR（热更新）
webpack-cli：Webpack 命令行工具
webpack-merge：合并配置文件
path：路径工具
clean-webpack-plugin：清理 build 目录
html-webpack-plugin：生成 index.html 文件
workbox-webpack-plugin：PWA 功能插件，帮我们生成 service-worker.js 等文件
sass-loader、css-loader、style-loader、postcss-loader：可以处理 CSS 和样式文件
file-loader：解析图片、字体等

我们还需要安装 core-js 和 regenerator-runtime，让我们能够使用 ES2015+ 的语法来编写 JavaScript 代码。具体如下：

npm install core-js regenerator-runtime

配置 Webpack

接下来，我们需要创建以下目录和文件：

mkdir pwa-webpack-app
cd pwa-webpack-app
mkdir -p src/{components,styles}
touch src/index.js src/App.js src/styles/index.scss

其中 src/index.js 和 src/App.js 分别是入口文件和应用程序组件文件，src/styles/index.scss 是样式文件。

然后创建 webpack.config.js 文件，我们的 Webpack 配置文件就在这里定制：

// www.javascriptcn.com code example
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');

const isDevelopment = process.env.NODE_ENV === 'development';

module.exports = {
  mode: isDevelopment ? 'development' : 'production',

  entry: ['core-js', 'regenerator-runtime', './src/index.js'],

  output: {
    path: path.resolve(__dirname, 'build'),
    filename: isDevelopment ? '[name].[hash].js' : '[name].[contenthash:8].js',
    publicPath: '/',
  },

  devServer: {
    contentBase: path.join(__dirname, 'build'),
    historyApiFallback: true,
    compress: true,
    hot: true,
    port: 3000,
    open: true,
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.s?[ac]ss$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
      {
        test: /\.svg$/,
        use: ['@svgr/webpack', 'url-loader'],
      },
    ],
  },

  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      favicon: './public/favicon.ico',
      minify: !isDevelopment,
    }),
    new WorkboxWebpackPlugin.GenerateSW({
      clientsClaim: true,
      skipWaiting: true,
    }),
  ],

  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },

  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom',
    },
  },

  devtool: isDevelopment ? 'eval-source-map' : false,
};

上述 Webpack 配置文件的大部分是 Webpack 4 的标准配置，不再过多解释，下面我们只对 PWA 相关的配置进行介绍。

首先，我们需要在 output.publicPath 中配置根路径：

output: {
  path: path.resolve(__dirname, 'build'),
  filename: isDevelopment ? '[name].[hash].js' : '[name].[contenthash:8].js',
  publicPath: '/',
},

这样设置是为了让服务器知道根路径，使 Service Worker 能够正确地缓存文件。

然后，我们需要在 plugins 中添加 WorkboxWebpackPlugin，它是我们 PWA 的主要插件之一，它允许我们生成 Service Worker 文件，并自动缓存我们的应用程序的所有文件。

new WorkboxWebpackPlugin.GenerateSW({
  clientsClaim: true,
  skipWaiting: true,
}),

其中，clientsClaim: true 表明我们期望 Service Worker 对所有页面起作用，skipWaiting: true 允许我们在更新时跳过等待状态，直接使用新版本的 Service Worker。

最后，在 optimization 中添加 splitChunks 字段，用于打包代码分割，可以提升应用程序的加载速度。

optimization: {
  splitChunks: {
    chunks: 'all',
  },
},

编写应用程序

接下来，我们需要编写应用程序的主要部分，包括入口文件、应用程序组件和样式文件。我们可以使用 React and Sass 来定义我们的应用程序。具体说明如下：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import './styles/index.scss';

ReactDOM.render(<App />, document.getElementById('root'));

这是我们的入口文件 src/index.js，它主要是导入了我们应用中的主组件 App，以及我们的样式文件。然后，我们使用 ReactDOM.render() 方法将组件渲染到 root 元素中。

接下来，我们需要编写应用程序的主要组件 App：

// www.javascriptcn.com code example
import React from 'react';
import logo from './logo.svg';
import './styles/App.scss';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

组件很简单，只是在页面上展示一些 React 的内容，你可以根据你的需求去自定义修改。

最后，我们还需要创建一个样式文件 src/styles/index.scss，用于定义页面的样式，具体代码如下：

// www.javascriptcn.com code example
$primary-color: #61dafb;
$secondary-color: blue;

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
  pointer-events: none;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.App-header {
  background-color: $primary-color;
  height: 120px;
  padding: 20px;
  color: white;
}

.App-link {
  color: $secondary-color;

  &:hover {
    color: white;
  }
}

在使用 Sass 之前，我们先定义了两个颜色变量，然后我们简单定义了一些样式。

运行和构建

现在我们已经完成了所有的代码和配置，我们来测试一下它。

首先，我们可以使用命令 npm start 启动开发服务器：

npm start

接着，打开浏览器，并访问 http://localhost:3000/，你应该可以看到 React 的欢迎页面。

一旦你已经完成所有开发，并准备上线，你可以使用命令 npm run build 来构建你的应用程序：

npm run build

Webpack 会生成一个名为 build 的文件夹，其中包含打包后的应用程序文件。将它们部署到你的服务器上，即可为你的用户提供一个快速、可靠且可以离线使用的 Web 应用程序。

到此，我们就成功地使用了 Webpack 4 来管理 PWA 项目，你可以根据你的需求去更新和调整相关配置，以取得更好的效果。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d7e465a941bf7134e1da34

使用 Webpack 管理 PWA 项目

配置 Webpack

安装 Webpack 和依赖

配置 Webpack

编写应用程序

运行和构建

接着读