By

Contents
  1. 1. Install作用
  2. 2. webpack 的学习

命令

Install作用

npm install -g npm

升级npm

nmp init或者npm init -y

初始化package.json文件，若都用默认参数则用 npm init -y

npm -v

查看npm版本

npm config set registry https://registry.npm.taobao.org

设置npm为淘宝镜像

npm config get registry

查看镜像

npm config edit

编辑npm 配置文件

npm help npm

打开本地的npm帮助文件，内容很详细

npm help config

查看config 命令的帮助文件，npm其他命令也可以用此方法看详细帮助

npm run start

运行package.json scripts节中名称为start的命令

例如：

{
// …
“scripts”: {
​ “start”: “node build.js”
}
}

npm view 模块名 versions

查看某个模块的所有版本，这个命令会联网，会有延迟。

(1)、npm install -g 模块名

(2)、npm install –save-dev 模块名

(3)、npm install –save 模块名

(4)、npm install

（1）全局安装

(2)自动把模块和版本号添加到dependencies部分，生产环境

(3)自动把模块和版本号添加到devdependencies部分，开发环境

(4)在带有package.json的文件夹中执行的作用是，按照package.json文件中的依赖包的配置安装所有依赖的包。

webpack 的学习

webpack可以打包，编译js，还可以预处理css,使用style-loader css-loader 对css打包，主要从以下几点进行讲述：

  • css的引入

  • 使用style-loader和css-loader打包css

  • 使用style-loader/url

  • 使用style-loader/useable

  • 使用style-loader的options配置

  • 使用css-loader的options配置

    loader的加载顺序是从右往左的。这里的编译顺序是先用css-loader将css代码编译，再交给style-loader插入到网页里面去。所以css-loader在右，style-loader在左。

全局安装：

npm install –global webpack

不推荐全局安装，因为全局安装将会锁定指定版本，并且在使用不同的webpack版本的项目中，可能会导致构建失败。

lodash一个一致性，模块化，高性能的javascript实用工具库

在安装一个要打包到生产环境的安装包时，你应该使用 npm install --save，如果你在安装一个用于开发环境的安装包（例如，linter, 测试库等），你应该使用 npm install --save-dev。请在 npm 文档 中查找更多信息。

npx npm包的一个执行器

ES5中的Import和Export

一个js文件代表一个模块，ES6 模块化使用到了import和export 在浏览器中导入和导出各个模块，

webpack 如何管理资源和图片？

webpack 打包思想：

webpack可以将网页所需要的js css 图片等资源整体打包压缩，用户只需要请求你打包后的文件，请求数量大大减少，节省浏览器响应时间，减少用户的等待时间。

webpack打包的思想：chunk思想；

webpack分析网页中的所需要的js文件，css文件，font文件，每个文件都是一块一块的，以及各自文件所依赖的文件，形成依赖树，然后 webpack根据文件类型，采用不同的loader进行处理加载， js文件用babel-loader将ES6转换，css根据post-loader做兼容处理，然后输入到html文件中。

Contents
  1. 1. Install作用
  2. 2. webpack 的学习