一. 什么是webpack
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。
Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。
二. 知识基础
- NPM提供了很多命令,例如install和publish,使用npm help可查看所有命令。
- 使用npm help <command>可查看某条命令的详细帮助,例如npm help install。
- 在package.json所在目录下使用npm install . -g可先在本地安装当前命令行程序,可用于发布前的本地测试。
- 使用npm update <package>可以把当前目录下node_modules子目录里边的对应模块更新至最新版本。
- 使用npm update <package> -g可以把全局安装的对应命令行程序更新至最新版。
- 使用npm cache clear可以清空NPM本地缓存,用于对付使用相同版本号发布新版本代码的人。
- 使用npm unpublish <package>@<version>可以撤销发布自己发布过的某个版本代码。
三. 安装及初始化
1. 安装
//全局安装
npm install -g webpack webpack-cli
2. 创建文件夹及初始化
//命令创建文件夹 也可手动创建
mkdir webpack4demo
//进入 也可在文件夹内,按住【shift】键,鼠标右键点击【在此处打开命令窗口】
cd webpack4demo
//初始化 带【-y】可省去初始文件信息初始的参数信息的确认回车操作 必要时可直接修改文件内容
npm init -y
- 创建文件夹scripts 里面创建index.js文件
- 创建webpack.config.js文件
3. 执行和查看
执行webpack --mode development将会生成dist/index.bundle.js
使用浏览器打开创建的 index.html,F12打开打开工具查看日志,正常查看则表示js文件正常引用
4. mode说明
可能的值有:none, development 或 production(默认)。
选项 | 描述 |
development | 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。 |
production | 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin |
none | 退出任何默认优化选项 |
四. webpack之loader
webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。
注意,loader 能够 import 导入任何类型的模块(例如 .css 文件),这是 webpack 特有的功能,其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是很有必要的,因为这可以使开发人员创建出更准确的依赖关系图。
在更高层面,在 webpack 的配置中 loader 有两个属性:
- test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。
- use 属性,表示进行转换时,应该使用哪个 loader。
常用loader :
- style-loader:将CSS添加到DOM的内联样式标签style里
- css-loader:允许将CSS文件通过require的方式引入,并返回CSS代码
- less-loader:处理less
- sass-loader:处理sass
- postcss-loader:用postcss来处理CSS
- file-loader:分发文件到output目录并返回相对路径
- url-loader 和 file-loader 类似,但是当文件小于设定的limit时可以返回一个Data Url
- html-minify-loader:压缩HTML文件
- babel-loader:把ES6文件转换成ES5文件
1. 对css,js进行编译打包合并生成md5
i 安装loader
-
css-loader: 加载.css文件
-
style-loader:使用<style>将css-loader内部样式注入到我们的HTML页面
安装style-loader, css-loader
npm install style-loader css-loader --save-dev
ii 修改文件或配置
创建文件a.js,c.js,a.css,更改index.js
-
- a.js
-
- c.js
-
- a.css
-
- index.js
iii 执行和查看
执行webpack --mode development将会看到一个带md5值得js文件,将他引入html中进行预览查看。
2. CSS中的图片处理
i 安装loader
-
file-loader:默认情况下,生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。
-
url-loader:功能类似于 file-loader,但是在文件大小(单位 byte)低于指定的限制时,可以返回一个 DataURL。
安装url-loader, file-loader
npm install url-loader file-loader --save-dev
ii 修改文件或配置
- 修改a.css 将一张图片放到scripts目录
- 配置webpack.config.js文件
iii 执行和查看
执行webpack --mode development将会看到dist中有一个images文件夹中有一张图片,打开index.html
五. webpack之plugin
插件(Plugins)是用来拓展Webpack功能的,是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问,它们会在整个构建过程中生效,执行相关的任务。
常用plugin:
- Html-Webpack-Plugin:重构入口html,动态添加<link>和<script>,在以hash命名的文件上非常有用,因为每次编译都会改变
- clean-webpack-plugin:编译输出文件前,删除旧文件,当利用文件hash值输出时,可以利用改插件删除原有文件
- jay-remove-webpack-plugin:当less文件作为入口文件,而不是在js中加载时,会额外生成无用的js文件,可以利用该插件去除这些文件
- stylelint-webpack-plugin:规范scss, less,css书写规则
- happypack:多线程执行任务,加快编译速度
- purifycss-webpack:打包编译时,可剔除页面和js中未被使用的css,这样使用第三方的类库时,只加载被使用的类,大大减小css体积
- optimize-css-assets-webpack-plugin:压缩css,优化css结构,利于网页加载和渲染
1. js自动注入html文件
i 安装插件
使用插件html-webpack-plugin,可以将生成的js自动引入html页面,不用手动添加
//安装html-webpack-plugin
npm install html-webpack-plugin --save-dev
//安装webpack webpack-cli
npm install webpack webpack-cli --save-dev
ii 配置文件
配置webpack.config.js文件
iii 执行和查看
执行webpack --mode development, 记得要将之前手动引入的script删除,便可以看到dist那里自动生成一个index.html,打开便可以看到。
2. 删除指定文件
i 安装插件
clean-webpack-plugin:编译输出文件前,删除旧文件,当利用文件hash值输出时,可以利用改插件删除原有文件
// 安装插件
npm install clean-webpack-plugin --save-dev
ii 配置文件参数
配置webpack.config.js文件
由于版本差异,无法打包时,这里的参数置为空即可,插件默认会清空【dist】文件夹下的内容。
iii 执行和查看
执行webpack --mode development,可以看到dist目录被删除,又生成一个新的dist,之前的js文件已经被删除。
六. 热更新,自动刷新
1. 安装
webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务
webpack-dev-server 主要提供两个功能:
- 为静态文件提供服务
- 自动刷新和热替换(HMR)
// 执行以下命令
npm install webpack webpack-dev-server --save-dev
无法正常安装或安装完成无法打包,是因为webpack-cli未安装或者版本和webpack-dev-server不兼容,此时需执行以下命令。
npm install webpack webpack-dev-server webpack-cli --save-dev
同时安装webpack-dev-server 和webpack-cli,可以确保相互间版本的兼容性。
2. 配置文件参数
- 配置webpack.config.js文
- 配置package.json
3. 执行和查看
执行npm run dev 访问 http://localhost:9090/ 即可