webpack简介
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler),当 webpack 处理应用程序时,它会在内部构建一个依赖图,此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle。
webpack打包的核心逻辑
- 从入口文件开始,分析整个应用的依赖树。
- 将每个依赖模块包装起来,放到一个数组中等待执行。
- 实现模块加载的方法,并把它放到模块执行的环境中,确保模块间可以相互调用。
- 把执行入口文件的逻辑放在一个函数表达式中,并立即执行这个函数。
配置开发环境——npm与包管理器
首先了解包管理器是做什么的呢?简单来说就是一个让开发者便捷的获取代码和分发代码的工具。 下来就简单新建一个工程,认识一下里面的配置叭~
mkdir demo
cd demo
npm init
然后用编译器打开该项目,会看到该项目的package.jons文件
{
// 包名称, 相当于是一个id, 不能和平台上现有的包名称相冲突
"name": "demo",
// 版本号
"version": "1.0.0",
"description": "",
// 执行入口
"main": "index.js",
// 自定义脚本——可以实现很多开发和构建中的自动化命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
在安装包的时候有两种命令:
npm install lodash --save
npm install jquery --save-dev
那么这两种写法到底有什么区别呢?
npm install lodash --save
// 同 npm install lodash -s的写法
这种写法是生产环境下的依赖,所有与功能相关的依赖,都应该放在此处。当包发布出去之后,别人要通过npm install来安装我们的包,这种情况下只会去安装dependencies,而忽略devDependencies。包安装成功后会在package.json文件的dependencies中看到如下信息:
"dependencies": {
"lodash": "^4.17.20"
}
下面看另一种写法:
npm install jquery --save-dev
// 同 npm install jquery -D 的写法
这种写法是指定当前环境是开发环境,往往放一些构建工具,或者质量检测工具等等,例如eslint等。我们在本地开发时用到的包,往往放在devDependencies。包安装成功后会在package.devDependencies:
"devDependencies": {
"jquery": "^3.5.1"
}
下面来了解一下如何使用npm自定义工程脚本吧~ 我们可以自定义命令名称和执行脚本,如下的test,dev,build就是我们自定义的命令,一个项目一般中都是离不开dev和bulid命令的
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server",
"build": "eslint ./src && webpack"
}
webpack核心特性
下面我们来瞅瞅webpack核心特性,那莫过于是loader和plugin了~
那如何理解loader呢?在我看来,loader就是一个“翻译官”,因为webpack只会处理js代码,当我们想要打包css等文件时,就需要使用相应的loader来处理了。我们首先在项目中加入css-loader:
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
]
}
]
}
加入css-loader之后发现,发现此时css文件并没有起作用,这是因为此时我们引入的css-loader只解决的了CSS语法解析的问题,但是并未把样式加载到页面上,此时我们就需要引入style-loader,解决样式加载问题,style-loader会产生一个style标签,并插入到了html页面当中。
但是这时一定要将style-loader加在css-loader之前,因为loader的配置顺序和加载顺序是相反的!这时为啥捏?去官网看看官方解释吧:loader 支持链式调用。链中的每个 loader 会将转换应用在已处理过的资源上。一组链式的 loader 将按照相反的顺序执行。链中的第一个 loader 将其结果(也就是应用过转换后的资源)传递给下一个 loader,依此类推。最后,链中的最后一个 loader,返回 webpack 所期望的 JavaScript。要是有不理解的,记住就好了!
下来在说说plugin,通过插件我们可以扩展 webpack,加入自定义的构建行为,使 webpack 可以执行更广泛的任务,拥有更强的构建能力。plugin就是监听编译中的事件,把功能嵌入到webpack的编译流程中。下面上新鲜的栗子~
// 首先安装uglifyjs-webpack-plugin
// npm install uglifyjs-webpack-plugin --save-dev
// 在webpack.config文件内引入
const uglifyJSPlugin = require('uglifyjs-webpack-plugin');
plugins: [
new uglifyJSPlugin()
]
然后看看你项目的体积,是不是小了呢?
说完了webpack基础,下一篇我们就一起学习如何搭建一个简单的react项目吧~ 敬请期待~