webpack4入门参考

2023-12-27 10:58
文章标签 入门 参考 webpack4

本文主要是介绍webpack4入门参考,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Webpack版本:4.25.1

特性

  • 有code-spliting(代码分割)的功能,可以根据需要进行加载,而不是一次加载全部

  • 通过loader处理各种文件(js、图片、css、json、less、coffeescipt等),任何静态的资源会被视为模块

  • 插件

  • 模块热更新

  • 适合大型项目

安装

npm i webpack --save-dev

简单使用

简单的打包可以这样写:

webpack 被打包的文件名(输入) 打包后的文件名(输出)

常用命令行参数:

--watch 在被打包文件发生变化时自动更新

--config filename.js 指定其他配置文件

--progress 打包过程有百分比进度显示

--display-modules 显示打包的所有模块

--display-reasons 显示打包每个模块的原因

配置文件

对于更复杂的依赖结构,一般不会像上面的命令那样写。通常会专门编写一个配置文件,每次打包时执行这个配置文件即可。

建立webpack.config.js文件,这样在根目录下执行webpack命令时会自动根据这个文件进行打包操作。如果没有找到这个配置文件,则会显示关于webpack所有命令行参数的说明。

基本结构

var path = require('path');module.exports = {mode: 'development',entry: {        // 对应每个chunkpage1: './src/script/a.js',page2: './src/script/b.js',},output: {path: path.resolve(__dirname, 'dist'),filename: 'js/[name].js'}
}

如果想只用webpack这个命令执行复杂的命令行参数,需要在package.json的scripts字段添加webpack属性,值是命令的字符串形式(多个入口文件就用字符串数组,或者是对象,键对应的是chunk,一般这样针对的是单页面),之后用这个命令

npm run webpack

对于非js文件的打包处理

打包css文件需要安装额外的css-loader和style-loader.
安装好之后,在入口js文件可以这样写:

require('style-loader!css-loader!./style.css');

避免太多css文件都要这样写的麻烦,可以使用--module-bind命令行参数来指定加载器:

webpack xxx1 xxx2 --module-bind "css=style-loader!css-loader"

这样就可以正常地reuire那些css文件了:

require('./style.css');

 

由于webpack生成的js文件名一般都是动态的,所以在html中script的引用会比较麻烦,所以需要html-webpack-plugin模块:

npm i html-webpack-plugin

然后在webpack配置文件中添加plugins属性:

var htmlWebpackPlugin = require('html-webpack-plugin');modeule.exports = {/* 之前的配置...*/plugins: [new htmlWebpackPlugin({template: 'index.html'        // 生成新html文件的参考模板})]
}

 

这篇关于webpack4入门参考的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/542898

相关文章

从入门到精通MySQL联合查询

《从入门到精通MySQL联合查询》:本文主要介绍从入门到精通MySQL联合查询,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下... 目录摘要1. 多表联合查询时mysql内部原理2. 内连接3. 外连接4. 自连接5. 子查询6. 合并查询7. 插入查询结果摘要前面我们学习了数据库设计时要满

从入门到精通C++11 <chrono> 库特性

《从入门到精通C++11<chrono>库特性》chrono库是C++11中一个非常强大和实用的库,它为时间处理提供了丰富的功能和类型安全的接口,通过本文的介绍,我们了解了chrono库的基本概念... 目录一、引言1.1 为什么需要<chrono>库1.2<chrono>库的基本概念二、时间段(Durat

解析C++11 static_assert及与Boost库的关联从入门到精通

《解析C++11static_assert及与Boost库的关联从入门到精通》static_assert是C++中强大的编译时验证工具,它能够在编译阶段拦截不符合预期的类型或值,增强代码的健壮性,通... 目录一、背景知识:传统断言方法的局限性1.1 assert宏1.2 #error指令1.3 第三方解决

从入门到精通MySQL 数据库索引(实战案例)

《从入门到精通MySQL数据库索引(实战案例)》索引是数据库的目录,提升查询速度,主要类型包括BTree、Hash、全文、空间索引,需根据场景选择,建议用于高频查询、关联字段、排序等,避免重复率高或... 目录一、索引是什么?能干嘛?核心作用:二、索引的 4 种主要类型(附通俗例子)1. BTree 索引(

Redis 配置文件使用建议redis.conf 从入门到实战

《Redis配置文件使用建议redis.conf从入门到实战》Redis配置方式包括配置文件、命令行参数、运行时CONFIG命令,支持动态修改参数及持久化,常用项涉及端口、绑定、内存策略等,版本8... 目录一、Redis.conf 是什么?二、命令行方式传参(适用于测试)三、运行时动态修改配置(不重启服务

MySQL DQL从入门到精通

《MySQLDQL从入门到精通》通过DQL,我们可以从数据库中检索出所需的数据,进行各种复杂的数据分析和处理,本文将深入探讨MySQLDQL的各个方面,帮助你全面掌握这一重要技能,感兴趣的朋友跟随小... 目录一、DQL 基础:SELECT 语句入门二、数据过滤:WHERE 子句的使用三、结果排序:ORDE

Python中OpenCV与Matplotlib的图像操作入门指南

《Python中OpenCV与Matplotlib的图像操作入门指南》:本文主要介绍Python中OpenCV与Matplotlib的图像操作指南,本文通过实例代码给大家介绍的非常详细,对大家的学... 目录一、环境准备二、图像的基本操作1. 图像读取、显示与保存 使用OpenCV操作2. 像素级操作3.

POI从入门到实战轻松完成EasyExcel使用及Excel导入导出功能

《POI从入门到实战轻松完成EasyExcel使用及Excel导入导出功能》ApachePOI是一个流行的Java库,用于处理MicrosoftOffice格式文件,提供丰富API来创建、读取和修改O... 目录前言:Apache POIEasyPoiEasyExcel一、EasyExcel1.1、核心特性

Python中模块graphviz使用入门

《Python中模块graphviz使用入门》graphviz是一个用于创建和操作图形的Python库,本文主要介绍了Python中模块graphviz使用入门,具有一定的参考价值,感兴趣的可以了解一... 目录1.安装2. 基本用法2.1 输出图像格式2.2 图像style设置2.3 属性2.4 子图和聚

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis