先来一张图:诠释一下webpack该干的活
**作用:**分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
规范:
Common
接着说一下webpack4.0的大特色0配置
webpack4可以支持0配置打包,这里所说的0配置又是什么呢?其实吧0配置产出的东西,那根本是无法用的,因为前端工程化的建设不是千篇一律的,固定产出的东西,又能有多么巧合完全符合你的需求?
在使用webpack
进行打包的时候,默认情况下会将src
下的入口文件(index.js
)进行打包
// node v8.2
版本以后都会有一个npx
// npx
会执行bin
里的文件
npx webpack
// 不设置mode的情况下 打包出来的文件自动压缩
npx webpack --mode development
// 设置mode为开发模式
,打包后的文件不被压缩
当执行npx webpack
命令的时候,webpack
会自动查找项目中src
目录下的index.js
文件,然后进行打包,生成一个dist
目录并存在一个打包好的main.js
文件
这些算是0配置的操作了,名字都是定义好的,不能变,鸡肋否?
自定义常用功能:
1、代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
2、文件优化:压缩 JavaScript、CSS、HTML 代码,压缩合并图片等。
3、代码分割:提取多页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
4、模块合并:在采用模块化的项目里会有很多个模块和文件,需要构建功能把模块分类
合并成一个文件。
5、自动刷新:监听本地源代码的变化,自动重新构建、刷新浏览器。
6、代码校验:在代码被提交到仓库前需要校验代码是否符合规范,以及单元测试是否通
过。
7、自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统。
***构建:***其实是工程化、自动化思想在前端开发中的体现,把一系列流程用代码去实现,让代码自动化地执行这一系列复杂的流程。 构建给前端开发注入了更大的活力,解放了我们的生产力。
初始化项目
mkdir zhufeng-webpack
cd zhufeng-webpack
npm init -y
核心概念
1、Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。
2、Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会3、从配置的 Entry 开始递归找出所有依赖的模块。
4、Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。
5、Loader:模块转换器,用于把模块原内容按照需求转换成新内容。
6、Plugin:扩展插件,在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果
或做你想要的事情。
7、Output:输出结果,在 Webpack 经过一系列处理并得出最终想要的代码后输出结
果。
webpack工作过程浅析
Webpack
启动后会从Entry
里配置的Module
开始递归解析 Entry
依赖的所有 Module
。 每找到一个 Module
, 就会根据配置的Loader
去找出对应的转换规则,对 Module
进行转换后,再解析出当前 Module
依赖的 Module
。 这些模块会以 Entry
为单位进行分组,一个 Entry
和其所有依赖的 Module
被分到一个组也就是一个 Chunk
。最后 Webpack
会把所有 Chunk
转换成文件输出。 在整个流程中 Webpack
会在恰当的时机执行 Plugin
里定义的逻辑。
配置webpack
npm install webpack webpack-cli -D
创建src目录
mkdir src
创建dist目录
mkdir dist
基本配置文件
创建dist
创建index.html
配置文件webpack.config.js
entry
:配置入口文件的地址
output
:配置出口文件的地址
module
:配置模块,主要用来配置不同文件的加载器
plugins
:配置插件
devServer
:配置开发服务器
mode:
设置开发模式
const path=require('path');
module.exports={
************打包方式一***********//这种写法是将所有的匹配的js都打包成一个bundle.js
entry: {'./src/A.js',./src/B.js,./src/C.js}
output: {
path: path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
***************打包方式二***********//这种写法将每个页面要用到的js单独打包
entry: {
"index": "./src/index.js",
"test": "./src/test.js"
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js" //此处通过name自动会抓取对应的key
}, //[name].[hash:8].js这样写可以定制哈希长度和哈希值出现的位置
module: {},
plugins: [],
devServer: {},
mode: "development" //打包模式,不指定默认发布模式
}
在dist目录下创建index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
配置开发服务器
npm install webpack-dev-server -D
contentBase 配置开发服务运行时的文件根目录
host:开发服务器监听的主机地址
compress 开发服务器是否启动gzip等压缩
port:开发服务器监听的端口
1,在webpack.config.js中添加
devServer:{
contentBase:path.resolve(__dirname,'dist'),
host:'localhost',
compress:true,
port:8080
}
2,在package.json添加
"scripts": {
"build": "webpack --mode", //打包代码到目录中
"dev": "webpack-dev-server" //将代码打包到内存中-更快
}
3,测试代码
a)终端输入npm run build执行webpack代码,此时在build中会看到打包生成的bundle.js
b)终端输入npm run dev 执行server端,此时程序会运行一个服务运行页面
**
热更新
一、首先引入webpack
const webpack=require("webpack");
二、在devServer中开启热更新模式hot:true
devServer: {
contentBase: path.resolve(__dirname, "dist"),
host: "localhost",
compress: true,
port: 8008,
hot: true
},
三、引入热更新插件
plugins: [
new webpack.HotModuleReplacementPlugin()
],
四、监控热更新-在index.js里面添加一句代码
if (module.hot) {
module.hot.accept()
}
自动产出HTML
一、安装并使用html-webpack-plugin
const htmlWebpack = require("html-webpack-plugin")
二、在插件数组中实例化对象
plugins: [
new htmlWebpack({
hash: true, //给引入文件添加hash值防止缓存
minify:{ //文件压缩
collapseWhitespace:true, //去掉空白
removeAttributeQuotes:true //去掉引入资源“引号”
},
template: "./src/index.html",
filename: "index.html",
chunks:["index"] //各页面按entry的key,加载此页面所指定要加载的js等资源,数组,可多个
})
],
先清空再build
一、安装并使用clean-webpack-plugin
const cleanWebpack = require("clean-webpack-plugin")
二、直接使用
plugins: [
new cleanWebpack(["./dist"]), //此处注意执行顺序
.
.
.
]
支持加载css文件
**
一、 什么是Loader
通过使用不同的Loader
,Webpack
可以要把不同的文件都转成JS
文件,比如CSS
、ES6/7
、JSX
等
test:匹配处理文件的扩展名的正则表达式
use:loader名称,就是你要使用模块的名称
include/exclude:手动指定必须处理的文件夹或屏蔽不需要处理的文件夹
query:为loaders提供额外的设置选项
二、 loader三种写法
一、安装 css-loader
style-loader
less
less-loader
等所选择编译器的插件(此处less
)
加载CSS文件,CSS文件有可能在node_modules里,比如bootstrap和antd
写法一loader
、
module: {
rules: [
{
test: /\.css/,
loader:['style-loader','css-loader']
}
]
}
写法二 use
module: {
rules: [
{
test: /\.css/,
use:['style-loader','css-loader']
}
]
},
写法三use+loader
module: {
rules: [
{
test: /\.css/,
include: path.resolve(__dirname, "./public/css"),//包含指定文件夹
exclude: /node_modules/, //排除某些可能含有相同类型文件的文件夹
use: [{
loader: "style-loader",
options: {
insertAt: "top" //从什么位置放入style
}
}, "css-loader"]
},
{
test: /\.less/, //解析less
include: path.resolve(__dirname, "./public/css"),
use: [{
loader: "style-loader",
options: {
insertAt: "top"
}
}, "css-loader","less-loader"]
}
]
},
提示:如果没能执行成功很可能是在js页面没有导入资源
import "../public/css/index.less"
插件
…待续
如有错误,敬请留言指点,我立马改正,以免误导他人~谢谢!