webpack具有一般的构建工具具有的功能:
1.代码转换:例如 scss编译为css ,typescript编译为js等
2.文件压缩,文件优化。
3.代码分割.:提取公用的代码。首屏展示的时候不需要的代码,需要的时候才执行加载,懒加载的过程。
4.模块合并。
5.自动刷新。6.代码校验。
webpack一些核心的概念
1.Enter:打包的入口-进行入口文件的配置
2.Output:出口,打包生成的bundle.js文件
3.Loader:模块转换器-将非js文件转换为js文件。
4.Plugin插件:打包过程中特定的时间插入特定功能的代码。
5.Module模块:默认只识别js模块,如果是其他的,需要对应的loader转换为js文件。
6.Chunk(代码块)--打包生成的文件叫做chunk文件
7两种环境——开发环境和生产环境
全局下载webpack之后-查看webpack版本命令:webpack-v
当前项目文件夹下 执行webpack命令之后-进行打包
基本的命令(命令指定入口文件和出口文件)示例--webpack src/index.js dist/bundle.js
一般需要配置文件 webpack.config.js文件----如果有配置文件的话 执行webpack 会自动找配置文件执行自动化打包
npm脚本的配置及webpack基本命令使用
packjson文件中scripts命令配置-
“build”:“webpack --diaplay-modules”-显示隐藏的打包文件
“build”:“webpack --diaplay-modules --config webpack.config2.js”-显示隐藏的打包文件并指定配置文件名
“start”: "webpack-dev-server --open" --开发环境打包并在浏览器自动打开
"server": "node server.js" -配置开发服务器 运行执行npm run server
基础loader使用示例:
安装 npm install --save- dev css-loader style-loader 作用加载css文件--其中css-loader将css转换为js 后者是插入到html中
file-loader --加载图片文件的
xml-loader --加载xml文件的
webpack配置
enter output module plugins resolve devtools devServer
module 中配置 rules[{正则,一个或者多个loader}]---多个loader的话 如果有先后执行顺序的话后边的是先执行的
plugin中配置各种plugin插件扩展webpack的功能
devtools :“inline-source-map”---开启source map 功能 或者配置为 “cheap-module-eval -source-map”
一般情况下是在开发环境下开发,生产环境下不开启
devServer:{
contnetBase:"./dist",
port: 8080 //默认是8080端口
}
多入口打包生产多个bundle
多入口多出口文件配置示例:
entry:{
app:"./src/index.js",
print:"./src/print.js"
}
output:{
filename:"[name].bundle.js", ---name是变化的数据和entry是对应的
path:path.resolve(__filename,"dist")
}
常用的plugin插件
常用的plugin插件:不是webpack内部的插件的话 需要进行require进行引入
html-webpack-plugin ---生成html页面
clwan-webpack-plugin ---清除指定文件夹
uglifyjs-webpack-plugin --插件压缩代码移除js文件中引用的但没有用到的代码文件 -tree-shaking
示例:
plugins:[
new CleanPlugin(["dist"]) ,----指定清除的文件夹
new HtmlPlugin({
template: index.html --指定生成html的模板
title: "mingcheg" ---指定生成html的title
})
]
source-map 代码调试映射
1.webpack 的watch 模式
2.webapck-dev-server 开发服务器
3. express webpack-dev-server 可自定义配置server模式
目的:方便调试,映射到反映的问题,知道代码是在哪一行执行的,本质上就是一个信息文件,存着打包文件与原文件之间的映射关系。
开发模式是在内存中打包 npm install --save -dev webpack-dev-server 开发服务器:特点是在内存中打包,内部实际上用了监视模式,如果配置的话,本地内存中打包并具有live-reload自动编译打包的作用
webpack-de-server内部配置比较固定,不方便自己配置的便捷性,引入了express webpack-dev-middleware中间件
安装 npm install --save-dev express webpack-dev-middleware express+开发中间件
根据api进行一个server.js 文件配置--在script文件中进行配置 "server":"node-server.js" 运行时执行npm run server
热膜替换(HMR)---应用于开发环境
只改变更新的内容--只对改变的内容进行服务器端的编译打包---更加方便的进行样式的调整
开启热模替换 和live-reload 的区别的是 “替换”“重新打包编译”
devServer:{contentBase: "./dist",hot:true} ----开启热膜替换
同时在plugins指定配置hmr插件 示例:new webapck.HotModuleReplacementPlugin() --引入hmr插件
下边的一些插件 将会继续更新