webpack学习(五)配置详解
时间:2022-05-07
本文章向大家介绍webpack学习(五)配置详解,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
配置详解
//使用插件html-webpack-plugin打包合并html
//使用插件extract-text-webpack-plugin打包独立的css
//使用UglifyJsPlugin压缩代码
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require("webpack");
module.exports = {
entry: {
bundle : './src/js/main.js'
},
output: {
filename: "[name]-[hash].js",
path: __dirname + '/dist'
},
module: {
rules: [
{
test: /.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /.(png|jpg|jpeg|gif)$/,
use: 'url-loader?limit=8192'
}
]
},
resolve:{
extensions:['.js','.css','.json'] //用于配置程序可以自行补全哪些文件后缀
},
plugins:[
new HtmlWebpackPlugin({
title: 'hello webpack',
template:'src/component/index.html',
inject:'body',
minify:{ //压缩HTML文件
removeComments:true, //移除HTML中的注释
collapseWhitespace:true //删除空白符与换行符
}
}),
new ExtractTextPlugin("[name].[hash].css"),
new webpack.optimize.UglifyJsPlugin({ //压缩代码
compress: {
warnings: false
},
except: ['$super', '$', 'exports', 'require'] //排除关键字
})
]
};
module.loader: 其中test是正则表达式,对符合的文件名使用相应的加载器./.css$/会匹配 xx.css文件,但是并不适用于xx.sass或者xx.css.zip文件.
url-loader: 它会将样式中引用到的图片转为模块来处理; 配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式。 entry: 模块的入口文件。依赖项数组中所有的文件会按顺序打包,每个文件进行依赖的递归查找,直到所有模块都被打成包; output:模块的输出文件,其中有如下参数: filename: 打包后的文件名 path: 打包文件存放的绝对路径。 publicPath: 网站运行时的访问路径。 relolve.extensions: 自动扩展文件的后缀名,比如我们在require模块的时候,可以不用写后缀名的。 relolve.alias: 模块别名定义,方便后续直接引用别名,无须多写长长的地址 plugins 是插件项;
- Python编写渗透工具学习笔记一 | 0x06 Zip包破解程序
- Java 并发排序
- Python编写渗透工具学习笔记一 | 0x07 Python实现键盘记录器
- Python编写渗透工具学习笔记一 | 0x08字典生成程序
- 漫步VR——Unity语音聊天室开发
- Python编写渗透工具学习笔记一 | 0x01 目录扫描程序
- JDK容器学习之HashMap (一) : 底层存储结构分析
- Python编写渗透工具学习笔记一 | 0x02实现一个反弹shell
- 动手实现MVC: 1. Java 扫描并加载包路径下class文件
- 动手实现MVC: 2. bean加载, IoC依赖注入
- Python编写渗透工具学习笔记一 | 0x04 nmap实现端口扫描(准确性更高)
- spring-boot & ffmpeg 搭建一个音频转码服务
- java 实现二维码生成工具类
- WriteUp分享 | CTF-web
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux 系统双网卡绑定配置实现
- Linux系统设置开机自动运行脚本的方法实例
- Linux中fuser命令用法详解
- 在Ubuntu中实现人脸识别登录的完整步骤
- Linux下如何寻找相同文件的方法
- CentOS 7中Nginx日志定时拆分实现过程详解
- 浅谈linux模拟多线程崩溃和多进程崩溃
- Linux下MongoDB的安装和配置教程
- Linux配置实现免密钥登录过程解析
- 可以提高效率的十个Linux命令别名汇总
- 基于linux命令提取文件夹内特定文件路径
- Ubuntu20.04修改ip地址的方法示例
- Linux 逻辑卷管理(LVM)使用方法总结
- Linux 下载安装VSCode 使用编程输出当前时间的方法
- 详解Linux获取线程的PID(TID、LWP)的几种方式