webpack配置详解：实用技巧与多页面构建

161 浏览量更新于2024-08-29 收藏 58KB PDF 举报

"这篇文章除了介绍webpack的配置方法，还涉及了处理共用JS、HTML模板处理、CSS单独打包以及如何自定义HTMLWebpackPlugin的配置。文章以一个具体的webpack.config.js配置文件为例，展示了如何设置多页面应用的入口、输出路径、文件命名规则，并提到了动态注入静态资源和添加hash值以实现缓存管理。" 基于webpack的实用配置方法总结如下： 1. **处理共用、通用的JS**：使用`webpack`库本身，通常在配置文件中引入，以便利用其功能来处理项目中的共享模块。例如，可以创建一个`common`入口，包含所有通用的JS代码，这样可以优化代码分割和加载性能。 2. **处理HTML模板**：引入`html-webpack-plugin`插件，它能自动生成HTML文件并自动将打包后的JS、CSS等资源插入到HTML中。在配置文件中，你需要指定模板文件的位置、输出文件的目录和名称，还可以添加favicon、标题等信息。 3. **CSS单独打包**：使用`extract-text-webpack-plugin`插件，它可以将CSS从JS文件中分离出来，打包成单独的CSS文件。这样做的好处是避免CSS阻塞页面渲染，同时方便对CSS进行独立管理和缓存。 4. **获取HTMLWebpackPlugin参数的方法**：定义`getHtmlConfig`函数，接收模板名称和标题作为参数，返回一个配置对象，用于定制HTMLWebpackPlugin的行为，如注入哪些chunks（代码块），设置hash值等。 5. **webpack.config.js配置**： - `entry`：定义应用的入口点，可以是一个对象，每个键对应一个入口文件，值是一个数组，包含这个页面依赖的模块。 - `output`：定义输出路径和文件命名规则。`path`指定了打包后文件的存放位置，`filename`则设置了根据名字生成的文件名。 - `filename`的`[name]`占位符表示入口键的值，这里可以用来区分不同页面的JS文件。 - `htmlWebpackPlugin`实例化时，通过`getHtmlConfig`方法传入不同页面的配置，确保每个页面有对应的HTML生成。 6. **动态注入静态资源和添加hash值**： - `htmlWebpackPlugin`的`inject`选项决定如何将资源注入到HTML中，通常设置为`true`或`'body'`，将JS资源放在`<body>`的底部。 - `hash`选项开启后，webpack会在生成的文件名中加入唯一的哈希值，防止缓存问题。例如，每次构建时，文件名后面会带上一个基于文件内容的hash码。 - `chunks`用于控制注入到HTML中的代码块，比如只注入`common`和当前页面的代码。以上就是基于webpack的实用配置方法的概述，这些配置可以帮助优化多页面应用的构建流程，提高代码组织和管理效率，同时确保资源的正确加载和缓存策略。在实际开发中，可以根据项目需求进一步调整和扩展这些配置。

基于基于webpack 实用配置方法总结实用配置方法总结

1、、webpack.config.js配置文件为：配置文件为：

//处理共用、通用的js

var webpack = require('webpack');

//处理html模板

var htmlWebpackPlugin = require('html-webpack-plugin');

//css单独打包

var ExtractTextPlugin = require("extract-text-webpack-plugin");

// 获取html-webpack-plugin参数的方法

var getHtmlConfig = function(name, title) {

return {

//本地模板文件的位置

template: './src/view/' + name + '.html',

//输出文件的目录和文件名称

filename: 'view/' + name + '.html',

//添加特定favicon路径到输出的html文档中

favicon: './favicon.ico',

//生成的html文档的标题

title: title,

//向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同。true或者body：所有JavaScript

资源插入到body元素的底部

inject: true,

//是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值

hash: true,

//允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入

的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；

chunks: ['common', name] };

};

var config = {

//多页面配置

entry: {

//通用模块

'common': ['./src/page/common/index.js'],

//登录模块

'login': ['./src/page/login/index.js'],

//首页

'index': ['./src/page/index/index.js'] },

output: {

//打包后文件存放的地方

path: __dirname + '/dist',

//打包后的文件名

filename: 'js/[name].js'

//将外部变量或者模块加载进来，并且不将外部变量或者模块编译进文件中

externals: {

'jquery': 'window.jQuery'

module: {

loaders: [

//编译ES6

{

test: /\.js$/,

//以下目录不处理

exclude: /node_modules/,

//处理以下目录

include: /src/,

loader: "babel-loader?cacheDirectory",

//配置的目标运行环境自动启用需要的 babel 插件

query: {

presets: ['latest'] }

//处理css

{

test: /\.css$/,

下载后可阅读完整内容，剩余5页未读，立即下载

weixin_38655810

粉丝: 6
资源: 907

webpack配置详解：实用技巧与多页面构建

react-基于Webpack的React单页面应用脚手架

基于React Webpack的“健康资讯”App开发.pdf

前端开源库-jsdoc-webpack-plugin

webpack layuimini

Laravel mix

基于springboot+vue校园社团管理系统实现

简述Vue CLI框架的概念

在Vue项目开发中，如何处理ERR_CONNECTION_REFUSED错误，并且如何正确地动态添加数组元素？

@intlify/vite-plugin-vue-i18n

vue-element-plus-admin-master

最新资源