webpack

前言webapck 诞生的背景webpack 是什么webpack 的使用创建列表隔行变色项目在项目中安装个配置webpack配置打包的出口 与 入口配置webpack 的自动打包功能配置 html-webapck-plugin 生成预览页面配置自动打包相关参数webpack中的加载器通过loader打包非js模块webpack中加载器的基本使用打包处理css文件打包处理less文件打包处理scss文件配置 postCSS 自动添加 css的兼容前缀打包样式表中的图片和字体文件打包处理js文件中的高级语法如何利用webpack来优化前端性能webpack 中常用安装插件的命令

前言

本文不讲干巴巴的理论,直接讲webpack的诞生背景,webpack是什么,什么时候用,什么场景用,并且附加真实案例

webapck 诞生的背景

当前 web 开发面临的困境

webpack 是什么

官网解释:

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模
块,然后将所有这些模块打包成一个或多个 bundle。

大白话解释:

webpack 是一个流行的 前端项目构建工具 (打包工具),可以解决当前web开发中所面临的困境
webpack 提供了友好的模块化支持,以及代码打包混淆、处理js兼容问题、性能优化等强大功能,从而让程序员把工作的重心放到具体的功能实现上,提高了开发效率和项目的可维护性。

webpack 的使用

创建列表隔行变色项目

  1. 新建项目空白目录, 并运行npm init -y命令,初始化包管理配置文件package.json
  2. 新建src源代码目录
  3. 新建 src -> index.html 首页
  4. 初始化首页基本的结构
  5. 运行 npm install jquery -S命令,安装 jQuery
  6. 通过模块化的形式, 实现列表隔行变色效果

在项目中安装个配置webpack

  1. 运行 npm install webpack webapck-cli -D命令,安装webapck 相关的包
  2. 在项目根目录中,创建名为 webpack.config.js 的webpack 配置文件
  3. 在webpack 文件中,初始化如下配置:
1module.exports = {
2    mode'development'  
3}
4/*
5 * mode 用来指定构建模式,有两种模式:
6 * development :开发模式,webpack打包后不压缩混淆
7 * production :生成模式,webpack打包后进行压缩混淆
8 */

  1. 在 package.json 配置文件中的 scripts 节点下 ,新增 dev 脚步 如下:
1"scripts":{
2    "dev":"webpack"  //scripts 节点下的脚步,可以通过 npm run 执行
3}
4//如果dist没有打包的文件 执行下 webpack -p
  1. 在终端运行 npm run dev 命名,启动webpack 进行项目打包
 1PS C:\Users\Administrator\Desktop\webpack0> npm run dev
2
3> webpack0@1.0.0 dev C:\Users\Administrator\Desktop\webpack0
4> webpack
5
6Hash: f8f26966d07186a3db7a
7Version: webpack 4.41.5
8Time: 219ms
9Built at: 2019-12-29 17:07:44
10  Asset     Size  Chunks             Chunk Names
11main.js  314 KiB    main  [emitted]  main
12Entrypoint main = main.js
13[./src/index.js] 138 bytes {main} [built]
14    + 1 hidden module
15PS C:\Users\Administrator\Desktop\webpack0>

配置打包的出口 与 入口

webpack 4.x 中默认约定:

如果要修改打包的入口和出口,可以在webpack.config.js文件中新增如下配置信息:

1const path = require('path')                       //导入node.js 中专门操作路径的模块
2module.exports = {
3    entry: path.join(__dirname,'./src/index.js'),  //打包入口文件的路径
4    output: {
5        path: path.join(__dirname,'./dist'),       //输出文件的存放路径
6        filename:'bundle.js'                       //输出文件的名称
7    }
8}

配置webpack 的自动打包功能

  1. 运行 npm install webpack-dev-server -D 命名,安装支持项目自动打包的工具

  2. 修改 package.json -> scripts 中的 dev 命名如下:

1 "scripts":{
2    "dev":"webpack-dev-server"  //scripts 节点下的脚步,可以通过 npm run 执行
3 }
  1. 将 scr -> index.html 中,script脚步的引用路径,修改为 “ /bundle.js”

  2. 运行 npm run dev命名,进行重新打包

  3. 在浏览器中访问 http://localhost:8080 地址,查看自动打包效果

配置 html-webapck-plugin 生成预览页面

  1. 运行 npm install html-webpack-plugin -D 命名,安装生成预览页面的插件

  2. 修改 webpack.config.js 文件头部区域,添加如下配置信息:

1   //导入生成预览页面的插件,得到一个构造函数
2   const HtmlWebpackPlugin = require('html-webpack-plugin')
3   const htmlPlugin = new HtmlWebpackPlugin({ //创建插件的实例对象
4      template: './src/index.html'//指定要用到的模块文件
5      filename:'index.html' //指定生成的文件名称,该文件存在于内存中,在目录中不显示
6   })
  1. 修改 webpack.config.js 文件中向外暴露的配置对象,新增如下配置节点:
1   mudule.exports = {
2       plugins:[ htmlPlugin ] //plugins数组是 webpack 打包期间会用到的一些插件列表
3   }

配置自动打包相关参数

1//package.json 中的配置
2// --open 打包完成后 自动打开浏览器页面
3// --host 配置IP地址
4// --port 配置端口
5
6"script":{
7    "dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
8}

webpack中的加载器

通过loader打包非js模块

在实际开发过程中,webapck 默认只能打包处理以 .js后缀名结尾的模块,其他 非.js后缀名结尾的模块, webpack默认处理不了,需要调用 loader 加载器才可以正常打包,否则报错!

loader 加载器可以协助 webpack 打包处理特定的文件模块,比如:

loader打包流程
loader打包流程

webpack中加载器的基本使用

打包处理css文件
 1//目录结构
2> dist
3    > main.js
4>node-modules //第三方包
5> src
6    > css
7        >1.css
8    > index.html
9    > index.js
10> package.json
11> webapck.config.js

1.css

1body{
2    background-color:red;
3}

index.js

1import './css/1.css'

没有下载 css-loader 之前 编译会报错

下载css-loader以及配置使用

  1. 运行 npm i style-loader css-loader -D 命名,安装处理css文件的 loader

  2. 在 webpack.config.js 的module -> rules 数组中,添加 loader 规则 如下:

1   //所有第三方文件模块的匹配规则
2   module : {
3       rules:[
4           { test/\.css$/use:['style-loader','css-loader']}
5       ]
6   }

其中,test 表示匹配的文件类型,use 表示对应要调用的 loader

use数组中指定的 loader 顺序是固定的,执行顺序是 从后往前

打包处理less文件

  1. 运行 npm i less-loader less -D 命名

  2. 在 webpack.config.js 的module -> rules 数组中,添加 loader 规则 如下:

1//所有第三方文件模块的匹配规则
2module : {
3  rules:[
4     { test/\.less$/use:['style-loader','css-loader','less-loader']}
5  ]
6}
打包处理scss文件
  1. 运行 npm i sass-loader node-sass -D 命名

  2. 在 webpack.config.js 的module -> rules 数组中,添加 loader 规则 如下:

1//所有第三方文件模块的匹配规则
2module : {
3   rules:[
4     { test/\.scss$/use:['style-loader','css-loader','sass-loader']}
5   ]
6}

-

1卸载当前版本   npm uninstall sass-loader
2安装     npm install sass-loader@7.3.1 --save-dev

配置 postCSS 自动添加 css的兼容前缀

  1. 运行 npm i postcss-loader autoprefixer -D 命名

  2. 在项目根目录中创建 postcss 的配置文件 postcss.config.js,并初始化如下配置:

1const autoprefixer = require('autoprefixer'//导入自动添加前缀的插件
2module.exports = {
3  plugin:[ autoprefixer ] //挂载插件
4}
  1. 在 webpack.config.js 的module -> rules 数组中,添加 loader 规则 如下:
1module : {
2  rules:[
3    { test/\.css$/use:['style-loader','css-loader','postcss-loader']}
4  ]
5}
打包样式表中的图片和字体文件
  1. 运行 npm i url-loader file-loader -D 命名

  2. 在 webpack.config.js 的module -> rules 数组中,添加 loader 规则 如下:

1module : {
2  rules:[
3    { 
4        test/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/
5        use:'url-loader?limit=16940'
6    }
7  ]
8}

其中 ? 之后的是loader的参数项

limit用来指定图片的大小,单位是字节(byte),只有 小于limit的值才会转成base64图片

打包处理js文件中的高级语法

  1. 安装babel转换器相关的包:npm i babel-loader @babel/core @babel/runtime -D

  2. 安装babel语法插件相关的包:npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

  3. 在项目根目录中,创建babel配置文件 babel.config.js 并初始化基本配置如下:

1module.exports = {
2    presets:[ '@babel/preset-env' ] ,
3    plugins:[
4        '@babel/plugin-transform-runtime',
5        '@babel/plugin-proposal-class-properties'
6    ]
7}
  1. 在 webpack.config.js 的module -> rules 数组中,添加 loader 规则 如下:
1   //exclude 为排除项 ,表示 babel-lodaer 不需要处理 node_modules 中的 js文件
2   {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

如何利用webpack来优化前端性能

压缩代码

uglifyJsPlugin 压缩js代码
mini-css-extract-plugin 压缩css代码

利用CDN加速

将引用的静态资源修改为CDN上对应的路径,可以利用webpack对于output参数和 loader的publicpath参数来修改资源路径

删除死代码(tree shaking)

css需要使用Purify-CSS

提取公共代码

webpack4移除了CommonsChunkPlugin (提取公共代码),用optimization.splitChunks和optimization.runtimeChunk来代替

webpack 中常用安装插件的命令

  1. npm install html-webpack-plugin --save-dev

自动快速的帮我们生成HTML。

  1. npm install css-loader style-loader --save-dev

样式文件,我们需要两种loader,css-loader 和 style-loader,css-loader会遍历css文件,
找到所有的url(…)并且处理。style-loader会把所有的样式插入到你页面的一个style tag中。

  1. npm install babel-loader css-loader style-loader --save-dev

安装加载器(babel-loader 进行转码css-loader 对 css 文件进行打包style-loader 将样式添加进 DOM 中)

  1. npm install sass-loader node-sass --save-dev

css预编译程序,还需要添加node-sass来解析sass文件

  1. npm install url-loader --save-dev

图片自动转成base64编码的

  1. npm install jquery moment --save-dev

添加第三方库(jquery和moment)

  1. npm install babel-preset-es2015 --save-dev

添加ES6的支持

  1. npm install babel-preset-es2015 babel-preset-react --save-dev

安装转码规则

  1. npm install webpack-dev-middleware --save-dev

服务器端使用的是express框架,你还可以直接安装express的middleware,webpack配合express

  1. npm install react --save-dev

安装并引用 React 模块

  1. npm install react react-dom --save-dev

添加react和react-dom

  1. npm install react-hot-loader --save-dev

react-hot-loader 是一款非常好用的 React 热插拔的加载插件,通过它可以实现修改-运行同步的效果,
配合 webpack-dev-server 使用更佳!

  1. npm install --save-dev autoprefixer postcss-loader --save-dev

处理css和添加浏览器前缀
postcss-loader : 使用postcss加载和转义css/sss文件

  1. npm install babel-loader coffee-loader --save-dev

babel-loader : 加载ES6+ 代码后使用Babel转义为ES5后浏览器才能解析
coffee-loader : 加载Coffeescript脚本文件

  1. npm install autoprefixer-loader --save-dev

添加浏览器前缀