必懂的webpack高级配置
webpack高级配置
1.HTML中img标签的图片资源处理
使用时、只需要在html中正常引用图片即可、webpack就会找到对应的资源进行打包、并修改html中的引用路径
主要是将html中的img路径文件进行打包、和copy-webpack-plugin是有区别的、copy-webpack-plugin主要是拷贝一些资源文件
项目中的图片资源都使用html-withimg-loader
项目中的音频、视频等资源文件使用copy-webpack-plugin
安装
npm i -S html-withimg-loader
配置 loader
{
test:/\.(htm|html)$/,
loader: 'html-withimg-loader'
}
2.多页应用打包
虽然SPA大行其道、但是多页应用还是非常重要的
修改配置文件
entry:{
index: './src/index.js',
other: './src/other.js'
},
output: {
path: path.join(__dirname, 'dist'),
// filename:'bundle.js',
filename:'[name].js',
publicPath: '/'
},
plugins:[
// new HtmlWebpackPlugin({
// filename: 'index.html',
// template: './src/index.html'
// }),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html',
chunks:['index']
}),
new HtmlWebpackPlugin({
filename: 'other.html',
template: './src/other.html',
chunks:['other']
})
],
3.第三方库的两种引入方式
可以通过 expose-loader 进行全局变量的注入、同时也可以使用内置插件 webpack.ProvidePlugin 对每个模块的闭包空间注入一个变量,自动加载模块,而不必到处import或require
expose-loader
将库引入到全局作用域
安装
npm i -D expose-loader
配置loader
module:{
rules:[
{
test: require.resolve('jquery'),
use:{
loader: 'expose-loader',
options: '$'
}
}
]
}
require.resolve 用来获取模块的绝对路径、所以这里的loader只会作用于jq模块并且只有在bundle中使用它时才会进行处理
webpack.ProvidePlugin
将库自动加载到每个模块
引入webpack
const webpack = require('webpack')
配置
plugins:[
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
4.区分环境配置文件打包
项目开发时一般需要使用两套配置文件、用于开发阶段打包(不压缩代码、不优化代码增加效率)和上线阶段打包(压缩代码、优化代码,打包后直接上线使用)
需要安装 webpack-merge
npm i -D webpack-merge
抽取三个配置文件
- webpack.base.js
- webpack.prod.js
- webpack.dev.js
实现步骤
- 将开发环境和生产环境公用的配置放入base中,不同的配置内容放置到各自的prod或者dev文件中,如mode
- 在dev和prod中使用 webpack-merge 把自己的配置和base的配置进行合并后导出
- 将package.json中的脚本参数进行修改,通过 —config 手动指定特定的配置文件
webpack配置的路径问题
Webpack 配置时,相对路径都是相对于根目录的,绝对路径就是配置文件所处的文件目录,因此在将配置文件放置的不是在根目录的时候,需要注意绝对路径是否以根目录为参照的
5.定义环境变量
除了区分不同的配置文件进行打包、还需要在开发时知道当前的环境时开发阶段还是上线阶段、所以可以借助内置插件
DefinePlugin来定义环境变量、最终可以实现开发阶段和上线阶段的区分
引入webpack
const webpack = require('webpack')
创建插件对象并定义环境变量
需要注意 DefinePlugin 设置的值是一个表达式,
IS_DEV: 'true'是设置IS_DEV为boolean类型的true
number: '1 + 1'是设置number为2,因为是一个表达式,所以'1 + 1'会进行运算将得到的值赋值给健string: '"设置字符串的值"',设置字符串的值需要多嵌套一层引号
variables: 'textVar'代表的是将textVar变量的值设置给variables,而不是将textVar作为字符串赋值给variables
plugins:[
new webpack.DefinePlugin({
IS_DEV: 'true',
number: '1 + 1',
string: '"设置字符串的值"',
variables: 'textVar'
})
]
在src打包的代码环境下可以直接使用
console.log('我是index js', IS_DEV, number, string)
必懂的webpack高级配置的更多相关文章
- 【Webpack】373- 一看就懂之 webpack 高级配置与优化
本文原载于 SegmentFault 社区专栏 前海拾贝 作者:JS_Even_JS 一.打包多页面应用 所谓打包多页面,就是同时打包出多个 html 页面,打包多页面也是使用 html-webpac ...
- 必懂的wenpack优化
webpack优化 1.production 模式打包自带优化 tree shaking tree shaking是一个术语.通常用于打包时移除js中未引用的代码(dead-code),它依赖于ES6 ...
- webpack详细配置解析
阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本 ...
- [转帖]K8s 工程师必懂的 10 种 Ingress 控制器
K8s 工程师必懂的 10 种 Ingress 控制器 https://www.kubernetes.org.cn/5948.html 控制器有好多啊. 2019-10-18 23:07 中文社区 分 ...
- webpack常用配置总结
1. webpack简介 webpack 是一个模块打包工具.它使得模块相互依赖并且可构建等价于这些模块的静态资源.相比于已经存在的模块打包器(module bundler),webpack的开发动机 ...
- vim的一些高级配置
今天有幸看到一篇博文,有一些vim的高级配置 在linux或者unix下面的.vimrc文件中,在其中可以添加如下片段,可以实现解释上面你说的那些高级用法 " Ctrl + K 插入模式下光 ...
- webpack快速入门——实战技巧:webpack模块化配置
首先在根目录,新建一个webpack_config文件夹,然后新建entry_webpack.js文件,代码如下: const entry ={}; //声明entry变量 entry.path={ ...
- webpack基础配置
webpack运行规则: Webpack 会给每个模块分配一个唯一的id并通过这个id索引和访问模块.在页面启动时,会先执行入口文件中的代码,其它模块会在运行 require 的时候再执行. 运行时主 ...
- webpack环境配置2
1.webpack安装 Step 1: 首先安装Node.js, 在1中已经详细介绍了. Step2: 在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中npm ins ...
随机推荐
- TopFreeTheme精选免费模板【20130626】
有一段时间没有发布的模板了,相信很多喜欢新模板的朋友有点焦急了!还好,今天我今天整理了13个最新的模板,主要是WordPress的,另外3个是关于Joomla的模板,他们分别是游戏主题.俱乐部主题以及 ...
- Spring单例模式多线程安全问题-有状态的Bean
Spring单例与线程安全小结 一.Spring单例模式与线程安全 Spring框架里的bean,或者说组件,获取实例的时候都是默认的单例模式,这是在多线程开发的时候要尤其注意的地方. 单例模式的意思 ...
- play框架之ORM
初次接触play2,采用的ebeans作为ORM框架.网上的资料并不多,总结如下: 数据的查询可以放在model类里,也可以放在controllers里面,我更倾向于后者,感觉数据流比较完整,好理解, ...
- 3015C语言_流程设计
第五章 流程设计 5.1 C语句概述 C语言的语句用来向计算机系统发出指令,一个实际的源程序通常包含若干语句,这些语句用来完成一定的操作任务. 1.其他类型语句 函数调用语句(由函数调用加一个分号构成 ...
- Elasticsearch-head插件使用小结
1.ElasticSearch-head是什么? ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasti ...
- 一步到位安装Centos7、配置VMware、连接Xshell
1.创建虚拟机 1.0 创建新的虚拟机 1.0.1 选择自定义配置 打开VMware,点击创建新的虚拟机. 如下图所示: 1.0.2 选择虚拟机硬件兼容性 如下图所示: 1.0.3 安装客户操 ...
- 【数据结构--二叉树】Java递归实现二叉树遍历
参考链接:https://www.cnblogs.com/yaobolove/p/6213936.html 这有一棵树: 1.节点对象 package com.tree.mybinarytree; / ...
- Salesforce Admin篇(一)Duplicate Management
参考资料:https://help.salesforce.com/articleView?id=managing_duplicates_overview.htm Salesforce 很重要的一个平台 ...
- Codeforces Gym101170I:Iron and Coal(建多幅图+多次BFS)***
题目链接 题意 有n个点,其中有m个点是铁矿,k个点是煤,从1号点出发,你可以派一些士兵跑向不同的点,问占领至少一个铁矿和一个煤的时候,最少需要占领多少个点. 思路 建两幅图,其中一幅是正向边,一幅是 ...
- Flutter学习笔记(6)--Dart异常处理
如需转载,请注明出处:Flutter学习笔记(6)--Dart异常处理 异常是表示发生了意外的错误,如果没有捕获异常,引发异常的隔离程序将被挂起,并且程序将被终止: Dart代码可以抛出并捕获异常,但 ...