Webpack从0打包实战

weixin_42268439

已于 2022-11-19 17:23:42 修改

阅读量157

点赞数

分类专栏： webpack系列入门文章标签： webpack

于 2022-11-18 17:56:40 首次发布

本文链接：https://blog.csdn.net/weixin_42268439/article/details/127926685

版权

webpack系列入门专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Webpack是什么？

webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序 我们来对上面的解释进行拆解：

打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具
静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；
模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；
现代的modern：我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展；

为什么要打包：

一般情况下，我们编写的代码存在以下问题，使得我们必须通过某种打包工具，让其转换成浏览器可以识别的语法

1.使用了ES6的语法，比如const、箭头函数等语法；
2.使用了ES6中的模块化语法；
3.使用CommonJS的模块化语法；
4.在通过script标签引入时，必须添加上 type="module"属性；

Webpack的依赖

Webpack的运行是依赖Node环境的，所以我们电脑上必须有Node环境（安装Node.js的同时会安装npm）

工程通过webpack打包全过程

一、工程初始化

执行npm init 生成package.json文件，初次生成的json文件如下

{
  "name": "untitled1",    //打包生成的
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC"
}

二、安装webpack和webpack-cli

webpack的安装分为两个：webpack和webpack-cli

webpack在执行过程中是依赖webpack-cli的，而webpack-cli中代码执行过程中，才是真正利用webpack进行编译和打包的过程；

安装命令：（下面两个命令是相同的，-D或者--save-dev其实就是把webpack安装包信息加入到devDependencies(开发阶段的依赖,就是在开发过程中需要的依赖,只是在开发阶段起作用)）

        npm install webpack webpack-cli –D
        npm install webpack webpack-cli –-save-dev

安装后package.json中会自动变更为如下内容：

{
  "name": "untitled1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.74.0",
    "webpack-cli": "^5.0.0"
  }
}

三、package.json中配置打包脚本（添加script选项）

{
  "name": "untitled1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"    //script下面的脚本，通过npm run执行
  },
  "devDependencies": {
    "webpack": "^5.74.0",
    "webpack-cli": "^5.0.0"
  }
}

四、执行打包命令

npm run build（build对应scripts下的build选项），执行此命令的过程就会自动查找当前目录下/src/index.js文件，并将打包之后的文件命令为index.js存放在dist目录下（dist目录会自动创建）

五、通过引用默认配置文件打包

webpack打包过程中会自动从当前目录下查找webpack.config.js文件作为默认配置文件打包，当然我们也可以指定配置文件（webpack --config 指定配置文件名）

const path = require('path')

//当使用webpack打包的时候，
// webpack会自动去项目根目录下寻找webpack.config.js这个配置文件，
// 加载里面的配置，根据配置选项进行打包
module.exports = {
    entry: './src/main.js',                    //指定打包文件时的入口文件
    output: {
        filename: 'bundle.js',                 //指定打包之后的文件名
        path: path.resolve(__dirname, './dist')//指定输出文件存放路径
    }
}

至此，一个简单的webpack打包过程执行完毕