Webpack4 配置 Plugins

2024-08-23 22:08
文章标签 配置 plugins webpack4

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

1.Webpack4 配置 Plugins

Plugin 用于扩展 Webpack 功能,可以通过在构建流程里注入钩子实现,然而各种各样的 Plugin 几乎让 Webpack 可以做任何构建相关的事情。

loader vs plugins 区别 :

loader 用于加载某些资源文件,它只专注于转化文件(transform)这个领域,loader运行在webpack打包之前。

plugins 用于扩展 webpack 构建的功能,而不是处理资源的加载和转换。plugins出现的目的是处理loader不能实现的事情,plugins在整个编译周期都起作用。

1.配置提取css的Plugins

新建一个项目

|-- package.json
|-- src
|   |       `-- common.js
|   |       `-- index.html
|   |       `-- main.css
|           `-- main.js
`-- webpack.config.js

package.json

{"name": "testcssloader","version": "1.0.0","description": "","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack --mode development","build": "webpack --mode production"},"author": "liujun","license": "ISC","devDependencies": {"css-loader": "^3.0.0","extract-text-webpack-plugin": "^4.0.0-beta.0","style-loader": "^0.23.1","webpack": "^4.35.3","webpack-cli": "^3.3.6"}
}

1.scripts 属性里编写了3个脚本:其中 dev 对应的脚本是 构建测试版;其中 build对应的脚本是 构建发布版

2.增加了开发依赖:extract-text-webpack-plugin 插件

webpack.config.js

const path = require('path');
// 1.导入提取css的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {// entry: './src/main.js',entry: {app: ['./src/main.js']},output: {filename: 'bundle.js',path: path.resolve(__dirname, './dist'), },module: {rules: [{test: /\.css$/, // 2.提取模块中的cssuse: ExtractTextPlugin.extract({// 处理当 CSS 没有被提取的部分,即当 allChunks: falsefallback: "style-loader",// 将css资源转换成一个 CSS 导出模块use: "css-loader"}),}]},plugins: [// 3.提取模块中的cssnew ExtractTextPlugin({// 从 .js 文件中提取出来的 .css 文件的名称filename: '[id]-[name]-[hash:8].css',})]
};

main.css

body {background-color: pink;
}

main.js

// 1.通过 CommonJS 规范导入 showHelloWorld 函数
const showHelloWorld = require('./common.js');
// 2.执行 showHelloWorld 函数
showHelloWorld('Webpack的安装和使用');
// 3.通过 CommonJS 规范导入 CSS 模块
require('./main.css');

index.html

<html>
<head><meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="../dist/bundle.js"></script>
</body>
</html>

本地安装 webpack 和 用到的loader

npm install webpack@4.35.3  --save-dev
npm install webpack-cli@3.3.6  --save-dev
npm install style-loader@0.23.1  --save-dev
npm install css-loader@3.0.0  --save-devnpm install extract-text-webpack-plugin@4.0.0-beta.0  --save-dev

在项目的根目录,执行脚本构建项目

npm run dev

打包后输出的结果

|-- dist
|   |-- bundle.js
|   |-- app-app-7cf1481f.css
|-- node_modules
|-- package-lock.json
|-- package.json
|-- src
|   |-- common.js
|   |-- index.html
|   |-- main.css
|   `-- main.js
`-- webpack.config.js

打包之后的 app-app-7cf1481f.css 文件的内容:

body {background-color: pink;
}

注意:app-app-7cf1481f.css文件就是 extract-text-webpack-plugin 插件提取出来的

打包之后的 index.html,下面的html没有嵌入任何样式,因为样式已经单独提取到 app-app-7cf1481f.css 文件

<html>
<head><meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="../dist/bundle.js"></script></body></html>

源码下载

这篇关于Webpack4 配置 Plugins的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Python 安装和配置flask, flask_cors的图文教程

《Python安装和配置flask,flask_cors的图文教程》:本文主要介绍Python安装和配置flask,flask_cors的图文教程,本文通过图文并茂的形式给大家介绍的非常详细,... 目录一.python安装:二,配置环境变量,三:检查Python安装和环境变量,四:安装flask和flas

SpringCloud动态配置注解@RefreshScope与@Component的深度解析

《SpringCloud动态配置注解@RefreshScope与@Component的深度解析》在现代微服务架构中,动态配置管理是一个关键需求,本文将为大家介绍SpringCloud中相关的注解@Re... 目录引言1. @RefreshScope 的作用与原理1.1 什么是 @RefreshScope1.

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

springboot security之前后端分离配置方式

《springbootsecurity之前后端分离配置方式》:本文主要介绍springbootsecurity之前后端分离配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的... 目录前言自定义配置认证失败自定义处理登录相关接口匿名访问前置文章总结前言spring boot secu

一文详解SpringBoot响应压缩功能的配置与优化

《一文详解SpringBoot响应压缩功能的配置与优化》SpringBoot的响应压缩功能基于智能协商机制,需同时满足很多条件,本文主要为大家详细介绍了SpringBoot响应压缩功能的配置与优化,需... 目录一、核心工作机制1.1 自动协商触发条件1.2 压缩处理流程二、配置方案详解2.1 基础YAML

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》:本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig(自定义资源权限规则

SpringBoot中封装Cors自动配置方式

《SpringBoot中封装Cors自动配置方式》:本文主要介绍SpringBoot中封装Cors自动配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot封装Cors自动配置背景实现步骤1. 创建 GlobalCorsProperties

Spring Boot结成MyBatis-Plus最全配置指南

《SpringBoot结成MyBatis-Plus最全配置指南》本文主要介绍了SpringBoot结成MyBatis-Plus最全配置指南,包括依赖引入、配置数据源、Mapper扫描、基本CRUD操... 目录前言详细操作一.创建项目并引入相关依赖二.配置数据源信息三.编写相关代码查zsRArly询数据库数

SpringBoot配置Ollama实现本地部署DeepSeek

《SpringBoot配置Ollama实现本地部署DeepSeek》本文主要介绍了在本地环境中使用Ollama配置DeepSeek模型,并在IntelliJIDEA中创建一个Sprin... 目录前言详细步骤一、本地配置DeepSeek二、SpringBoot项目调用本地DeepSeek前言随着人工智能技

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志?配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各