Webpack多入口文件、热更新等体验
Webpack现今流行的前端打包工具,今儿本人也来分享下自己学习体验。
一、html-webpack-plugin
实现html模板文件的解析与生成
- 在plugins加入HtmlWebpackPlugin的配置,如果是多个入口文件,则需要对应加入多个HtmlWebpackPlugin功能。
var HtmlWebpackPlugin = require('html-webpack-plugin');
entry:{
ma: './src/ma', /** .:必须要,表示运行时的根目录,否则找不到文件,且不报错 */
mb: './src/mb'
},
output: {
path: './dist',
filename: '[name].js'
},
plugins: [
new HtmlWebpackPlugin({ //可以模板,直接引用files对象,是webpack中state对象
title: '模板A',
chunks: ['ma']
}),
new HtmlWebpackPlugin({
filename: 'mb.html',
title: '模板B',
chunks: ['mb']
})
]
如上代码所示:
- 两个入口文件,ma与mb,所以配置了两个HtmlWebpackPlugin实例
- HtmlWebpackPlugin实例配置项:
- title:模板title
- filename:输出的html文件名称
- chunks:包含的文件,可以entry和其他模块chunk的模块,插件导入到 模板时 没有排序,但都是。
- excludeChunks:被排除的模块
- chunksSortMode:添加到页面时模块的排序 none|default|function
- template:模板文件路径所在位置
- templateContent:一个函数,使用编程语言创建模板
- inject:js插入位置:body, head
- 模板可以访问的配置项
- files:为webpack的stats项,可以在模板文件中使用或者
- webpackConfig:webpackConfig的配置项
- options:在模板文件中可以获取的webpack配置项。
- HtmlWebpackPlugin的事件使用:
事件名称 |
时机 |
同步/异步 |
---|---|---|
html-webapck-plugin-before-html-generation |
生成htmlPluginData之前触发 |
async |
html-webpack-plugin-before-html-processing |
htmlPluginData插入到html模板之前触发 |
async |
html-webpack-plugin-alert-asset-tags |
验证资源,以及为资源做标记时触发 |
async |
html-webpack-plugin-after-html-processing |
htmlPluginData插入到html模板之后触发 |
async |
html-webpack-plugin-after-emit |
生成html目标文件后触发 |
async |
html-webpack-plugin-alert-chunks |
验证资源块信息 |
sync |
var compile = webpack(config);
compile.plugin('compilation', function( compilation, callbak) {
console.log('compilation');
compilation.plugin('html-webpack-plugin-before-html-processing', function (htmlPluginData, callbak) {
console.log(htmlPluginData)
callbak()
})
})
注意:
- 必须要监测compile的compilation事件
- 然后在回调compilation事件时,对compilation参数进行plugin的事件的注册 。
二、webpack.optimize.CommonsChunkPlugin
抽取公共模块为一个独立的文件,一是指定的多个模块打成一个包;二是在指定的chunks中抽取公共模块
参数名称 |
说明 |
---|---|
name |
可以是字符串,或者是数组,如果指定为entry中一个名称,则只产生此vendor,也可以是一个入口文件列表 |
filename |
输出文件名 |
minChunks |
单独文件最小引用数,如设置3,表示同一个模块只有被3个以外的页面引用时才打包 |
children |
返回,把第三方的vendor包,分解到业务包中 |
chunks |
数组,从指定的源模块提供共用vendor包 |
1. vendor打成一个包:
entry:{
vendor: ['./src/vendor-jquery', 'bootstrap']
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
})
]
2. CommonsChunkPlugin正确的引入方式
3. 用manifest实现js库的增量更新
如果输出文件名包含hash值,需要引入以下两个插件:
- HashedModuleIdsPlugin:算hash值
- 利用CommonsChunkPlugin配置,他是manifest配置模块所有的依赖抽象,如果mainfest不更新,则html会找不到js文件。
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
})
三、webpack 样式打包
这其中就包含对css文件、静态资源以及css所包含的资源文件等处理。
- css-loader:解析css代码
- style-loader:css代码写入到js文件中
- 配置代码如下:
loaders:[
{
test:/.css$/, /*不能加引号*/
loader: 'style-loader!css-loader'
}
]
注意:test后面不能加引号,因这个是正则式
1. 样式文件单独存在,但不能处理静态资源
extract-text-webpack-plugin:抽取样式为单独的文件
- 参数配置说明
- ExtractTextPlugin.extract(arg1,arg2,arg3)
- arg1: 可选参数,传入一个loader,当css没有被抽取的时候可以使用该loader
- arg2:必填参数,用于编译解析css文件的loader
- arg3:额外选,暂只可传publicPath,表示当前loader的路径
- ExtactTextPlugin在Plugins中构造时,至少需要传入一个文件名参数
filename文件名,可以指定一个固定的,也可用[name].[id].[contenthash]来指定文件名,[name]:与entry中的chunk名称一致,[id]:将entry的chunk的id一致;[contenthash]:根据内容生成hash值
参数名称 |
说明 |
---|---|
id |
可先参数,插件实例的惟一标识,缺省会自动生成 |
filename |
文件名,可以指定一个固定的,也可用[name].[id].[contenthash]来指定文件名,[name]:与entry中的chunk名称一致,[id]:将entry的chunk的id一致;[contenthash]:根据内容生成hash值 |
options |
allchunks:是否将所有额外的chunk都压缩一个文件;disable:禁止使用此插件 |
代码如下(webpack2.x):
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module:{
loaders:[
{
test:/.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin('[name].css')
]
2. file-loader实现css中图片或web字体文件打包
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module:{
loaders:[
{
test:/.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','postcss-loader']
})
},
{
test: /.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader?name=fonts/[name].[ext]'
}
]
}
参数说明:
参数名称 |
说明 |
---|---|
name |
配置输出文件名,例如:name=[name].[hash].[ext] |
name子节点配置说明 | |
[ext] |
扩展名 |
[name] |
文件名 |
[path] |
相对于上下文的路径 |
[hash] |
hash值 |
输出配置参数 | |
publicPath |
公共资源路径(也可以说是静态资源,就是不参与打包的编译过程的资源) |
outputPath |
输出资源路径(也可以说是静态资源,就是不参与打包的编译过程的资源) |
publicPath和outputPath使用示例代码:
use: "file-loader?name=[name].[ext]&publicPath=assets/foo/&outputPath=app/images/"
3. postcss实现浏览器兼容
代码如下(webpack2.x):
var autoprefixer = require('autoprefixer');
module:{
loaders:[
{
test:/.css$/,
loader: ExtractTextPlugin.extract({
use: ['css-loader','postcss-loader']
})
}
]
},
plugins: [
new webpack.LoaderOptionsPlugin({
options:{
postcss:[autoprefixer()]
}
})
]
- webpack2.x不支持自定义配置节点,需要用webpack.LoaderOptionsPlugin加入自定义的插件配置节点。
- autoprefixer:一个postcss的插件,用于css3的兼容前端处理
-
- browsers:配置浏览器的版本,如:browsers:['last 2 versions']
四、热更新
- 安装 webpack-dev-server
- 热更新的概念
利用websocket实现,websocket-server识别到html、css和js的改变,就向websocket-client发送一个消息,websocket-client判断如果是html和css就操作dom,实现局部刷新,如果是js就整体刷新。
- 配置:
var config = require('./webpack.base.conf');
var webpack = require("webpack");
var WebpackDevServer = require('webpack-dev-server');
var compile = webpack(config);
compile.plugin('compilation', function( compilation, callbak) {
compilation.plugin('html-webpack-plugin-before-html-processing', function (htmlPluginData, callbak) {
callbak()
})
})
var isProc = true;
if(isProc){
compile.run(function(err,state){
console.log(err);
})
}else{
var server = new WebpackDevServer(compile,{
contentBase: './build',
hot: true,
inline: true, /*无效*/
historyApiFallback: true
});
server.listen(8080);
}
说明:
- hot:启动热更新
- inline:是不会自动刷新网页的,因为此参数只能在cli环境下用
- 在cli下实现页面自动刷新
webapck-dev-server --hot --inline --config=配置文件
无--inline时,只能在iframe模式下自动刷新:http://localhost:8080/webpack-dev-server/index.html
有--inline时,可以直接访问http://localhost:8080/index.html
进行自动刷新
五、cross-env
实现环境变量的定义
"prod": "cross-env NODE_ENV=prod node ./build/dev-server.js",
"dev": "cross-env NODE_ENV=dev node ./build/dev-server.js"
六、示例代码结构说明
前五节说了这么多,也许让你听得云里雾里的。没有代码来说明程序是多么枯燥啊(声明:此代码还包含后一章节的单元测试和e2e测试的配置)。代码结构图以及源码下载地址:
- build:打包配置文件
- dev-server.js:打包运行入口
- webpack.base.conf.js:打包plugins节点的配置
- webpack.core.conf.js:打包module以及entry的基本配置
- src:源码目录
- test:测试目录
- e2e:点到点测试
- unit:单元测试
- mocks:mockjs模拟数据
- 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 数组属性和方法
- Docker-软件工程集装箱技术
- PyQt5 技术篇-获取电脑屏幕桌面的宽、高和分辨率
- 使用Python快速抠图
- 值得白嫖的数据库常用操作语句汇总(数据库、数据表、数据操作)
- JavaScript 技术篇-js正则表达式匹配字符串左右两边是否包含空格
- 初入编程吓破胆?那是你还不懂这些!(高能预警)
- 振兴杯试题功能设计(准备)
- PyQt5 技术篇-Dialog窗口增加?问号按钮
- python课题:正弦函数 求圆形的阴影面积
- 华为学习笔记(SSM框架报错篇)
- Python通讯录作业
- 振兴杯试题分析:制作简单的登陆页(一)
- Python作业:BMI评估
- Python笔记
- JavaScript 技术篇-chrome利用ClipboardEvent写入剪切板,没成功的你就差一步