Webpack4 配置多入口 SPA 单页面应用（Vue、React）打包-JavaScript中文网-JavaScript教程资源分享门户

前言

Webpack 是一个前端打包工具集，现在已经成为了前端项目开发的必备工具之一。它能够帮助我们处理各种前端代码，如 ES6+ 转译、CSS 预处理器的编译、项目打包、压缩等等。在本文中，我们将学习如何使用 Webpack4 配置多入口 SPA 单页面应用的打包。

正文

在开始配置之前，我们先了解一下 SPA 单页面应用。SPA 单页面应用是一种采用 AJAX 技术实现的 Web 应用程序模型，它通过无刷新页面切换的方式加载新内容，加强了用户体验。在打包多入口 SPA 单页面应用时，我们需要为每个页面生成一个入口文件，这个入口文件实际上就是每个页面的 JS 文件，它们共享一个 HTML 文件。

下面我们以 Vue 和 React 两个框架为例，来学习 Webpack4 配置多入口 SPA 单页面应用的打包。

Vue 单页面应用打包

下面我们来看一下如何使用 Webpack4 配置 Vue 单页面应用的打包。首先，我们需要在项目中安装必要的依赖：

npm install vue vue-loader vue-template-compiler vue-style-loader css-loader file-loader html-webpack-plugin webpack webpack-cli webpack-dev-server --save-dev

然后，我们可以编写一个简单的 Vue 单页面应用示例，如下所示：

// javascriptcn.com 代码示例
<template>
  <div>
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello Vue!"
    };
  }
};
</script>

<style>
h1 {
  color: #333;
}
</style>

接下来，我们需要为此示例编写一个入口文件 main.js，在该文件中渲染 Vue 组件并将其挂载到 HTML 文件中。

import Vue from "vue";
import App from "./App.vue";

new Vue({
  render: h => h(App)
}).$mount("#app");

现在，我们已经完成了 Vue 单页面应用示例的编写。接下来，我们需要在 Webpack 中配置多入口。

// javascriptcn.com 代码示例
module.exports = {
  entry: {
    index: "./src/main.js"
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[hash].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
      {
        test: /\.css$/,
        use: ["vue-style-loader", "css-loader"]
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: "file-loader",
            options: {
              esModule: false
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Vue App",
      template: "public/index.html"
    })
  ]
};

然后，我们需要在 index.html 文件中添加一个 id 为 app 的 div 容器，用于在入口 JS 文件中挂载 Vue 实例。还要在 index.html 文件中添加 script 标签，引用 Webpack 生成的 JS 文件。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>

  <body>
    <div id="app"></div>

    <script src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
  </body>
</html>

当我们打包运行 Webpack 后，它会自动将 Vue 单页面应用打包为一个 JS 文件，该文件包含渲染 Vue 组件所需的全部代码。我们可以在浏览器中打开 Webpack 启动的服务，查看页面效果。

React 单页面应用打包

接下来，我们学习如何使用 Webpack4 配置 React 单页面应用的打包。首先，我们需要在项目中安装必要的依赖：

npm install react react-dom react-router-dom babel-loader @babel/core @babel/preset-env @babel/preset-react css-loader file-loader html-webpack-plugin webpack webpack-cli webpack-dev-server --save-dev

然后，我们可以编写一个简单的 React 单页面应用示例，如下所示：

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return <h1>Hello React!</h1>;
};

ReactDOM.render(<App />, document.getElementById("app"));

与 Vue 单页面应用类似，我们需要为此示例编写一个入口文件 main.js，在该文件中渲染 React 组件并将其挂载到 HTML 文件中。

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

ReactDOM.render(<App />, document.getElementById("app"));

然后，我们需要为此示例配置 Webpack 的多入口。

// javascriptcn.com 代码示例
module.exports = {
  entry: {
    index: "./src/main.js"
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[hash].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"]
        }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: "file-loader",
            options: {
              esModule: false
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "React App",
      template: "public/index.html"
    })
  ]
};

与 Vue 单页面应用类似，我们需要在 index.html 文件中添加一个 id 为 app 的 div 容器，用于在入口 JS 文件中挂载 React 实例。还要在 index.html 文件中添加 script 标签，引用 Webpack 生成的 JS 文件。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>

  <body>
    <div id="app"></div>

    <script src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
  </body>
</html>

当我们打包运行 Webpack 后，它会自动将 React 单页面应用打包为一个 JS 文件，该文件包含渲染 React 组件所需的全部代码。我们可以在浏览器中打开 Webpack 启动的服务，查看页面效果。

总结

在本文中，我们学习了如何使用 Webpack4 配置多入口 SPA 单页面应用（Vue、React）的打包。文章详细介绍了配置过程中需要注意的事项，并提供了相应的代码示例，以便读者更好地理解和掌握本文内容。希望读者通过本文的学习，可以更好地应用 Webpack4 进行前端项目开发。

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