一个项目如果需要npm来加载依赖包,那么他就需要先做npm的初始化,npm初始化过程是通过npm init来完成的。当我们输入npm init之后,会接着让我们输出一些参数信息,比如:项目名称、作者之类的。初始化成功后会在项目的根目录下生成package.json的npm配置文件,所有的npm信息都在里面。
用npm安装依赖包的时候,可以使用npm install xxx@v.v.v
命令,执行完该命令后会在项目根目录下生成node_modules的文件夹,所有npm的源文件都会放在这里。
卸载依赖包的命令:npm uninstall xxx@v.v.v
参数:-g
指全局安装
参数: --registry=https://registry.npm.taobao.org
,用来指定nmp源地址,如果在国内使用npm install
时觉得很慢,可以用参数registry
把npm源指向国内的淘宝源
Paste_Image.png
webpack是一种模块化工具。设计初衷是require anything,就是想把前端涉及的所有文件,都通过js的require组织起来,最后以js为入口。它能够require anthing的基础,是因为它有各种各样的loader插件来引入各种各样的文件,甚至当你需要的文件没有现成插件能引用的时候,你还可以自己去写一个loader插件。webpack是天成支持commonjs规范的,它的编译原理是用node.js把commen下的模块,即commenjs模块,全部转化为浏览器支持的funtion形式的模块,然后再用一个模块加载器来组织这些模块,这样commonjs的模块化方案就能通过webpack的转换在浏览器上运行了。
Paste_Image.png
我们一般是通过npm来安装webpack。在安装的过程时,我们先要安装一个全局的webpack,命令: npm install webpack -g
;然后再初始化我们项目里的webpack依赖,命令:npm install webpack@1.15.0(一个版本号) --save-dev
。最后安装完webpack的时候,可以通过命令webpack-v
来查看我们安装的版本号
Paste_Image.png
1.为什么全局安装的时候不适用版本号,而在安装项目依赖的时候就用了?
--save-dev
,这是什么意思?--save-dev
安装了npm包以后,包的名称和版本都会被自动存到package.json的文件里,会存放到devDependencies
文字段。
还有另外一种方式是--save
,这种方式安装的包会被存放到dependencies
文字段。这两个的区别:其实就是加了dev的存放开发时的辅助工具,一般不会被打包进业务代码,也就是我们的测试工具、打包工具之类的都可以放这。而没有dev
的dependencies
字段里放的是业务代码的依赖包,比如我们项目依赖jQuery,就可以把jQuery放在dependencies
webpack对各种文件的处理方式都是在这里配置的,webpack的配置文件默认指向的是根目录下的webpack.config.js
文件。这个文件其实就是commonjs的一个模块,而模块的最终输出就是一个json形式的配置文件。wenpack的配置文件里有如下几个主要的
字段:
对于webpack来说,它最重要的就是webpack的loader,它能够require anything就是通过loader来实现的。 常用的loader:
html-webpack-plugin或者html-loader
babel-loader 和 babel-preset-es2015
style-loader 和 css-loader
url-loader
Paste_Image.png
作用:前端开发服务器,启动后可以通过localhost的形式来访问我们的项目。
特色:最大的用途是可以在文件改变时,自动刷新浏览器。
安装命令:npm install webpack-dev-server --save-dev
,安装完以后需要在webpack的配置文件里加一些东西。就是我们需要把webpack-dev-server的client打包进业务代码。
npm install webpack-dev-server/client?http://localhost:8080
,配置完以后我们就可以启动webpack-dev-servernpm install webpack-dev-server --port 8088 --inline
,--inline
的作用就是把webpack-dev-server的client直接用脚本的方式插入到页面Paste_Image.png