Webpack快速入门
2020-09-20 12:35:09 14 举报AI智能生成
webapck快速入门
作者其他创作
大纲/内容
webpack运行环境-NodeJs
webpack是基于nodejs环境来运行的，所以在安装使用webpack之前要先安装nodejs环境，建议安装最新稳定（LTS）版NodeJs。
nodeJs下载地址
英文 https://nodejs.org/en
中文 https://nodejs.org/zh-cn
webpack的安装
webpack官方文档
英文 https://webpack.js.org
中文1 https://webpack.docschina.org
中文2 https://www.webpackjs.com
全局安装
npm install webpack webpack-cli -g
局部安装
npm install webpack webpack-cli -D
webpack配置文件
webpack默认 0 配置
webpack在进行构建(打包)时，会先查找是否有自定义配置文件，如果没有则执行这个默认0配置。
webpack.config.js
webpack.base.config.js
webpack.dev.config.js
webpack.pro.config.js
webpack.xxx.config.js
webpack启动构建方式
npx webpack
npm run build
自定义构建命令的原理就是通过shell脚本在node_modules/.bin⽬录下创建⼀个软链接，不用npx也能执行webpack命令
修改package.json文件，在scripts选项中 添加 "build": "webpack"
webpack核心概念
entry
配置构建(打包)入口：属性值可以是字符串"" 或 对象{}
指定webpack打包⼊⼝⽂件:Webpack 执⾏构建的第⼀步将从 Entry 开始，可抽象成输⼊
字符串"" (SPA 单页面应用) entry: "./src/index.js"
对象{} (MPA 多页面应用，多入口)
output
配置构建(打包)出口：属性值是对象{}
filename
默认 filename: "main.js"
path
默认 path: path.resolve(__dirname, "./dist")
多入口时的输出配置
打包转换后的⽂件输出到磁盘位置:输出结果，在 Webpack 经过⼀系列处理并得出最终想要的代码后输
出结果。
出结果。
mode
配置构建(打包)模式，mode: 属性值有3个
mode: "none" 没有
mode: "development" 用于开发环境
打包后的代码不会被压缩和丑化，main.js中其实是一个立即执行函数 (function(modules){})({里面是一个个键值对模块 chunk})
mode: "production" 用于生产(正式)环境
如果没有指构建模式，默认是mode: "production"，打包后的代码会被压缩和丑化
loader
loader 其实就是模块解析、模块转换器，⽤于把模块原内容按照需求转换成新内容。
webpack是模块打包⼯具，⽽模块不仅仅是js，还可以是css，图⽚或者其他格式
但是webpack默认只知道如何处理js和JSON模块，那么其他格式的模块处理，和处理⽅式就需要
loader了，而且不同loader职责都很单一。
但是webpack默认只知道如何处理js和JSON模块，那么其他格式的模块处理，和处理⽅式就需要
loader了，而且不同loader职责都很单一。
webpack loader 文档地址： https://www.webpackjs.com/loaders
常用的loader
style-loader
安装 npm install style-loader --save-dev
style-loader 把 css-loader处理的好 css 插入到html的 DOM 中。
css-loader
安装 npm install --save-dev css-loader
css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。
less-loader
安装 npm install less-loader --save-dev
webpack 将 Less 编译为 CSS 的 loader。
sass-loader
安装 npm install sass-loader sass webpack --save-dev
加载 Sass/SCSS 文件并将他们编译为 CSS。
file-loader
安装 npm install --save-dev file-loader
file-loader 处理图⽚，使用场景：就是当我们需要模块，仅仅是从源代码挪移到打包⽬录，就可以使⽤file-loader来处理，
txt，svg，csv，excel，图⽚资源啦等等
txt，svg，csv，excel，图⽚资源啦等等
ts-loader
安装 npm install ts-loader --save-dev
ts-loader 可以将ts代码转换成浏览器能够识别的js代码
babel-loader
安装 npm install -D babel-loader @babel/core @babel/preset-env webpack
js代码转换ES6、7等js新特性语法
eslint-loader
安装 npm install eslint eslint-loader --save-dev
用于 Webpack 的 ESlint loader
module
模块，在 Webpack ⾥⼀切皆模块，⼀个模块对应着⼀个⽂件。Webpack 会从配置的 Entry 开始递归找
出所有依赖的模块。
出所有依赖的模块。
当webpack处理到不认识的模块时，需要在webpack中的module处进⾏配置，当检测到是什么格式的
模块，使⽤什么loader来处理。
模块，使⽤什么loader来处理。
css样式处理
css-loader 分析css模块之间的关系，并合成⼀个css
loader执⾏顺序：从后往前
Style-loader 会把css-loader⽣成的内容，以style挂载到⻚⾯的heade部分
loader执⾏顺序：从后往前
Style-loader 会把css-loader⽣成的内容，以style挂载到⻚⾯的heade部分
安装 npm install style-loader css-loader -D
plugin
plugin 可以在webpack运⾏到某个阶段的时候，帮你做⼀些事情，类似于⽣命周期的概念
扩展插件，在 Webpack 构建流程中的特定时机注⼊扩展逻辑来改变构建结果或做你想要的事情。
作⽤于整个构建过程
扩展插件，在 Webpack 构建流程中的特定时机注⼊扩展逻辑来改变构建结果或做你想要的事情。
作⽤于整个构建过程
webpack plugin 文档地址： https://www.webpackjs.com/plugins
常用的plugin
HtmlWebpackPlugin 插件
安装 npm install --save-dev html-webpack-plugin
htmlwebpackplugin会在打包结束后，⾃动⽣成⼀个html⽂件，并把打包⽣成的js模块自动引⼊到该html文件
中。
中。
clean-webpack-plugin 插件
安装 npm install --save-dev clean-webpack-plugin
用于清除打包目录如(dist、build)文件夹中冗余、重复的文件
bundle
构建(打包)输出后的资源文件，就叫bundle文件
bundle文件是一个立即执行函数(function(modules))({chunks})，它是由启动器函数 webpackBootstrap，chunks{chunk、模块}、补充函数、chunks等组成的
一个bundle对应一个chunks，一个chunks可以对应一个或多个chunk，一个chunk对应一个模块(function(){})
chunk
构建(打包)输出后的资源文件文件中的各个模块，一个chunk对应一个模块(function(){})
0 条评论
下一页
为你推荐
查看更多
