「这是我参与2022首次更文挑战的第15天，活动详情查看：2022首次更文挑战」

从0搭建webpack开发环境

1.什么是Webpack？

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler),当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

使用Webpack作为前端构建工具：

代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

在webpack应用中有两个核心:

1. 模块转换器，用于把模块原内容按照需求转换成新内容，可以加载非 JS 模块
1. 扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。

2.初始化项目


├── src   # 源码目录

│   ├── a-module.js

│   └── index.js

编写 a-module.js


module.exports = 'hello';

编写 index.js


let a = require('./a-module');

console.log(a);

这里我们使用CommonJS模块的方式引入，这种方式默认在浏览器上是无法运行的，我们希望通过 webpack 来进行打包！

3.webpack快速上手

3.1 安装


npm init -y

npm install webpack webpack-cli --save-dev

webpack默认支持0配置,配置scripts脚本


"scripts": {

  "build": "webpack"

}

执行npm run build,默认会调用 node_modules/.bin下的webpack命令，内部会调用webpack-cli解析用户参数进行打包。默认会以 src/index.js 作为入口文件。

这里也可以使用npx webpack , npx 是 5.2版本之后npm提供的命令可以执行.bin下的可执行文件

我们可以发现已经产生了dist目录，此目录为最终打包出的结果。main.js可以在html中直接引用,这里还提示我们默认mode 为production

3.2 webpack.config.js

我们打包时一般不会采用0配置，webpack在打包时默认会查找当前目录下的 webpack.config.js or webpackfile.js 文件。

通过配置文件进行打包


const path = require('path');

module.exports = {

    entry:'./src/index.js',

    output:{

        filename:'bundle.js', // 打包出的结果文件

        path:path.resolve(__dirname,'dist') // 打包到dist目录下

    }

}

3.3 配置打包的mode

我们需要在打包时提供mode属性来区分是开发环境还是生产环境,来实现配置文件的拆分


├── build

│   ├── webpack.base.js

│   ├── webpack.dev.js

│   └── webpack.prod.js

我们可以通过指定不同的文件来进行打包

配置scripts脚本


"scripts": {

  "build": "webpack --config ./build/webpack.prod",

  "dev": "webpack --config ./build/webpack.dev"

}

从0搭建webpack开发环境(一)