webpack5文档解析(上)
webpack5
声明:所有的文章demo都在我的仓库里 webpack5
起步
概念
webpack
是用于编译JavaScript
模块。
一个文件依赖另一个文件,包括静态资源(图片/css等),都会视为依赖关系。
在webpack处理程序时,会在入口处,根据依赖关系进行处理,生成一个依赖关系图,最终将所有的文件打包成一个bundle。
当浏览器发起请求时,大大节约了时间。
更新方向
- 尝试用持久性缓存来提高构建性能。
- 尝试用更好的算法和默认值来改进长期缓存。
- 尝试用更好的 Tree Shaking 和代码生成来改善包大小。
- 尝试改善与网络平台的兼容性。
- 尝试在不引入任何破坏性变化的情况下,清理那些在实现 v4 功能时处于奇怪状态的内部结构。
- 试图通过现在引入突破性的变化来为未来的功能做准备,使其能够尽可能长时间地保持在 v5 版本上。
安装
创建文件夹并初始化,文件夹中会出现package.js
文件,是基础的一些配置,包括文件名称/版本/描述/入口文件/关键字/作者等。
npm init -y
安装webpack
和webpack-cli
工具,可以在终端运行webpack
相关命令
node 8.2/npm 5.2.0提供npx命令,可以使用npx webpack
去安装npx
根据相应的提示,安装webpack-cli
和webpack
npm install -D webpack-cli
我安装的版本如下:
"devDependencies": {
"webpack": "^5.1.0",
"webpack-cli": "^4.0.0"
},
打包
使用npx webpack
进行打包,会在/dist
文件夹中,生成mian.js
文件,这个是对index.js
文件以及相应依赖进行的打包文件
出现如下结果,表示打包成功
在浏览器中打开index.html,出现结果如下:
配置文件 webpack.config.js
在完成配置的webpack.config.js的文件夹后,再次打包,打包命令是npx webpack --config webpack.config.js
一般情况下,如果存在webpack.config.js文件,将默认选择根据这个配置文件进行打包,即npx webpack即可
其中--config表示根据什么文件配置进行打包,后面的参数就是对应的文件名称
配置文件里面都是一些配置,如loader/plugin/resolve
等
快捷方式
在package.json
文件中,配置script
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack"
},
可快速的通过npm run build
进行打包,效果跟之前的npx webpack
一致。
*** 以上代码在webpack-demo1
中
管理资源
由于webpack只能打包js文件,但是其他文件,如图片/css等,如何打包呢?
基本的思路都是将相应的资源都转化成js文件
css
正常的css文件例子如下
安装 style-loader
和css-loader
npm i --save-dev style-loader css-loader
在webpack.config.js
中配置相应的css
,顺序很重要,'style-loader','css-loader'
最终打包出来的是一个js文件
module:{
rules:[{
test:/\.css$/,
use:['style-loader','css-loader']
}]
}
上图展示的是在head中添加了style,由此我猜测,style-loader的作用是将css文件放置到head中去渲染,css-loader的作用是将css文件(包含其他形式的css,如.scss)转化成js文件
其他的比如less/sass等,都跟css写法保持一致,最需将匹配的test,改成相对应的文件后缀。
image图片
安装解析文件的loader,npm i --save-dev file-loader
并在module中进行配置
module:{
rules:[{
test:/\.(css|scss)$/,
use:['style-loader','css-loader']
},{
test:/\.(png|jpeg|jpg|svg)$/,
use:['file-loader']
}]
}
如上图所示,发现webpack以及将路径转义了。
其他形式的文件,都是以上面相应的方法进行安装和配置即可。
*** 以上代码在webpack-demo2
中
管理输出
当文件程序变得复杂,而且在entry
中使用多个入口,并输出多个bundle
,如果要手动在index.html
中添加,便使得整个代码看起来不便捷
这时使用插件html-webpack-plugin
html-webpack-plugin
这个插件可以自动更新index.html
中有关js引入的文件
安装npm i --save-dev html-webpack-plugin
使用:
const HtmlWebpackPlugin=require('html-webpack-plugin')
plugins:[
new HtmlWebpackPlugin({
title:'管理输出'
})
]
缺点是不能去除之前的旧文件,这时引入clean-webpack-plugin
clean-webpack-plugin
这个插件可去除/dist
文件
在构建前去除/dist
文件,可以达到效果
安装npm i --save-dev clean-webpack-plugin
使用:
const {CleanWebpackPlugin}=require('clean-webpack-plugin')
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title:'管理输出'
})
]
*** 以上代码在webpack-demo3
中
开发环境
这部分是在开发环境,切不可在生产环境使用。
配置环境
在webpack.config.js
中进行mode的配置
mode:'development'
定位错误(source map)
打包文件时,由于打包到一个文件里,如果出现语法错误,只会定位到打包后的文件,对于我们查找问题就不太方便。
source map有很多的配置,对于我们现在打包定位错误,只需其中的devtool
配置即可。
devtool: 'inline-source-map',
如webpack-demo4中的例子所示,print.js
中,刻意写错代码如:cnlll.log('This is output')
正常打包,在浏览器运行时,会在console里显示报错的文件,以及错误的原因。
自动编译
webpack-dev-server
插件提供一个简单的web server,且具有热加载的功能。
安装npm i --save-dev webpack-dev-server
在配置文件中配置:
devServer:{
contentBase:'./dist'
},
以上代码是告诉dev server,将dist文件下的文件,挂载到localhost:8080下。
在package.json
中进行配置口令运行 dev server
教程上建议如下配置
"start": "webpack-dev-serve --open"
在实践操作中,在执行npm run start
时,我出现以下报错
> webpack-demo4@1.0.0 start /Users/alicezhao/Desktop/learn/demos/my-notes/tools/webpack/webpack5/webpack-demo4
> webpack-dev-server --open
internal/modules/cjs/loader.js:969
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /Users/alicezhao/Desktop/learn/demos/my-notes/tools/webpack/webpack5/webpack-demo4/node_modules/webpack-dev-server/bin/webpack-dev-server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
at Function.Module._load (internal/modules/cjs/loader.js:842:27)
at Module.require (internal/modules/cjs/loader.js:1026:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.<anonymous> (/Users/alicezhao/Desktop/learn/demos/my-notes/tools/webpack/webpack5/webpack-demo4/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
at Module._compile (internal/modules/cjs/loader.js:1138:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
at Module.load (internal/modules/cjs/loader.js:986:32)
at Function.Module._load (internal/modules/cjs/loader.js:879:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/alicezhao/Desktop/learn/demos/my-notes/tools/webpack/webpack5/webpack-demo4/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack-demo4@1.0.0 start: `webpack-dev-server --open`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack-demo4@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/alicezhao/.npm/_logs/2020-10-15T07_50_22_972Z-debug.log
我的有关webpack
版本配置如下
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^4.5.0",
"webpack": "^5.1.0",
"webpack-cli": "^4.0.0",
"webpack-dev-server": "^3.11.0"
},
我在github上找到相关的问题,看这里
是webpack-dev-server
版本不支持webpack5.0
和webpack-cli4.0
最终在package.json
应做如下配置
"start": "webpack serve --mode development --env development"
再执行npm run start
就正常启动。
*** 以上代码在webpack-demo4
中
关注我,webpack5文档还有后续...
我的仓库地址,github,欢迎star~~
webpack5文档解析(上)的更多相关文章
- webpack5文档解析(下)
声明:所有的文章demo都在我的仓库里 代码分离 代码分离的有点在于: 切割代码,生成不同的打包文件,按需加载这些文件. 每个bundle的体积更小 控制外部资源的加载顺序 常用的方法有: 入口起点: ...
- JavaScript : DOM文档解析详解
JavaScript DOM 文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...
- ios-XML文档解析之SAX解析
首先SAX解析xml *xml文档的格式特点是节点,大体思路是把每个最小的子节点作为对象的属性,每个最小子节点的'父'节点作为对象,将节点转化为对象,输出. 每个节点都是成对存在的,有开始有结束.有始 ...
- Android XML文档解析(一)——SAX解析
---------------------------------------------------------------------------------------------------- ...
- iOS网络编程笔记——XML文档解析
今天利用多余时间研究了一下XML文档解析,虽然现在移动端使用的数据格式基本为JSON格式,但是XML格式毕竟多年来一直在各种计算机语言之间使用,是一种老牌的经典的灵活的数据交换格式.所以我认为还是很有 ...
- “Word自动更改后的内容保存到通用文档模板上。是否加载该模板?“的解决办法
在win7系统下,Word2010出现了不能正常关闭.打开一个已有word文档,点击右上角关闭按钮后,先提示"word已停止工作,windows正在检查该问题的解决方案",随后提示 ...
- jsoup -- xml文档解析
jsoup -- xml文档解析 修改 https://jsoup.org/cookbook/modifying-data/set-attributes https://jsoup.org/cookb ...
- [转载]Java动态填充word文档并上传到服务器
一. 需求背景 在一些特殊应用场合,客户希望在服务器上生成文档的同时并填充数据,客户端的页面不显示打开文档,但是服务器上生成文档对服务器压力很大,目前服务器上生成文档第一种就是方式是jacob, 但是 ...
- [原创]Java动态填充word文档并上传到服务器
一. 需求背景 在一些特殊应用场合,客户希望在服务器上生成文档的同时并填充数据,客户端的页面不显示打开文档,但是服务器上生成文档对服务器压力很大,目前服务器上生成文档第一种就是方式是jacob, 但是 ...
随机推荐
- [03] C# Alloc Free编程
C# Alloc Free编程 首先Alloc Free这个词是我自创的, 来源于Lock Free. Lock Free是说通过原子操作来避免锁的使用, 从而来提高并行程序的性能; 与Lock Fr ...
- linux基础命令一、
命令格式: 命令 -选项 参数 uname -r 查看内核版本 uname -m 查看系统版本 alias 别名. 举例: alias grep ='grep --color=auto' ...
- 服务器搭建远程docker深度学习环境
服务器搭建远程docker深度学习环境 本文大部分内容参考知乎文章 Docker+PyCharm快速搭建机器学习开发环境 搭建过程中出现ssh连接问题可以查看最后的注意事项 Docker Docker ...
- mysql主从模式部署
1.下载tar.gz格式的安装包 下载地址https://dev.mysql.com/downloads/mysql/ 2.解压 tar -zvxf mysql-5.7.19-linux-glibc2 ...
- Linux下rm操作误删恢复
1.查看被误删的分区 df /home/Java/... 一直到刚刚被误删的文件的路径下 2.在debugfs打开分区 open /dev/ssl 最好这个分区可能不一样,根据上 ...
- MaaS系统概述
摘要:共享经济正改变着人们的生活方式,城市公共交通系统应该顺应共享经济的潮流进行转型.近年来,西方国家提出的“出行即服务(MaaS)”理念为我国解决日益严重的城市交通拥堵问题提供了新的思路.基于Maa ...
- Git裸仓库的分支(Active Branch)切换
Git裸仓库的Active Branch切换方法 在服务器上通过init --bare创建了一个裸仓库作为远程仓库使用,并且存在三个分支(master/kid/develop),但在使用中发现代码虽然 ...
- Java Web学习(五)session、cookie、token
文章更新时间:2020/09/14 一.引言 动态网页兴起后,会话管理变成开发者需要考虑的一个问题,由于HTTP请求是无状态的,为了区分每个用户,此时引入了会话标识(sessionId)的概念,但是存 ...
- 用 Java 做个“你画手机猜”的小游戏
本文适合有 Java 基础的人群 作者:DJL-Lanking HelloGitHub 推出的<讲解开源项目>系列.有幸邀请到了亚马逊 + Apache 的工程师:Lanking( htt ...
- pwnable.kr-mistake-witeup
阅读代码后思路: 实践: 1111111111 其异或值:0000000000 欧克,愉快的结束. 需要经常多看代码,对代码的书写习惯有了解,比如这一块17行一般人书写时都会习惯性加括号的.