webpack基础学习笔记

371 阅读4分钟

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项目吧~ 敬请期待~