下面我将详细讲解如何使用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技术站
微信扫一扫 
支付宝扫一扫 