码迷,mamicode.com
首页 > Web开发 > 详细

初识webpack

时间:2020-10-30 11:47:37      阅读:24      评论:0      收藏:0      [点我收藏+]

标签:初识   pts   默认   文件夹   生成文件   读取   --   环境   构建   

webpack是基于模块化的打包(构建)工具,通过一个入口文件递归出所有模块的依赖关系,经过一系列的过程(压缩,合并),最终生成运行的代码。

webpack的特点

  • 解决工程化问题(只关注开发时的代码,把工程化过程中的问题交给webpack处理)
  • 简单易用:支持0配置
  • 强大生态:可以融入第三方库
  • 基于nodeJs:webpack构建的过程是运行工在node环境中的,因为需要本地读取文件,分析依赖关系,并且生成打包后的文件,而在浏览器端是做不到读取文件和生成文件的。
  • 基于模块化:webpack打包是根据特殊导入导出语句分析依赖关系进行打包

webpack的安装

  • 通过npm install安装 webpack ,webpack-cli
  • webpack:核心包,包含webpack构建过程中要用到的所有api
  • webpack-cli:提供一个简单的cli命令来调用webpack核心包的api,来完成构建过程
  • 安装推荐使用本地安装,使每个项目都使用自己的webpack版本进行构建
  • npm install -D webpack webpack-cli

webpack使用

  • webpack默认从src文件夹下的index.js读取入口文件,打包到dist文件夹下的的main.js中

设置开发环境和生成环境

"scripts": {
    "dev": "webpack --mode=development",
    "build":"webpack --mode=production"
  },

 

初识webpack

标签:初识   pts   默认   文件夹   生成文件   读取   --   环境   构建   

原文地址:https://www.cnblogs.com/jiaobaba/p/13890681.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!