【利用AI让知识体系化】Webpack 相关配置技巧（二）https://developer.aliyun.com/article/1426117
章节六：Webpack 的实战案例
Webpack 打包 React 应用程序
要将 React 应用程序打包成一个可部署的代码包，可以使用 Webpack。
以下是一个简单的使用 Webpack 打包 React 应用程序的例子：
首先需要安装相关的依赖项：
npm install react react-dom npm install babel-core babel-loader babel-preset-env babel-preset-react npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D
接着，创建一个配置文件 webpack.config.js，配置入口文件、输出文件、加载器等信息：
// webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: __dirname + '/dist' }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'] } } }, { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] };
在这个例子中，我们指定了入口文件为 src/index.js，输出文件为 dist/bundle.js。在 module 配置中，我们使用了 Babel 加载器来解析和编译 React 组件及其依赖文件。同时，我们也使用了 CSS 加载器来加载 CSS 文件。在 plugins 配置中，使用了 HtmlWebpackPlugin 来生成 index.html 文件，该文件会自动将打包后的 JavaScript 文件插入到 HTML 中。
接着，我们需要创建一个入口文件 src/index.js，并在其中引入 React 组件并将其渲染到页面上：
// src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App'; ReactDOM.render(<App />, document.getElementById('root'));
在这个例子中，我们引入了 App 组件并使用 ReactDOM.render() 方法将其渲染到页面上。需要注意的是，在运行应用程序之前，还需要在 HTML 文件中添加一个与 ReactDOM.render() 方法中指定的 id 相匹配的容器元素。
现在可以在终端运行 webpack 命令打包应用程序，打包后的文件将输出到 dist/bundle.js 文件中。可以通过简单的开发服务器进行测试：
// package.json { "scripts": { "start": "webpack-dev-server --open", "build": "webpack" } }
现在可以使用 npm start 命令来启动开发服务器，自动打开浏览器并在其中运行应用程序。在修改代码后，可以看到浏览器会自动实时更新。如果需要打包则运行 npm run build 命令。
Webpack 打包 Vue.js 应用程序
要将 Vue.js 应用程序打包成一个可部署的代码包，也可以使用 Webpack。
以下是一个简单的使用 Webpack 打包 Vue.js 应用程序的例子：
首先需要安装相关的依赖项：
npm install vue vue-template-compiler npm install babel-core babel-loader babel-preset-env babel-plugin-transform-runtime npm install webpack webpack-cli webpack-dev-server html-webpack-plugin vue-loader vue-style-loader css-loader less-loader less -D
接着，创建一个配置文件 webpack.config.js，配置入口文件、输出文件、加载器等信息：
// webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { entry: './src/main.js', output: { filename: 'bundle.js', path: __dirname + '/dist' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: ['transform-runtime'] } } }, { test: /\.css$/, use: ['vue-style-loader', 'css-loader'] }, { test: /\.less$/, use: ['vue-style-loader', 'css-loader', 'less-loader'] } ] }, plugins: [ new VueLoaderPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' }) ] };
在这个例子中，我们指定了入口文件为 src/main.js，输出文件为 dist/bundle.js。同时，我们还使用了 Vue.js 相关的加载器，以及 Babel 加载器和 CSS 加载器进行编译。在 plugins 配置中，使用了 VueLoaderPlugin 来正确解析 Vue 组件，并使用了 HtmlWebpackPlugin 来生成 index.html 文件，该文件会自动将打包后的 JavaScript 文件插入到 HTML 中。
接着，我们需要创建一个入口文件 src/main.js，并在其中创建一个 Vue 实例并挂载到页面上：
// src/main.js import Vue from 'vue'; import App from './App.vue'; new Vue({ render: h => h(App), }).$mount('#app');
在这个例子中，我们引入了 App 组件并创建了一个 Vue 实例，并使用 render 方法将其挂载到页面上。
现在可以在终端运行 webpack 命令打包应用程序，打包后的文件将输出到 dist/bundle.js 文件中。可以通过简单的开发服务器进行测试：
// package.json { "scripts": { "start": "webpack-dev-server --open", "build": "webpack" } }
现在可以使用 npm start 命令来启动开发服务器，自动打开浏览器并在其中运行应用程序。在修改代码后，可以看到浏览器会自动实时更新。如果需要打包则运行 npm run build 命令。
Webpack 打包多页应用程序
Webpack 可以用来打包多页应用程序。多页应用程序与单页应用程序不同，其由多个 HTML 页面组成，每个页面都有着自己独立的 JavaScript 和 CSS 文件。
以下是一个简单的使用 Webpack 打包多页应用程序的例子：
首先需要创建多个 HTML 页面，并在其中引入对应的 JavaScript 和 CSS 文件。例如，我们创建两个页面 home.html 和 about.html：
<!-- home.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Home Page</title> </head> <body> <h1>Welcome to the Home Page!</h1> <script src="home.js"></script> </body> </html>
<!-- about.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>About Page</title> </head> <body> <h1>About Us</h1> <script src="about.js"></script> </body> </html>
在这个例子中，我们分别创建了 home.html 和 about.html 两个页面，而每个页面都包含一个对应的 JavaScript 文件。
接着，创建一个配置文件 webpack.config.js，配置入口文件、输出文件、加载器等信息：
// webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { home: './src/home.js', about: './src/about.js' }, output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' } ] }, plugins: [ new HtmlWebpackPlugin({ template: 'src/home.html', filename: 'home.html', chunks: ['home'] }), new HtmlWebpackPlugin({ template: 'src/about.html', filename: 'about.html', chunks: ['about'] }) ] };
在这个例子中，我们指定了入口文件为两个 JavaScript 文件 home.js 和 about.js，输出文件为 dist/home.js 和 dist/about.js。在 module 配置中，我们使用了 Babel 加载器来解析和编译 JavaScript 代码。在 plugins 配置中，使用了 HtmlWebpackPlugin 来生成对应的 HTML 文件，并且指定了对应的 JavaScript 文件。
接着，创建两个 JavaScript 文件 home.js 和 about.js，并在其中编写对应的脚本：
// home.js console.log('This is the home page.');
// about.js console.log('This is the about page.');
在这个例子中，我们分别在不同的 JavaScript 文件中编写对应的脚本。
现在可以在终端运行 webpack 命令打包应用程序，打包后的文件将输出到 dist 文件夹中。可以通过简单的开发服务器进行测试：
// package.json { "scripts": { "start": "webpack-dev-server --open", "build": "webpack" } }
现在可以使用 npm start 命令来启动开发服务器，自动打开浏览器并在其中运行应用程序。在修改代码后，可以看到浏览器会自动实时更新。如果需要打包则运行 npm run build 命令。
Webpack 打包单页应用程序
要将单页应用程序打包成一个可部署的代码包，可以使用 Webpack。以下是一个简单的使用 Webpack 打包单页应用程序的例子：
首先需要安装相关的依赖项：
npm install react react-dom react-router-dom npm install babel-core babel-loader babel-preset-env babel-preset-react npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D
接着，创建一个配置文件 webpack.config.js，配置入口文件、输出文件、加载器等信息：
// webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: __dirname + '/dist' }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'] } } }, { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ], devServer: { historyApiFallback: true } };
在这个例子中，我们指定了入口文件为 src/index.js，输出文件为 dist/bundle.js。在 module 配置中，我们使用了 Babel 加载器来解析和编译 React 组件及其依赖文件。同时，我们也使用了 CSS 加载器来加载 CSS 文件。在 plugins 配置中，使用了 HtmlWebpackPlugin 来生成 index.html 文件，该文件会自动将打包后的 JavaScript 文件插入到 HTML 中。
其中，devServer 增加了 historyApiFallback 为 true ，这是因为嵌入到HTML页面的SPA应用程序通常依赖于 HTML5 的 history 模式（如 React router），因此，需要将所有请求都指向 index.html，以防止路由错误。
接着，我们需要创建一个入口文件 src/index.js，并在其中创建一个根组件并挂载到页面上：
// src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Home from './components/Home'; import About from './components/About'; import NotFound from './components/NotFound'; import './index.css'; const App = () => { return ( <Router> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route component={NotFound} /> </Switch> </Router> ); }; ReactDOM.render(<App />, document.getElementById('root'));
在这个例子中，我们引入了 Home、About 和 NotFound 三个组件，并使用 BrowserRouter 以及 Route、Switch 组件来实现页面路由。需要注意的是，在运行应用程序之前，还需要在 HTML 文件中添加一个与 ReactDOM.render() 方法中指定的 id 相匹配的容器元素。
现在可以在终端运行 webpack 命令打包应用程序，打包后的文件将输出到 dist/bundle.js 文件中。
