原生页面引入Webpack打包JS

时间：2024-10-24 07:07:50

Webpack简介

  1. 概述：
    • Webpack是一个现代JavaScript应用程序的静态模块打包器。
    • 它将应用程序中的每个文件视为一个模块，并通过配置规则来解析这些模块之间的依赖关系，最终将其打包成一个或多个浏览器可以执行的文件。
  2. 动态加载（Code Splitting）：
    • Webpack支持代码分割，允许开发者将代码分割成多个块（chunk），并在需要时按需加载。
    • 这可以通过使用动态import()语法来实现，它返回一个Promise对象，用于处理模块加载成功或失败的情况。
  3. 配置与加载器：
    • Webpack的配置文件通常命名为webpack.config.js，其中包含了入口点、输出文件、加载器、插件等配置信息。
    • 加载器（loader）用于转换不同类型的模块为Webpack能够处理的模块。例如，babel-loader用于将ES6+代码转换为浏览器兼容的ES5代码，css-loader用于处理CSS文件等。
  4. 插件系统：
    • Webpack的插件系统允许开发者通过监听Webpack构建过程中的事件来执行特定操作。
    • 例如，HtmlWebpackPlugin插件可以自动生成HTML文件并注入打包后的JS/CSS文件。
  5. 热更新（Hot Module Replacement, HMR）：
    • Webpack支持热更新功能，当源代码发生变化时，Webpack会自动重新编译受影响的模块，并替换旧模块。
    • 这使得开发者可以在不刷新页面的情况下实时看到代码的变化，提高了开发效率。

打包Javascript

在原生HTML中配置一个Webpack项目通常意味着你需要手动引入Webpack打包后的输出文件（例如bundle.js或main.js），而不是让Webpack直接处理HTML文件。以下是一个基本的步骤指南，帮助你在原生HTML中配置Webpack项目：

  1. 初始化项目：

    • 创建一个新的文件夹作为你的项目根目录。
    • 在该文件夹中打开终端或命令提示符。
    • 运行npm init -y来初始化一个新的npm项目，这将创建一个package.json文件。

  2. 安装Webpack及其CLI：

    • 运行npm install --save-dev webpack webpack-cli来安装Webpack和Webpack CLI。

  3. 创建项目结构：

    • 在项目根目录下创建一个src文件夹，用于存放源代码。
    • 在src文件夹中创建一个index.js文件，作为Webpack的入口点。
    • 在项目根目录下创建一个dist文件夹，用于存放Webpack打包后的输出文件。
    • 在项目根目录下创建一个index.html文件，作为你的HTML模板。

  4. 配置Webpack：

    • 在项目根目录下创建一个webpack.config.js文件，用于配置Webpack。

webpack.config.js示例：

const path = require('path');  

module.exports = {  
  entry: './src/index.js', // 入口文件  
  output: {  
    filename: 'bundle.js', // 输出文件名  
    path: path.resolve(__dirname, 'dist') // 输出目录  
  },  
  module: {  
    rules: [  
      // 在这里添加加载器配置（如Babel、CSS等）  
    ]  
  },  
  // 其他Webpack配置选项...  
};

  1. 编写源代码：

    • 在src/index.js中编写你的JavaScript代码。

  2. 编写HTML模板：

    • 在index.html中编写你的HTML代码，并在<body>标签的底部引入Webpack打包后的输出文件（例如<script src="dist/bundle.js"></script>）。

  3. 打包项目：

    • 在项目根目录下的package.json文件中添加一个构建脚本，例如"build": "webpack"。
    • 运行npm run build来打包项目。Webpack将根据webpack.config.js中的配置将src/index.js及其依赖打包成一个bundle.js文件，并输出到dist文件夹中。

  4. 查看结果：

    • 打开index.html文件（你可以直接在浏览器中打开，或者使用一个简单的HTTP服务器如live-server）。
    • 确保页面能够正确加载并显示你编写的JavaScript代码的效果。

请注意，如果你想要Webpack自动处理HTML文件（例如自动注入打包后的脚本标签），你可以使用html-webpack-plugin插件。但是，在这个基本的例子中，我们手动在HTML文件中引入了打包后的输出文件，以展示如何在原生HTML中配置Webpack项目。

 页面引入Javascript

//bundle.js
// 导出一个函数  
export function greet(name) {  
    return `Hello, ${name}!`;  
}
---------------------------------------------------
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Dynamic Import Example</title>  
    <script>  
        // 定义一个函数来动态加载模块  
        function loadModule() {  
            // 使用动态import()语法异步加载模块  
            import('./bundle.js')  
                .then(module => {  
                    // 模块加载成功，使用导入的函数  
                    const message = module.greet('World');  
                    console.log(message); // 输出: Hello, World!  
                })  
                .catch(error => {  
                    // 模块加载失败，处理错误  
                    console.error('Failed to load module:', error);  
                });  
        }  
  
        // 在页面加载完成后调用loadModule函数  
        window.onload = loadModule;  
    </script>  
</head>  
<body>  
    <h1>Dynamic Import Example</h1>  
</body>  
</html>

相关文章