初识WebPack

WebPack是什么

WebPack是一个开源的前端打包工具。当WebPack进行处理应用程序的时候，他会构件一个依赖关系图，其中包含应用程序中需要的各个模块，然后将所有的模块打包成一个或者是多个魔族。WebPack可以通过终端或者是更改WebPack.config.js文件来进行设定各个功能

使用WebPack的前置条件是需要安装NodeJS,WebPack其中的一个特性就是使用载入器将资源转换成为模组,开发者可以自定义载入器的顺序,格式来适应需求

简单的来说,一款模块加载器兼打包工具,它能把各种资源作为模块使用和处理,我们可以通过require(XXX)的形式来引入各个模块,即使他们可能需要经过编译(如Sass),但开发者无须在上面花费过多的心思,因为WebPack有着各种健全的加载器进行默默的处理

WebPack的优点

• WebPack是以CommonJS的形式来书写脚本的,对AMC/CMD的支持也很全面,方便旧项目进行代码迁移
• 能被模块化的不仅仅是JS,其他的金泰资源同样可以进行模块化
• 开发便捷,能够替代部分Grunt(基于Node.js的项目构建工具)/Gulp(基于Node.js的项目构建工具)的工作,如打包,压缩混淆,图片序列化
• 扩展性强,插件机制完善,特别是支持React热插拔(react-hot-loader)功能

配置一个完整项目的WebPack

我采用的是webpack4

cnpm install webpack --save-dev -g

cnpm install webpack-cli -g

之后在项目中执行

npm init -y

那么你会发现在项目中生成了一个package.json

我们再进行一下修改

{
  "name": "wp4",
  "version": "1.0.0",
  "description": "一个webpack4项目",
  "main": "index.js",
  "scripts": {
    "bulid":"webpack",
    "dev":"webpack --mode development",
    "production":"webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "MIT"
}

其中package.json中,我们可以在scripts新增两个命令:

"dev":"webpack --mode development",//开发环境
"production":"webpack --mode production"//生产环境

我们可以根据我们所需要的场景进行如下命令进行打包构建工作

npm run dev

cnpm run production

本篇文章只用作记录我的学习笔记,不当做初学者入门的文章!