原创

初识WebPack

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



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



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

npm init -y
Cmd 复制
那么你会发现在项目中生成了一个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"
}
JSON 复制
其中package.json中,我们可以在scripts新增两个命令:

"dev":"webpack --mode development",//开发环境
"production":"webpack --mode production"//生产环境
JSON 复制
我们可以根据我们所需要的场景进行如下命令进行打包构建工作

npm run dev

cnpm run production
后端
  • 泽泽泽
  • 2020-11-05 11:33:30.497

评论区