原生页面引入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.jsmain.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>