下面我将详细讲解如何使用webpack打包多页jQuery项目的完整攻略：

一、项目初始化

首先，我们需要在本地创建一个新的项目文件夹，并在该文件夹中执行以下命令来初始化一个新的npm项目：

npm init -y

接着，我们需要安装webpack及其相关插件：

npm i webpack webpack-cli webpack-dev-server clean-webpack-plugin html-webpack-plugin --save-dev

其中：

webpack：webpack的核心包
webpack-cli：Webpack的命令行接口
webpack-dev-server：Webpack的开发服务器
clean-webpack-plugin：在打包前清除旧文件
html-webpack-plugin：为生成的HTML文件注入资源

二、配置webpack

在根目录下创建一个webpack.config.js文件，并按照以下方式进行配置：

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    // 全局JS
    vendor: ['./src/js/vendor/jquery-3.3.1.min.js'],

    // 页面JS
    index: './src/js/pages/index.js',
    list: './src/js/pages/list.js',
    detail: './src/js/pages/detail.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CleanWebpackPlugin(),

    // 生成HTML文件
    new HtmlWebpackPlugin({
      filename: 'index.html', // 生成的文件名
      template: './src/template/index.html', // 模板文件
      chunks: ['vendor', 'index'] // 引入的JS文件
    }),
    new HtmlWebpackPlugin({
      filename: 'list.html',
      template: './src/template/list.html',
      chunks: ['vendor', 'list']
    }),
    new HtmlWebpackPlugin({
      filename: 'detail.html',
      template: './src/template/detail.html',
      chunks: ['vendor', 'detail']
    })
  ],
  optimization: {
    // 提取公共代码
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
            return `npm.${packageName.replace('@', '')}`;
          }
        }
      }
    }
  },
  devtool: 'source-map',
  devServer: {
    contentBase: './dist', // 指定静态文件目录
    port: 8080 // 端口号
  }
};

在以上配置中：

entry：入口文件。其中，vendor是全局JS文件，index、list和detail是页面JS文件。
output：打包输出目录及文件名称。其中，[name]表示对应的入口文件名称，[contenthash]为了防止浏览器缓存而加的哈希值。
plugins：插件。其中，CleanWebpackPlugin用于删除dist目录，HtmlWebpackPlugin用于生成对应的HTML文件。
optimization：优化配置。其中，runtimeChunk指定为single，表示将运行时代码提取到单独的文件中；splitChunks用于提取多个入口文件间的公共代码。
devtool：生成source map文件，方便调试。
devServer：开发服务器配置。

三、目录结构

在src目录中，我们按照以下目录结构组织项目文件：

- src
  - css // 样式文件
    - common.css
    - index.css
    - list.css
    - detail.css
  - js // JS文件
    - pages // 页面JS文件
      - index.js
      - list.js
      - detail.js
    - util // 工具JS文件
      - common.js
    - vendor // 全局JS文件
      - jquery-3.3.1.min.js
  - img // 图片文件
  - template // HTML模板文件
    - index.html
    - list.html
    - detail.html

四、示例

下面，我将为大家演示两个使用webpack打包多页jQuery项目的示例。

1. 在项目中使用SCSS

在多页jQuery项目中，我们可能需要使用SCSS编写样式文件。此时，首先需要安装node-sass相关包：

npm i node-sass sass-loader --save-dev

接着，在webpack.config.js文件中进行如下修改：

module.exports = {
  // ...

  module: {
    rules: [
      {
        test: /\.scss$/, // 匹配样式文件
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },

  // ...
};

然后，在src/css目录下编写SCSS样式文件。例如：

// 注意：此处需要使用node-sass的语法
$main-color: #337ab7;

body {
  background-color: #f5f5f5;
  color: darken($main-color, 30%);
}

在JS文件中，需要导入对应的SCSS文件：

// index.js
import '../css/common.scss';
import '../css/index.scss'

console.log('This is index page.');

最后，在HTML文件中引入对应的JS以及CSS文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Index Page</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <h1>Hello, world!</h1>
  <script src="./vendor/jquery-3.3.1.min.js"></script>
  <script src="./index.6377d7022c84a8d60511.js"></script>
</body>
</html>

2. 在项目中使用ES6语法

在多页jQuery项目中，可能会需要使用ES6的语法编写JS文件。此时，我们需要安装babel相关的包：

npm i @babel/core babel-loader @babel/preset-env --save-dev

然后，在webpack.config.js文件中进行如下修改：

module.exports = {
  // ...

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },

  // ...
};

最后，在体验ES6语法的JS文件中，我们可以进行如下编写：

// detail.js
import { name, age } from '../util/common.js';

console.log(`My name is ${name}, and I'm ${age} years old. This is detail page.`);

这样，我们就成功地使用webpack打包了一个多页jQuery项目，并实现了在项目中使用SCSS以及ES6语法的功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解如何使用webpack打包多页jquery项目 - Python技术站

详解如何使用webpack打包多页jquery项目