webpack 基础应用学习记录

webpack

笔记大概

- 模块化
	- 模块化解决什么问题的?
    - 为什么要用模块化
- 前端模块化的实现
- webpack
	- webpack的作用
	- webpack的使用

loader 和 plugins的简单理解

# loader 和plugins的简单理解, 仅参考
loader：每个符合条件的文件都会运行一次，plugin：打包只会运行一次。
loader：一个函数即可实现   plugin：一个类实现（因此解释了为什么需要new XXXplugin）。
loader一般用于处理一些语法 使用ast解析。plugin一般会做一些打包能力上的扩展

# --------------------
loader 是转码、编译、打包工具，每种非浏览器直接解析识别的语言，语法，都需要对应的 一个或多个loader 去转码，或者编译，plugin 官方定位，解决 loader 无法实现的事，比如在 loader 的过程中，有一些特殊的情况，需要特殊处理，比如打包时，某个文件，不需要编译，直接从源码目录复制到打包之后的目录这种需求.

webpack

安装

webpack 是一个使用 Node.js 实现的一个模块化代码打包工具, 所以, 我们需要先安装 webpack , 安装之前确定拥有 Node.js 环境.

npm install -D webpack webpack-cli

🚩 注: 不推荐全局安装

webpack-cli : 提供 webpack 命令, 工具, 类似于 create-react-app

webpack : webpack 代码, 类似 react

webpack使用

1. webpack 的执行文件和命令

// webpack的可执行文件
./node_modules/.bin/webpack

// 查看版本
./node_modules/.bin/webpack -v   // 该命令可能webstorm会提示没有该命令, 可以切换到命令行工具下,对应的文件目录下执行
	

🚩 注意:

- 执行 `webpack -v` 命令查看的是 `webpack-cli` 的版本儿
- 执行 `./node_modules/.bin/webpack -v`  查看的才是webpack的版本儿

2. 也可以通过编辑package.json 的scripts 来简化命令行输入

// package.json
{
    
    ...
    "scripts":{
    
        "webpack":""./node_modules/.bin/webpack -v"",
        "webpack": "webpack" // scripts 中可以定位到 ./node_modules/.bin/ 目录下
    }
}

scripts 中使用 test, start, restart ,stop 命名的时候, 可以在调用的时候省略 run命令, 直接执行. 即可以直接执行 npm start

3. 另外, 还以使用更加方便的方式:

npx webpack

通过npx 命令可以帮助我们定位到 ./node_modules/.bin/ 的目录下.

🚩 注:

npx 是npm5.2+ 版本只有增加, 如果没有, 可以使用 npm install -g npx 来安装.

打包模块

入口文件

入口文件就是我们项目中加载的第一个文件, webpack 会从指定的入口文件开始分析所有依赖的文件, 然后递归加载打包成一个完整的文件

打包命令

webpack ./src/main.js

上面命令会使用 webpack 默认的一些配置对模块文件进行打包, 并把打包后的文件输出到默认创建的 ./dist 目录下, 打包后的文件名称默认为 main.js

模块文件打包后, 就可以在不支持 es6 模块语法的浏览器环境下引入使用,了.

打包文件分析

• 打包命令执行后, 会把分散的多个模块文件打包的一个文件中, 不需要外部引入了.
• 内置了一个小型的模块加载器(类似 requireJS) 实现了打包后的代码隔离与引用.
• 🚩 我们查看和分析打包后的文件可以看出, 打包后的每一个模块打包到一个有单独作用域的函数中, 保证了模块的独立性. 而这个函数中会默认注入三个参数: module __webpack_exports__ __webpack_require__ 这三个参数,来实现 webpack 的一些相关的功能.

打包配置 webpack.config.js

通常, 在项目的根目录下, 我们可以创建一个 webpack.config.js 文件来配置选项实现更加方便的打包功能.

webpack 命令在运行的时候, 会默认读取运行命令所在的目录下的 webpack.config.js 文件.

当然我们也可以通过 --config 选项来指定读取配置文件的路径:

webpack -- config ./configs/webpack.config.js

配置文件:

因为 webpack 也是基于 node 的一个模块化管理工具, 通常我们配置文件也是以 commonjs 的模块化规范来定义配置文件对象.

module.exports = {
    
    ...//这里是webpack的一些配置选项
}

webpack的核心配置

mode

mode 模式: "production" "development" "none" 三种.模式

module.exports = {
    
    mode:'development'
}

entry 入口

entry 入口, 是指定webpack 打包读取的入口文件. 有三种不同的入口方式

string object 和 array 的编写方式

1. 单入口文件

// webpack.config.js
module.exports = {
    
    mode:"development",
    entry:"./src/main.js"
}

2. 多入口文件, 一个 target 打包文件

// webpack.config.js
module.exports = {
    
    mode:"development",
    entry:[ //多入口,一个出口的时候,通常以数组形式写入口配置即可
        "./src/main.js",
        "./src/index.js"
    ]
}

3. 多入口文件,多个target 打包文件