备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

【利用AI让知识体系化】Webpack 相关配置技巧（三）

2024-01-24 28
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【利用AI让知识体系化】Webpack 相关配置技巧

【利用AI让知识体系化】Webpack 相关配置技巧（二）https://developer.aliyun.com/article/1426117


章节六：Webpack 的实战案例

Webpack 打包 React 应用程序

要将 React 应用程序打包成一个可部署的代码包，可以使用 Webpack。

以下是一个简单的使用 Webpack 打包 React 应用程序的例子：

首先需要安装相关的依赖项：

npm install react react-dom
npm install babel-core babel-loader babel-preset-env babel-preset-react
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D

接着，创建一个配置文件 webpack.config.js，配置入口文件、输出文件、加载器等信息：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

在这个例子中，我们指定了入口文件为 src/index.js，输出文件为 dist/bundle.js。在 module 配置中，我们使用了 Babel 加载器来解析和编译 React 组件及其依赖文件。同时，我们也使用了 CSS 加载器来加载 CSS 文件。在 plugins 配置中，使用了 HtmlWebpackPlugin 来生成 index.html 文件，该文件会自动将打包后的 JavaScript 文件插入到 HTML 中。

接着，我们需要创建一个入口文件 src/index.js，并在其中引入 React 组件并将其渲染到页面上：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('root'));

在这个例子中，我们引入了 App 组件并使用 ReactDOM.render() 方法将其渲染到页面上。需要注意的是，在运行应用程序之前，还需要在 HTML 文件中添加一个与 ReactDOM.render() 方法中指定的 id 相匹配的容器元素。

现在可以在终端运行 webpack 命令打包应用程序，打包后的文件将输出到 dist/bundle.js 文件中。可以通过简单的开发服务器进行测试：

// package.json
{
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
  }
}

现在可以使用 npm start 命令来启动开发服务器，自动打开浏览器并在其中运行应用程序。在修改代码后，可以看到浏览器会自动实时更新。如果需要打包则运行 npm run build 命令。

Webpack 打包 Vue.js 应用程序

要将 Vue.js 应用程序打包成一个可部署的代码包，也可以使用 Webpack。

以下是一个简单的使用 Webpack 打包 Vue.js 应用程序的例子：

首先需要安装相关的依赖项：

npm install vue vue-template-compiler
npm install babel-core babel-loader babel-preset-env babel-plugin-transform-runtime
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin vue-loader vue-style-loader css-loader less-loader less -D

接着，创建一个配置文件 webpack.config.js，配置入口文件、输出文件、加载器等信息：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['transform-runtime']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['vue-style-loader', 'css-loader', 'less-loader']
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

在这个例子中，我们指定了入口文件为 src/main.js，输出文件为 dist/bundle.js。同时，我们还使用了 Vue.js 相关的加载器，以及 Babel 加载器和 CSS 加载器进行编译。在 plugins 配置中，使用了 VueLoaderPlugin 来正确解析 Vue 组件，并使用了 HtmlWebpackPlugin 来生成 index.html 文件，该文件会自动将打包后的 JavaScript 文件插入到 HTML 中。

接着，我们需要创建一个入口文件 src/main.js，并在其中创建一个 Vue 实例并挂载到页面上：

// src/main.js
import Vue from 'vue';
import App from './App.vue';
new Vue({
  render: h => h(App),
}).$mount('#app');

在这个例子中，我们引入了 App 组件并创建了一个 Vue 实例，并使用 render 方法将其挂载到页面上。

现在可以在终端运行 webpack 命令打包应用程序，打包后的文件将输出到 dist/bundle.js 文件中。可以通过简单的开发服务器进行测试：

// package.json
{
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
  }
}

现在可以使用 npm start 命令来启动开发服务器，自动打开浏览器并在其中运行应用程序。在修改代码后，可以看到浏览器会自动实时更新。如果需要打包则运行 npm run build 命令。

Webpack 打包多页应用程序

Webpack 可以用来打包多页应用程序。多页应用程序与单页应用程序不同，其由多个 HTML 页面组成，每个页面都有着自己独立的 JavaScript 和 CSS 文件。

以下是一个简单的使用 Webpack 打包多页应用程序的例子：

首先需要创建多个 HTML 页面，并在其中引入对应的 JavaScript 和 CSS 文件。例如，我们创建两个页面 home.html 和 about.html：

<!-- home.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Home Page</title>
  </head>
  <body>
    <h1>Welcome to the Home Page!</h1>
    <script src="home.js"></script>
  </body>
</html>
<!-- about.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>About Page</title>
  </head>
  <body>
    <h1>About Us</h1>
    <script src="about.js"></script>
  </body>
</html>

在这个例子中，我们分别创建了 home.html 和 about.html 两个页面，而每个页面都包含一个对应的 JavaScript 文件。

接着，创建一个配置文件 webpack.config.js，配置入口文件、输出文件、加载器等信息：

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {
    home: './src/home.js',
    about: './src/about.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/home.html',
      filename: 'home.html',
      chunks: ['home']
    }),
    new HtmlWebpackPlugin({
      template: 'src/about.html',
      filename: 'about.html',
      chunks: ['about']
    })
  ]
};

在这个例子中，我们指定了入口文件为两个 JavaScript 文件 home.js 和 about.js，输出文件为 dist/home.js 和 dist/about.js。在 module 配置中，我们使用了 Babel 加载器来解析和编译 JavaScript 代码。在 plugins 配置中，使用了 HtmlWebpackPlugin 来生成对应的 HTML 文件，并且指定了对应的 JavaScript 文件。

接着，创建两个 JavaScript 文件 home.js 和 about.js，并在其中编写对应的脚本：

// home.js
console.log('This is the home page.');
// about.js
console.log('This is the about page.');

在这个例子中，我们分别在不同的 JavaScript 文件中编写对应的脚本。

现在可以在终端运行 webpack 命令打包应用程序，打包后的文件将输出到 dist 文件夹中。可以通过简单的开发服务器进行测试：

// package.json
{
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
  }
}

现在可以使用 npm start 命令来启动开发服务器，自动打开浏览器并在其中运行应用程序。在修改代码后，可以看到浏览器会自动实时更新。如果需要打包则运行 npm run build 命令。

Webpack 打包单页应用程序

要将单页应用程序打包成一个可部署的代码包，可以使用 Webpack。以下是一个简单的使用 Webpack 打包单页应用程序的例子：

首先需要安装相关的依赖项：

npm install react react-dom react-router-dom
npm install babel-core babel-loader babel-preset-env babel-preset-react
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D

接着，创建一个配置文件 webpack.config.js，配置入口文件、输出文件、加载器等信息：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  devServer: {
    historyApiFallback: true
  }
};

在这个例子中，我们指定了入口文件为 src/index.js，输出文件为 dist/bundle.js。在 module 配置中，我们使用了 Babel 加载器来解析和编译 React 组件及其依赖文件。同时，我们也使用了 CSS 加载器来加载 CSS 文件。在 plugins 配置中，使用了 HtmlWebpackPlugin 来生成 index.html 文件，该文件会自动将打包后的 JavaScript 文件插入到 HTML 中。

其中，devServer 增加了 historyApiFallback 为 true ，这是因为嵌入到HTML页面的SPA应用程序通常依赖于 HTML5 的 history 模式（如 React router），因此，需要将所有请求都指向 index.html，以防止路由错误。

接着，我们需要创建一个入口文件 src/index.js，并在其中创建一个根组件并挂载到页面上：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';
import './index.css';
const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};
ReactDOM.render(<App />, document.getElementById('root'));

在这个例子中，我们引入了 Home、About 和 NotFound 三个组件，并使用 BrowserRouter 以及 Route、Switch 组件来实现页面路由。需要注意的是，在运行应用程序之前，还需要在 HTML 文件中添加一个与 ReactDOM.render() 方法中指定的 id 相匹配的容器元素。

现在可以在终端运行 webpack 命令打包应用程序，打包后的文件将输出到 dist/bundle.js 文件中。

文章标签：
云解析DNS
前端开发
JavaScript
人工智能
容器
移动开发
关键词：
Webpack配置
AI配置
AI体系化
AI体系化webpack配置
阿珊和她的猫
目录
相关文章
阿珊和她的猫
|
3月前
|
人工智能 网络协议 安全
【利用AI让知识体系化】简要了解网络七层协议（二）
【利用AI让知识体系化】简要了解网络七层协议
阿珊和她的猫
25 0
阿珊和她的猫
|
3月前
|
人工智能 网络协议 数据安全/隐私保护
【利用AI让知识体系化】简要了解网络七层协议（一）
【利用AI让知识体系化】简要了解网络七层协议
阿珊和她的猫
39 0
阿珊和她的猫
|
3月前
|
设计模式 人工智能 自然语言处理
【利用AI让知识体系化】简要了解面向对象编程设计（二）
【利用AI让知识体系化】简要了解面向对象编程设计
阿珊和她的猫
44 1
阿珊和她的猫
|
3月前
|
设计模式 人工智能 关系型数据库
【利用AI让知识体系化】简要了解面向对象编程设计（一）
【利用AI让知识体系化】简要了解面向对象编程设计
阿珊和她的猫
36 0
桃李春风一杯酒
|
3天前
|
JavaScript 前端开发
构建工具：配置Webpack打包Vue项目
【4月更文挑战第24天】本文介绍了如何配置Webpack来打包Vue项目。首先，Webpack作为模块打包器处理依赖并打包成可执行文件。接着，通过安装Node.js和npm，创建Vue项目，进入项目目录并配置Webpack的入口、输出、加载器和插件。最后，运行构建命令完成打包。理解Webpack基础并按需配置，能优化前端项目构建和开发体验。
桃李春风一杯酒
10 0
Boale_H
|
1月前
|
存储 前端开发 文件存储
webpack成长指北第5章---webpack的基础配置
webpack成长指北第5章---webpack的基础配置
Boale_H
25 0
阿珊和她的猫
|
3月前
|
安全 前端开发 JavaScript
【利用AI让知识体系化】前端安全攻防知识点（二）
【利用AI让知识体系化】前端安全攻防知识点
阿珊和她的猫
49 0
阿珊和她的猫
|
3月前
|
存储 前端开发 安全
【利用AI让知识体系化】前端安全攻防知识点（一）
【利用AI让知识体系化】前端安全攻防知识点
阿珊和她的猫
43 0
阿珊和她的猫
|
3月前
|
人工智能 缓存 JavaScript
【利用AI让知识体系化】Webpack 相关配置技巧（二）
【利用AI让知识体系化】Webpack 相关配置技巧
阿珊和她的猫
37 0
阿珊和她的猫
|
3月前
|
人工智能 前端开发 JavaScript
【利用AI让知识体系化】Webpack 相关配置技巧（一）
【利用AI让知识体系化】Webpack 相关配置技巧
阿珊和她的猫
17 0

热门文章

最新文章

  • 1
    如何用MongoDB Atlas和大语言模型，高效构建企业级AI应用？
  • 2
    AIGC创作活动 | 跟着UP主秋葉一起部署AI视频生成应用！
  • 3
    招募！阿里云x魔搭社区发起Create@AI创客松邀你探索下一代多维智能体应用
  • 4
    大模型落地实战指南：从选择到训练，深度解析显卡选型、模型训练技、模型选择巧及AI未来展望---打造AI应用新篇章
  • 5
    fast.ai 深度学习笔记（五）（3）
  • 6
    fast.ai 机器学习笔记（四）（2）
  • 7
    fast.ai 深度学习笔记（二）（3）
  • 8
    fast.ai 深度学习笔记（七）（4）
  • 9
    fast.ai 深度学习笔记（六）（3）
  • 10
    fast.ai 机器学习笔记（一）（4）
  • 1
    webpack如何设置devServer启动项目为https协议
    141
  • 2
    webpack成长指北第9章---webpack如何对icon字体进行打包
    31
  • 3
    webpack成长指北第8章---webpack的CSS Modules打包
    21
  • 4
    webpack成长指北第7章---webpack的css\less\scss样式打包
    42
  • 5
    webpack成长指北第6章---webpack的图片引入
    22
  • 6
    webpack成长指北第3章---常用webpack命令及使用webpack命令的方式
    24
  • 7
    webpack成长指北第2章---安装webpack的正确姿势
    19
  • 8
    深入理解前端性能优化中的Webpack Tree Shaking
    20
  • 9
    Webpack 进阶：深入理解其工作原理与优化策略
    45
  • 10
    Webpack构建慢如蜗牛？提升开发效率的速度优化秘籍！
    39

    • 相关课程

    更多
  • 【科技少年】AI领航员探索教程（赛前训练）
  • 达摩院视觉AI精品课
  • AI开发者的Docker实践
  • AI社区开源学习实践
  • 趣味视觉AI应用入门与实战
  • AI数学基础

    • 相关电子书

    更多
  • 释放算力潜能，加速 AI 应用构建
  • 网易游戏机器学习云平台助力AI应用落地实践
  • 智算时代，基于 ACK 落地云原生AI

    • 相关实验场景

    更多
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 函数计算部署AI艺术字应用，生成新春文字头像
  • 使用函数计算部署通义千问大模型实现AI对话
  • 基于Hologres+PAI+计算巢，5分钟搭建企业级AI问答知识库
  • 基于通义千问X函数计算部署AI助手
  • 基于阿里云DeepGPU实例，让AI带你畅玩杭州
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）