【利用AI让知识体系化】Webpack 相关配置技巧(三)

简介: 【利用AI让知识体系化】Webpack 相关配置技巧

【利用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.htmlabout.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.htmlabout.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.jsabout.js,输出文件为 dist/home.jsdist/about.js。在 module 配置中,我们使用了 Babel 加载器来解析和编译 JavaScript 代码。在 plugins 配置中,使用了 HtmlWebpackPlugin 来生成对应的 HTML 文件,并且指定了对应的 JavaScript 文件。

接着,创建两个 JavaScript 文件 home.jsabout.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 增加了 historyApiFallbacktrue ,这是因为嵌入到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'));

在这个例子中,我们引入了 HomeAboutNotFound 三个组件,并使用 BrowserRouter 以及 RouteSwitch 组件来实现页面路由。需要注意的是,在运行应用程序之前,还需要在 HTML 文件中添加一个与 ReactDOM.render() 方法中指定的 id 相匹配的容器元素。

现在可以在终端运行 webpack 命令打包应用程序,打包后的文件将输出到 dist/bundle.js 文件中。

相关文章
|
1月前
|
存储 前端开发 文件存储
webpack成长指北第5章---webpack的基础配置
webpack成长指北第5章---webpack的基础配置
25 0
|
3月前
|
人工智能 网络协议 安全
【利用AI让知识体系化】简要了解网络七层协议(二)
【利用AI让知识体系化】简要了解网络七层协议
|
3月前
|
人工智能 网络协议 数据安全/隐私保护
【利用AI让知识体系化】简要了解网络七层协议(一)
【利用AI让知识体系化】简要了解网络七层协议
|
3月前
|
设计模式 人工智能 自然语言处理
【利用AI让知识体系化】简要了解面向对象编程设计(二)
【利用AI让知识体系化】简要了解面向对象编程设计
|
3月前
|
设计模式 人工智能 关系型数据库
【利用AI让知识体系化】简要了解面向对象编程设计(一)
【利用AI让知识体系化】简要了解面向对象编程设计
|
3月前
|
安全 前端开发 JavaScript
【利用AI让知识体系化】前端安全攻防知识点(二)
【利用AI让知识体系化】前端安全攻防知识点
|
3月前
|
存储 前端开发 安全
【利用AI让知识体系化】前端安全攻防知识点(一)
【利用AI让知识体系化】前端安全攻防知识点
|
3月前
|
人工智能 缓存 JavaScript
【利用AI让知识体系化】Webpack 相关配置技巧(二)
【利用AI让知识体系化】Webpack 相关配置技巧
|
3月前
|
人工智能 前端开发 JavaScript
【利用AI让知识体系化】Webpack 相关配置技巧(一)
【利用AI让知识体系化】Webpack 相关配置技巧
|
3月前
|
编解码 人工智能 前端开发
【利用AI让知识体系化】常见的移动端适配知识
【利用AI让知识体系化】常见的移动端适配知识