webpack学前必备

webpack中文网

webpack官网

1. Webpack 介绍

Webpack 是什么?? (面试)

• 前端模块化打包工具
• WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块、其它的一些浏览器不能直接运行的拓展语言（Scss，less等）以及新语法，并将其转换和打包为合适的格式供浏览器使用。

为什要使用WebPack?? (面试)

• 浏览器不识别 SASS、Less ==> 需要对Less/SASS 进行预编译转为CSS , 供浏览器使用
• 项目中的模块化以及互相之间引用依赖包造成文件分散 ==> 需要把各个分散的模块集中打包成大文件，减少HTTP的链接的请求次数
• 打包成了大文件,体积就变大了 ==> 代码压缩
• 部分ES6语法有兼容问题 => ES5/ES3 => 浏览器使用
• …
• 以上这些操作以前都是需要我们手动处理,这是非常繁琐的, 这个时候webpack就可以上场了,以上的这些操作,
• 在webpack里,只要配置好,一下就可以都搞定了

webpack模块化说明

1. webpack是一个模块化打包器。2. webpack中的模块：以前，我们说一个js文件就是一个模块webpack中一切的资源都可以称之为模块。webpack基于node,  html/css/js/图片/资源都可以是模块3. webpack内部提供了一种通用的模块机制。支持市面上所有的模块化语法，，，，，最终webpack内部打包的时候，都会变成通用的模块化语法。4. 目前有哪些模块化规范
nodejs中 ：   Commonjs规范     require()  module.exports ={}
浏览器中：    AMD规范   CMD规范  requirejs seajs
ES6中还提供了一种通用的模块化规范  import export （nodejs  浏览器）webpack支持所有的规范。

使用说明

一般来说，以后开发都是在webpack的环境下进行开发（node环境）

并且我们写完的项目并不会直接上线。 而是会经过webpack进行打包。 最终把打包过的文件进行上线。

2. Webpack 四个核心概念 (学前了解)：

入口(entry)、出口(output)、加载器(loader)、插件(plugins)

• 入口 : 要打包哪个文件
• 出口 : 要打包到哪里
• 加载器 : 加载除了js文件其他文件的功能 (css less png)
• 插件 : 处理加载器完成不了的功能, 使用插件

3. npm 使用回顾

3.1 全局安装

• 格式 : npm i xxx -g
• 作用 : 全局安装的包, 是当成一个工具来使用的
• 比如 :npm i http-server -g, npm i live-server -g , npm i json-server -g 等等

3.2 本地安装1

• 格式 : npm i xxx
• 其他版本 :npm i xx --save 和 npm i xx -S
• 作用 : 本地安装的包, 发布上线阶段 要用到的库
• 依赖位置 : 把包的依赖添加到 dependencies中
• 比如 : npm i axios

3.3 本地安装2 (配置webpack用的最多)

• 格式 : npm i xxx -D
• 其他版本 : npm i xxx --save dev
• 作用 : 本地安装的包, 只在开发阶段都要用到的库
• 依赖位置 : 把包的依赖添加到 devdependencies中
• 比如 : npm i webpack -D

4. 淘宝镜像

• 方式1 : 直接命令

2.1.1. 命令
npm config set registry https://registry.npm.taobao.org2.1.2. 验证命令
npm config get registry
如果返回https://registry.npm.taobao.org，说明镜像配置成功。

• 方式2 : nrm

- 全局安装 nrm   :  npm i nrm -g
- 查看有哪些镜像源  : nrm ls
- 切换镜像源       : nrm use taobao- 如果确定安装过 nrm 但是报错不能使用  =>  可能是 nrm 没有配置过环境变量
- cmd => where nrm   => C:\Users\ma250\AppData\Roaming\npm\nrm
=>拿到 C:\Users\ma250\AppData\Roaming\npm => 添加到环境变量里面去 => 再把终端都关闭

5. package.json 的介绍

npm init -y

{// 包名/项目名  要求:小写字母, 不能是大写或者叫webpack"name": "webpack-demo",// 版本号  "version": "1.0.0",// 介绍"description": "",// 默认入口文件index.js  可以自己指定  "main": "index.js",// 脚本 (★★★)  "scripts": {"test": "echo \"Error: no test specified\" && exit 1"},// 关键字  "keywords": [],// 作者"author": "",// 许可证   "license": "ISC"
}

• 配置自定义脚本
  • 创建一个 index.js =>console.log('测试启动脚本')
  • 执行 : node index.js
  • 也可以通过运行脚本来执行命令 (优势 如果配置太多 手动就不好处理了)
• 常见脚本

"scripts": {"build": "node index.js","dev": "node index.js","serve": "node index.js",
}
// 像以上这几种运行脚本 :  npm run build/dev/serve"scripts": {"start": "node index.js","stop": "node index.js","restart": "node index.js"
},
// 像  start、stop、restart test这几种  我们可以省略 run
// 直 npm run start 或者  npm start 都可以

webpack配置

1. webpack打包的基本使用

本地安装

1. 创建项目名称 webacpk-demo : 不能是大写 不能是webpack
2. 使用npm init -y生成package.json :
3. 创建两个文件夹 src/(源代码文件夹) 和 dist/(最终打包输出的文件夹)
4. 在 src 里面创建一个 index.js 文件 (准备要被打包的入口文件)

console.log('我就要被打包了,哦也');

1. 安装依赖包 :npm i webpack webpack-cli -D

webpack  - 核心包
webpack-cli - 使用 webpack 4+版本需要安装

1. 添加脚本 : build

"scripts": {// "build" : "webpack 入口文件 --output 出口文件""build" : "webpack ./src/index.js --output dist/bundle.js"},

1. 打包运行命令 :npm run build

• 画图

2. mode 配置

WARNING in configuration
The 'mode' option has not been set, webpack will fallback(备用) to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

• mode配置项
  • development : 开发阶段 (不压缩)
  • production : 发布阶段 (压缩)
• 配置

"scripts": {"build": "webpack ./src/index.js --output dist/bundle.js --mode development""build": "webpack ./src/index.js --output dist/bundle.js --mode production"},

3. 指定配置文件 (★★★)

使用一个配置文件

随着配置越来越多,在脚本里配置就显得麻烦了 所以我们一般常用配置文件

1. 根目录 创建一个配置文件 : webpack.config.js

你也可以创建 webpack.config.dev.js(开发阶段用的)  webpack.config.prod.js(发布阶段用的)

1. 添加配置

// 因为 webpack 是基于 node
// 所以在配置文件里面 我们可以直接使用 node 的语法
const path = require('path')module.exports = {// 入口entry: path(__dirname, './src/index.js'),// 出口output: {// 目录path: path.join(__dirname, './dist'),filename: 'bundle.js',},// modemode: 'development',
}

1. 修改脚本

"build" : "webpack --config webpack.config.js"

4. 隔行变色案例

1. 创建 : src/index.html
2. 隔行案例结构 => ul>li{我是li $}* 10
3. 安装 jquery : npm i jquery
4. 引入 jquery 和 设置样式 (ok)

// 引入
<script src="../node_modules/jquery/dist/jquery.js"></script>// 设置样式
$('li:odd').css('background', 'red')
$('li:even').css('background', 'blue')

1. 使用 es6 的模块化语法 import

// 使用ES6的模块化语法
import $ from 'jquery'      # 优点: 不用沿着路径去找      # 浏览器不支持import语法 报错
....
// 语法报错

1. 打包 : npm run build
2. 引入 打包后的文件

<script src='../dist/bundle.js'></script>

1. code记得保存一份

5. 插件: html-webpack-plugin

html-webpack-plugin

作用 :

1. 能够根据指定的模板文件 (index.html),自动生成一个新的 index.html,并且注入到dist文件夹下
2. 能够自动引入js文件

1. 安装 :

npm i html-webpack-plugin -D

1. 配置 :

第一步: 引入模块
const htmlWebpackPlugin = require('html-webpack-plugin')
第二步: 配置
// 插件
plugins: [// 使用插件 指定模板new htmlWebpackPlugin({template: path.join(__dirname, './src/index.html')})
]

webpack 处理 非 js 文件

webpack 只能处理 js 文件,非 js (css.less.图片.字体等) 处理不了, 借助 loader 加载器

1. 处理 css文件

1. 创建一个css文件 : src/css/index.css

li {line-height: 40px;height: 40px;
}

1. index.js 中引入

import './css/index.css'

1. 安装 : npm i style-loader css-loader -D
2. 配置

// loader
module: {rules: [//1.处理 css// 注意点 use执行loader 顺序 从右往左// css-loader  :  读取css文件内容,将其转化为一个模块// style-loader : 拿到模块, 创建一个style标签,插入页面中{ test: /\.css$/, use: ['style-loader', 'css-loader'] }]
}

1. 重启 npm run dev

2. 处理 less 文件

1. 创建一个 less 文件 : src/css/index.less

ul {list-style: none;li {&:hover {color: yellow;}}
}

1. index.js 中引入

import './css/index.less'

1. 安装 : npm i less-loader less style-loader css-loader -D
2. 配置

// loader
module: {rules: [//2.处理 less{ test: /\.less$/, use: ['style-loader', 'css-loader','less-loader'] }]
}

1. 重启 npm run dev

3. 处理图片

1. 创建src/images/, 引入两种图片 01.png 和 1.gif
2. 在index.css中设置背景图片

body {padding-top: 200px;background: url(../images/01.png) no-repeat;
}

1. 安装 : npm i -D url-loader file-loader

url-loader (推荐) 和 file-loader 二选一即可

1. 配置 :

// 处理图片{ test : /\.(jpg|png|gif)$/, use : ['url-loader'] },

4. url-loader 和 file-loader

4.1通过 npm run build 打实体闭演示区别

• url-loader 会把图片编译成 base64 格式,打包到 bundle.js 中

- base64 : 是一种编码格式,能够将图片、文字等常见的文件,转化为 base64 格式,这种字符串格式, 浏览器能够识别并且读取显示到页面中, 也可以直接被内嵌到页面中, 或者 css 中
- 一旦打包成base64格式之后, 会以字符串的形式存在 bundle.js 中, 好处是能够减少一个图片的 HTTP 请求
- index.html   =====>  bundle.js( base64图片格式 )

注意 : Base64 的好处是能够减少一个图片的 HTTP 请求，然而，与之同时付出的代价则是 CSS 文件体积的增大。

CSS 文件体积的增大意味着什么呢？意味着 CRP 的阻塞。 CRP（Critical Rendering Path，关键渲染路径）

CSS 文件的体积直接影响渲染，导致用户会长时间注视空白屏幕

• file-loader 不会把图片打包到 bundle.js中，而是单独的生成了一个张图片

劣势 : 单独生成一个图片, 就要多发送一个图片的 http请求

4.2 最终方案

方案 :

​ 如果图片小的话, 就使用url-loader 编译成base64 格式,

​ 如果图片大的话 就使用file-loader单独生成一个图片文件

1. 配置

// 使用 url-laoder , 因为url-loader 依赖 file-loader
{ test : /\.(jpg|png|gif)$/, use : ['url-loader'] },

1. 添加limit配置

方式1(旧) :{ test : /\.(jpg|png)$/, use : ['url-loader?limit=10000'] },   // use 后 多个为数组, 少为对象 都可以
方式2(新) :
{test: /\.(jpg|png)$/, use: {loader: 'url-loader',options: {//  < 21k   => 通过url-loader => 转化为base64//  >= 21kb => 通过file-loader=>  不会转base64 单独生成一个图片文件limit: 21 * 1024}}
},

1. 可以 build演示

5. 处理 字体 文件

1. 准备字体图标: 字体图标文件 iconfont 或者 从阿里矢量图标里下载

2. 在 index.js 中引入 css 文件

   import '../css/iconfont/iconfont.css'
   

3. 使用 :

4. 在 webpack.config.js 中配置

 // 4. 处理字体图标{ test:/\.(svg|woff|woff2|ttf|eot)$/,use:'url-loader'}

提取文件

1. 提取css到css文件夹

提取css文件

1. 安装 : npm i mini-css-extract-plugin -D
2. 配置

//2.1 引入 模块
const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {//2.2 实例插件plugins: [new MiniCssExtractPlugin()],//2.3 配置module: {rules: [{test: /\.css$/,use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader'],},],},
};/// =======> 生成一个 main.css 文件

1. 自定义css文件名

//2.2 实例插件
new MiniCssExtractPlugin({filename: 'css/index.css',
}),// ===> 图片引入失败 , 层级不对

1. 添加公共路径

 {test: /\.css$/,use: [{loader: MiniCssExtractPlugin.loader,options: {// index.css 里面的引入路径都加个 ../publicPath: '../',},},'css-loader',],},

现在的css文件

body {padding-top: 200px;background: url(../3309d79967e334a7c78cf8130266c390.gif) no-repeat;
}

2. 提取字体到 fonts文件夹里

{test: /\.(eot|woff|svg|ttf)$/,use: {loader: 'url-loader',// loader的参数配置options: {// 范围  30k   1kb = 2014字节limit: 2 * 1024,name: '[name].[ext]',outputPath: 'fonts'}}
},

3. 提取图片到 images文件夹里

// 处理图片
{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 1000,name: '[name].[ext]',outputPath: 'images',},},],
},

开发阶段

1. webpack-dev-server

作用 : 为使用 webpack 打包提供一个服务器环境

​ 1 自动为我们的项目创建一个服务器

​ 2 自动打开浏览器

​ 3 自动监视文件变化,自动刷新浏览器…

1. 安装 :npm i webpack-dev-server -D
2. 添加一个脚本 dev

"scripts": {"serve" : "webpack-dev-server --config webpack.config.js"
},

1. 运行脚本 :

运行 :npm run serve结果 : i ｢wdm｣: Compiled successfully.查看 : Project is running at http://localhost:8080/

1. 作用演示 :

# 自动打开浏览器devServer: {open: true
}
# 自动监视文件变化 + 自动刷新
$('li:even').css('background', 'blue')  ==> 'yellow' # 配置端口devServer: {open: true,port :3001
}

2. hot 热更新 (待定)

"dev": "webpack-dev-server --config webpack.config.js --hot"

##3. serve 和 build的使用区别

"scripts": {"build": "webpack --config webpack.config.js","serve": "webpack-dev-server --config webpack.config.js"
},

• npm run serve

开发模式 :  => 开发项目中使用 , 不会打包出实体文件, 打包到内存中, 这样能够及时监视更新

• npm run build

发布上线使用
1 执行 : `npm run build` 对项目进行打包,生成dist文件
2 模拟本地服务器 : 安装 : `npm i -g live-server`
3 把dist文件里的内容放到服务器里即可, 直接运行`live-server`

处理es6语法

现在的项目都是使用 ES6 开发的, 但是这些新的 ES6 语法, 并不是所有的浏览器都支持, 所以就需要有一个工具,帮我们转成 es5 语法, 这个就是: babel

• Babel is a JavaScript compiler. ==> babel 是一个 JavaScript 编译器

• webpack 只能处理 import / export 这个 es6 模块化语法 而其他的 js 新语法,应该使用 babel 来处理

babel 英文网

babel中文网

webpack-babel-loader

1. 安装 :

npm install -D babel-loader @babel/core @babel/preset-envbabel-loader 处理js
@babel/core 核心包
@babel/preset-env  处理es6 789....

1. 配置

module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']   // 处理es6-最新   }}}]
}

1. 或者 创建 .babelrc

{"presets": ["env"]
}

模块化语法 (webpack-import)

1. 模块化语法的分类 (必记)

• node的commonjs 规范 :
  • 导入 : require()
  • 导出 : module.exports = {}
• es6的最新模块化语法
  • 导入 : import
  • 导出 : export

2. 介绍

模块中的变量或者函数等等都是只能在本模块使用, 其实模块想使用 需要引入

3. 导出一个变量

• 导出一个变量

let num = 30let test = () => console.log(666)let obj = { name: 'zs', age: 60 }export default num  或者
export default obj  或者
export default test

• 引入

import res from './a'   // res 任意取名console.log(res)

4. 导出多个变量

• 导出多个变量

// 导出多个
export let tool1 = () => console.log(111)
export let tool2 = () => console.log(222)
export let tool3 = () => console.log(333)

• 引入

// { } 里面必须是固定名称
import { tool1, tool2, tool3 } from './a'
console.log(tool1)
console.log(tool2)
console.log(tool3)tool1()
tool2()
tool3()

• 取别名

import { tool1 as t1, tool2, tool3 } from './a'
console.log(t1)t1()

单文件组件 (webpack-vue)

1. 介绍

单文件组件

• 拷贝webpack环境文件 : webpack.config.js + package.json
• 注册组件

// index.js
Vue.component('Demo', {template : `<div>组件</div>`
})
// 缺点无高亮

• 提出一个对象到一个模块中

// demo.js
let Demo = {template : `<div>组件</div>`
}
module.exports  = Demo
// 还是没有高亮

• 改在 单文件组件

// demo.vue
<script>module.exports = {template : `<div>组件</div>`}
</script>

• 添加 结构和样式

<template><div>组件</div>
</template>
<script>module.exports = {}
</script>
<style lang='less'>div {color : redfont-size :'40px'}
</style>

• 配置vue

// index.html
<div id="app"></div>// index.js
import App from './App.vue'
import Vue from 'vue'new Vue({// el 指定管理编辑el: '#app',// 渲染根组件render: (h) => h(App),
})

2. 配置

vue官网 => vue-loader

vue-loader

1. 安装:

npm install -D vue-loader vue-template-compiler

1. 配置

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')            # +++module.exports = {module: {rules: [// ... 其它规则{test: /\.vue$/,loader: 'vue-loader'                                         # +++}]},plugins: [// 请确保引入这个插件！new VueLoaderPlugin()                                             # +++]
}

3. 安装vscode插件 : Vetur

• 高亮
• 有提示 : 输入vue

打包安装模块出错: 安装版本低的模块即可

> npm install 模块名称@版本号 --save-dev

如：

npm install webpack@3.8.1 --save-dev

webpack — 概述 （2）相关推荐

1. 前端进阶（一）webpack 概述

   webpack 概述 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系 ...

2. webpack——解决当前 Web 开发面临的困境||webpack 概述

   webpack 当前 Web 开发面临的困境 webpack 概述

3. webpack — 概述介绍

   webpack概述 webpack是一个流行的前端项目构建工具(打包工具),可以解决当前web 开发中所面临的困境. webpack提供了友好的模块化支持,以及代码压缩混淆.处理js兼容问题.性能优化 ...

4. webpack --- [读书笔记] webpack中常用的一些配置项

   1. Webpack 当前Web开发面临的困境 文件依赖关系错综复杂 静态资源请求效率低 模块化支持不友好 浏览器对高级JavaScript特性兼容程度低 1.1 webpack概述 webpack是 ...

5. webpack使用文档

   webpack使用文档 当前 Web 开发面临的困境 文件依赖关系错综复杂 静态资源请求效率低 模块化支持不友好 浏览器对高级 Javascript 特性兼容程度较低 etc- webpack 概述 ...

6. Webpack打包工具的使用---打包引用JS和CSS文件

   1.webpack概述: webpack是一款加载兼打包工具,它能把各种资源,例如J(含JX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 2.全局安装: 在安装Web ...

7. 前端工程化（ES6模块化和webpack打包）

   文章目录 目标: 目录: 1.模块化相关规范 1.1.模块化概述 1.2.浏览器端模块化规范 AMD CMD 1.3.服务器端模块化规范 CommonJS 1.4.大一统的模块化规范-ES6模块化 1 ...

8. 狂神说——大前端进阶NodeJS、Npm、Es6、Babel、Webpack、模块化使用

   参考资料 文章目录 01 大前端基础知识概述 02 概述和前端工具VSCode安装 03 Nodejs的安装 04 Nodejs了解和快速入门 05 Nodejs实现htppserver服务 06 N ...

9. webpack概念简介

   目录 一.webpack概述 1. 什么是webpack? 2. 为什么要使用webpack? 二.webpack相关概念 1. 入口(entry) 2. 出口(output) 3. 加载器(load ...

最新文章

1. Linux下ftp+ssl实现ftps
2. CentOS7配置iptables防火墙
3. 云炬Android开发笔记 11主界面-商品分类开发（多布局Section RecyclerView）
4. Mother's Day
5. window下eclipse +cdt+cygwin做C,C++开发环境搭建 （转自：http://blog.csdn.net/thinkandchange/article/details/7935）
6. 看过这么多爆文，依旧走不好异步编程这条路？​
7. uni-app微信小程序uni.navigateTo跳转无效问题；记录一次uni-app页面跳转无效，来回跳转问题；wx.navigateTo ，跳转超过10次怎么点不动的解决办法。
8. jstl c:choose、c:when和c:otherwise标签的简单使用介绍
9. jquery mobile用代码弹出dialog
10. 易混淆知识点(1)：word-wrap和word-break傻傻分不清楚
11. Laravel Migrate
12. 使用Angular Router导航基础
13. 还有这种操作?浅析为什么要看源码
14. Pandas读取excel中的数据，并利用现有列数据生成新列
15. 普适计算-2014/03/21
16. Android面试之百题经典Android答案——cookie,session,JNI,AIDL,Binder,ClassLoader,AMS,WMS,PWS,热更新,插件化,Hook,dex
17. 7 士兵排队---PTA（排序+中位数）（C++）
18. 今晚“狼来了”|思一独角兽的狼人杀攻略
19. 三招让windows硬盘资料隐身
20. 三个值得关注的零撸空投项目，请收藏

热门文章

1. 计组—浮点数表示和运算
2. Hadoop配置完善
3. SQL总结（一）基本查询
4. 【IT笔试面试题整理】反转链表
5. mysql workbench简单操作
6. throw 烦人_烦人的简单句子聚类
7. 基于决策树的多分类_R中基于决策树的糖尿病分类—一个零博客
8. 温网告别了两位美女：伊万和莎娃
9. 看以色列话剧《安魂曲》（图）
10. 如何以学习单片机为契机，逐步成为优秀的工程师