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 (
);
}
}
```
这里的`App`组件就是我们打包的主文件。
至此，我们完成了Webpack打包到H5和App的说明，希望对你有所帮助。
