webpack 4 基础知识点梳理
webpack安装
项目内安装
npm install webpack webpack-cli --save-dev
npx webpack -v // 查询版本
npm info webpack // 查看webpack的历史发布信息
npm install webpack@x.xx webpack-cli -D // 安装指定版本
webpack配置文件
默认配置文件 webpack.config.js
不使用默认的配置文件,例如想用 webpackconfig.js
作为配置文件并执行
npx webpack --config webpackconfig.js
修改package.json字段
"scripts":{
"bundle": "webpack" // 这里不加npx,因为npm run执行的命令,会优先使用项目工程里的包,效果和npx类似
}
webpack核心概念
entry
指定打包入口文件
output
打包后的文件位置
loader
webpack默认只知道如何处理js模块,其他格式如css、图片等进行模块处理就需要用loader了
loader执行顺序:从右到左,从下到上
// webpack.config.js
...
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: 'file-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath:'images/'
}
}
}
]
}
...
file-loader
npm install file-loader -D
处理静态资源模块,它做的事情就是把打包入口中识别出的资源模块,移动到输出目录,并且返回一个地址名称。
使用场景:txt、svg、csv、excel、图片等
url-loader
npm install url-loader -D
- 可以处理file-loader能够处理的所有事情,但是遇到jpg格式的模块,会把该图片转换成base64格式字符串,并打包到js里。对小体积的图片比较合适,对大图片不合适。
- 缺点:增加打包后的js的体积,用户的加载速度会变慢
css-loader & style-loader
npm sintall style-loader css-loader -D
它能分析css模块之间的关系,并合成一个css
style-loader会把css-loader生成的内容,以style挂载到页面的header部分
module: {
rules: [
...
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
},
...
]
},
sass-loader
npm instal sass-loader node-sass -D
sass-loader把sass语法转换成css,依赖node-sass模块
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"]
}
stylus-loader
postcss-loader
npm install post-loader autoprefixer -D
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
},
- 新建post.config.js
module.exports = {
plugins: [require("autoprefixer")]
};
plugins
- plugin可以在webpack运行到某个阶段的时候,帮你做一些事情,类似于生命周期的概念
- 插件目录:https://www.webpackjs.com/plugins/
html-webpack-plugin
npm install -D html-webpack-plugin
- 它会在打包结束后,自动生成一个html文件,并把打包生成的js模块引入到该html中
clean-webpack-plugin
npm install -D clean-webpack-plugin
- 在打包前都会清除之前的文件,生成新的带有hash值的文件
// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const webpack = require("webpack");
module.exports = {
...
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: "html 模板",
template: "./index.html"
}),
...
],
...
};
mini-css-exract-plugin
- 现在css都是放在style里,这个插件可以抽离css成独立的文件
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
}
CommonsChunkPlugin
- https://www.webpackjs.com/plugins/commons-chunk-plugin/
- 多页面打包时,可以拆出公共的模块
- 通过将公共模块拆出来,最终合成的文件能够在最开始的时候加载一次,便存到缓存中供后续使用。这个带来速度上的提升,因为浏览器会迅速将公共的代码从缓存中取出来,而不是每次访问一个新页面时,再去加载一个更大的文件。
sourceMap
源代码与打包后的代码的映射关闭
在dev模式下默认开启,可以在配置文件中设置关闭
devtool: "none"
webpack-dev-server
提升开发效率的神器,修改完代码之后不再需要重新打包、刷新浏览器
启动服务后,会发现dist目录没有了,这是因为dev-server不会把打包后的模块放在dist目录下,而是放在内存中,提升速度
npm install webpack-dev-server -D
// package.json
"scripts": {
"server": "webpack-dev-server",
...
}
// webpack.config.js
...
devServer: {
contentBase: "./dist",
open: true,
hot: true,
hotOnly: true
},
...
跨域 & proxy
主要用于开发环境接口联调,上线之后解决跨域可以用nginx转发
创建server.js,启动一个服务器,mock一个接口
npm i express axios -D
// package.json
"scripts": {
"server": "webpack-dev-server",
"mock": "node server.js"
},
// server.js
const express = require("express");
const app = express();
app.get("/api/info", (req, res) => {
res.json({
name: "xbl",
age: 18,
msg: "hello,xbl"
});
});
app.listen("9092");
- 项目中安装axios
import axios from "axios";
axios.get("/api/info").then(res => {
console.log(res);
});
- 修改webpack.config.js设置服务器代理
...
devServer: {
proxy: {
"/api": {
target: "http://localhost:9092"
}
}
},
...
HMR 热模块替换
hot module replacement
需要使用module.hot.accept来观察模块更新,从而更新
头部引入webpack
// webpack.config.js
const webpack = require("webpack");
...
devServer: {
contentBase: "./dist",
open: true,
hot: true,
hotOnly: true
},
...
// 插件出添加
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: "html 模板",
template: "./index.html"
}),
new webpack.HotModuleReplacementPlugin()
],
Babel处理ES6
babel-loader
- babel-loader是webpack与babel的通信桥梁,不会做把es6转成es5的工作,这部分需要@babel/preset-env来做
@babel/core
- Babel compiler core.
@babel/preset-env
npm i babel-loader @babel/core @babel/preset-env -D
@babel/preset-env中包含了es6转es5的转换规则
const arr = [new Promise(() => {}), new Promise(() => {})];
arr.map(item => {
console.log(item);
});
- 以上几步还不够,Promise没有转换过来,这就需要借助 @babel/polyfill,把es的新特性都装进来,来弥补低版本浏览器中缺失的特性
@babel/polyfill
npm install --save @babel/polyfill
// webpack.config.js
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options:{
presets:["@babel/preset-env"]
}
},
// index.js
import "@babel/polyfill"
- 此时会发现打包的体积大了很多,这是因为polyfill默认会把所有特性注入进来,如何做到只注入用到的特性呢?
...
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options:{
presets:[
["@babel/preset-env",
{
targets:{
edge:"17",
firefox:"60",
chrome:"67",
safari:"11.1"
},
useBuildtIns:"usage"
}
]
]
}
},
...
- 当我们开发的是组件库,工具库这些场景的时候,polyfill就不适合了,因为polyfill注入到全局变量中,会污染全局变量,所以推荐闭包的方式:@babel/plugin-transform-runtime
@babel/plugin-transform-runtime
npm i -D @babel/plugin-transform-runtime
npm i -S @babel/runtime
使用方法
- index.js中不需要再引入polyfill
// import "@babel/polyfill"
- 修改配置文件,注释掉之前的presets,添加plugins
plugins: [
...
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
...
],
babelrc文件
可以用.babelrc文件代替以上plugins中的配置
新建.babelrc文件
// .babelrc
{
plugins: [
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}
// webpack.config.js
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
配置React打包环境
安装react
npm install react react-dom --save
编写react代码
// index.js
import "@babel/polyfill";
import React, { Component } from "react";
import ReactDom from "react-dom";
class App extends Component {
render() {
return <div>hello world</div>;
}
}
ReactDom.render(<App />, document.getElementById("app"));
安装插件
安装babel与react转换的插件
npm install -D @babel/preset-react
新建babelrc文件
{
"presets": [["@babel/preset-env"], "@babel/preset-react"]
}
配置vue打包环境
npm i -D vue vue-loader vue-template-compiler
使用vue-loader解析.vue文件,template-compiler解析模板
{
test: /\.vue$/,
loader: "vue-loader"
},
...
plugins:[
new VueLoaderPlugin()
]
- 这个插件是将你定义过的其他规则复制并应用到
.vue
文件里相应语言的块。例如,如果你有一条匹配规则/\.js$/
的规则,那么它会应用到.vue文件里的<script>
webpack 4 基础知识点梳理的更多相关文章
- 最全Python基础知识点梳理
本文主要介绍一些平时经常会用到的python基础知识点,用于加深印象,也算是对于学习这门语言的一个总结与回顾.python的详细语法介绍可以查看官方编程手册,也有一些在线网站可以学习 python语言 ...
- mysql基础知识点梳理
##本单元目标 一.为什么要学习数据库 二.数据库的相关概念DBMS.DB.SQL 三.数据库存储数据的特点 四.初始MySQL MySQL产品的介绍MySQL产品的安装 ★MySQL服务的启动和停止 ...
- java基础知识点梳理
前言 在别人追问我以下几个问题,自己在问题回答上不够全面和准确,对此自己把专门针对这几个问题进行总结! java相关问题 1.Java中构造方法跟普通方法的区别? 构造方法与普通方法的调用时机不同. ...
- Jquery基础知识点梳理
1.第一个jq程序 a.jq对象和dom对象的方法不能混用 b.dom对象转换成jq对象$(dom),jq对象转换成dom对象jq[0],转换之后方法就可以使用了 2.jq选择器 基本选择器 $('b ...
- JavaScript基础知识梳理,你能回答几道题?
在学习JavaScript的时候,总是这里学一点,那里学一点,很的很零星,很杂,没有很系统的去学习,感觉好像JavaScript的知识点都了解了,但是真正要说起来,又不知道从何说起! 最深刻的体会就是 ...
- MySQL 基础知识梳理
MySQL 的安装方式有多种,但是对于不同场景,会有最适合该场景的 MySQL 安装方式,下面就介绍一下 MySQL 常见的安装方法,包括 rpm 安装,yum 安装,通用二进制安装以及源码编译安装, ...
- Golang 基础之基础语法梳理 (二)
大家好,今天将梳理出的 Go语言基础语法内容,分享给大家. 请多多指教,谢谢. 本次<Go语言基础语法内容>共分为三个章节,本文为第二章节 Golang 基础之基础语法梳理 (一) Gol ...
- [SQL] SQL 基础知识梳理(一)- 数据库与 SQL
SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...
- [SQL] SQL 基础知识梳理(二) - 查询基础
SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序 这是<SQL 基础知识梳理( ...
随机推荐
- PHP debug_backtrace() 函数
PHP Error 和 Logging 函数 实例 生成 PHP backtrace: <?php function a($txt) { b("Glenn"); } func ...
- PHP后台批量删除数据
html <form action="" method="post"> <div><input type="submit ...
- JNI在C和C++中的调用区别
C-style JNI looks like (*env)->SomeJNICall(env, param1 ...) C++ style JNI looks like env->Some ...
- OpenKM安装(CentOS6)
OpenKM全称是Open Knowledge Management,是一个DMS(文档管理系统).本文介绍如何在CentOS下安装它.本文的安装程序和资料全部来自OpenKM官网:http://ww ...
- mongodb 安装、启动
MongoDB 之 你得知道MongoDB是个什么鬼 MongoDB - 1 最近有太多的同学向我提起MongoDB,想要学习MongoDB,还不知道MongoDB到底是什么鬼,或者说,知道是数据 ...
- 开源安卓Android流媒体音视频播放器实现声音自动停止、恢复、一键静音功能源码
本文转自EasyDarwin团队John的博客:http://blog.csdn.net/jyt0551/article/details/60802145 我们在开发安卓Android流媒体音视频播放 ...
- spring 过滤器简介
spring 过滤器简介 过滤器放在容器结构的什么位置 过滤器放在web资源之前,可以在请求抵达它所应用的web资源(可以是一个Servlet.一个Jsp页面,甚至是一个HTML页面)之前截获进入的请 ...
- [Phoenix] 一、快速入门
Phoenix是一个开源的HBASE SQL层.Phoeinx可以用标准的JDBC API替代HBASE client API来创建表,插入和查询HBASE中的数据. Phoenix作为应用层和HBA ...
- win10获取注册表权限
1.cmd中输入regedit打开注册表 2.在需要的注册表项中右键选择“权限”
- Timing breakdown phases explained
https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#timing-explana ...