Webpack是一个开源的JavaScript模块打包工具。它的主要目的是将打包文件最小化，达到更快的加载速度。其中H5(Web)和App分别对应着web页面和移动应用，下面将分别介绍如何使用Webpack打包到H5和App中。

一、打包到H5

Webpack将所有资源打包成几个包，其中主要包括JS、CSS、图片等文件。在H5中，我们主要关心JS和CSS这两个文件的打包问题。

1. 配置Webpack

首先，创建一个包含Webpack的配置文件。其中包含指定H5打包目标的entry（入口）和output（出口）等其他配置。例如：

```

module.exports = {

entry: './src/index.js', // 入口文件

mode: 'production', // 打包模式

output: {

filename: 'bundle.js', // 输出文件名

path: __dirname + '/dist', // 输出路径

},

module: {

rules: [

{

test: /\.css$/, // 匹配指定类型的文件

use: ['style-loader', 'css-loader'], // 加载CSS文件

},

{

test: /\.(png|svg|jpg|gif)$/, // 匹配图片文件

use: ['file-loader'], // 加载图片文件

},

...

],

},

plugins: [...],

};

```

2. 文件依赖加载

在H5中，通过`script`和`link`标签加载打包后的文件。如下所示：

```

Hello World!

```

这将加载打包后的`style.css`、`logo.png`和`bundle.js`文件。记住，你需要正确指定`entry`和`output.path`。

二、打包到App

在移动应用中，Webpack打包的主要目的是确保应用程序的性能和稳定性，需要将打包文件与应用程序代码整合在一起。下面是一些关键步骤。

1. 脚手架工具

对于移动应用程序打包，我们通常需要使用一些脚手架工具，例如React Native的`create-react-native-app`和Ionic Framework的`ionic start`。这些工具会帮助我们创建一个项目，并为我们完成一些基础设置。

2. 配置Webpack

当使用React Native的`create-react-native-app`时，Webpack的配置是自动完成的。对于其他脚手架工具，我们需要手动编写Webpack的配置文件。为了确保应用程序的性能和稳定性，我们需要将entry中的所有文件打包成一个文件。

```

const appDirectory = fs.realpathSync(process.cwd());

const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);

module.exports = {

...

entry: [resolveApp('src/index.js')],

output: {

filename: 'bundle.js',

path: resolveApp('build'),

publicPath: '/',

},

...

};

```

其中，`publicPath`表示由WebServer返回时可用于浏览器访问的输出目录的相对路径。我们可以在打包React Native应用程序时不使用它。

3. 文件加载

在React Native中，只需要通过导入组件来加载打包文件，如下所示：

```

import React from 'react';

import { View, Text } from 'react-native';

import App from './path/to/WhereBundleJSIs';

export default class Root extends React.Component {

render() {

return (

{'My App'}

);

}

}

```

这里的`App`组件就是我们打包的主文件。

至此，我们完成了Webpack打包到H5和App的说明，希望对你有所帮助。