webpack使用总结

一、webpack简介

1、Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

2、WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些预设,打包为合适的格式以供浏览器使用。

二、webpack安装

1、webpack安装需要本地环境支持node.js,并且npm包管理器可用;

2、检查node是否安装:

已安装:node -v;

未安装:全局安装输入:npm install webpack -g,但是全局安装比较慢,可以使用淘宝镜像:cnpm install webpack -g。

安装出现报错时:windows环境——cmd右键,以管理员身份运行,然后执行npm install webpack -g;苹果——sudo npm install webpack -g 按下回车,输入开机密码(用户密码),回车。

本地安装的时候,将依赖包信息写入package.json中

注意一个问题,在团队协作中,一个常见的情景是他人从github上clone你的项目,然后通过npm install安装必要的依赖,(刚从github上clone下来是没有node_modules的,需要安装)那么根据什么信息安装依赖呢?就是你的package.json中的dependencies和devDepencies。所以,在本地安装的同时,将依赖包的信息(要求的名称和版本)写入package.json中是很重要的!

npm install 模块:安装好后不写入package.json中

npm install 模块 --save安装好后写入package.json的dependencies中(生产环境依赖)

npm install 模块 --save-dev安装好后写入package.json的devDepencies中(开发环境依赖)

["npm ERR! Error: EPERM: operation not permitted"问题解决](http://www.mamicode.com/info-detail-1495419.html)

3、检查npm是否可用:npm -v

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,237评论 7 35
  • 前言 众所周知目前比较火的工具就是gulp和webpack,但webpack和gulp却有所不同,本人两者的底层研...
    cduyzh阅读 1,392评论 0 13
  • 什么是 NPM npm之于Node,就像pip之于Python,gem之于Ruby,composer之于PHP。 ...
    ihoey阅读 6,268评论 2 36
  • 什么是背叛?什么是冷漠?人的天性自私,偶有大义凛然,舍己为人的,也真是凤毛菱角,屈指可数。 刚刚度过了...
    默默的monologue阅读 283评论 0 1
  • 但其实,斯人若彩虹,遇上方知有。人活一世,总有一个人会值得你去冒险。
    65522dd0f5ad阅读 178评论 0 0