原生的js和html如何打包

原生的JS和HTML可以使用打包工具来进行打包，常见的打包工具有Webpack、Rollup等。以下是使用Webpack进行打包的示例：

首先，安装Webpack和相关的依赖：

npm install webpack webpack-cli --save-dev

在项目根目录下创建一个webpack.config.js文件，配置Webpack的打包规则：

const path = require('path');

module.exports = {
  entry: './src/main.js', // 入口文件
  output: {
    filename: 'bundle.js', // 输出文件名
    path: path.resolve(__dirname, 'dist') // 输出路径
  }
};

在项目根目录下创建一个src目录，并在该目录下创建main.js和index.html文件： main.js：

function sayHello() {
  console.log('Hello World!');
}

sayHello();

index.html：

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

执行Webpack打包命令：

npx webpack

执行完毕后，会在项目根目录下生成一个dist目录，其中包含打包后的bundle.js文件。

在浏览器中打开index.html文件，可以看到控制台输出Hello World!。

通过以上步骤，就可以将原生的JS和HTML文件进行打包，方便在浏览器中进行访问和使用