项目脚手架搭建概要

1.npm install

一个项目如果需要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

2.webpack

webpack是一种模块化工具。设计初衷是require anything,就是想把前端涉及的所有文件,都通过js的require组织起来,最后以js为入口。它能够require anthing的基础,是因为它有各种各样的loader插件来引入各种各样的文件,甚至当你需要的文件没有现成插件能引用的时候,你还可以自己去写一个loader插件。webpack是天成支持commonjs规范的,它的编译原理是用node.js把commen下的模块,即commenjs模块,全部转化为浏览器支持的funtion形式的模块,然后再用一个模块加载器来组织这些模块,这样commonjs的模块化方案就能通过webpack的转换在浏览器上运行了。

Paste_Image.png

3.webpack的安装

我们一般是通过npm来安装webpack。在安装的过程时,我们先要安装一个全局的webpack,命令: npm install webpack -g;然后再初始化我们项目里的webpack依赖,命令:npm install webpack@1.15.0(一个版本号) --save-dev。最后安装完webpack的时候,可以通过命令webpack-v来查看我们安装的版本号

Paste_Image.png

4.webpack安装过程中可能的疑问

1.为什么全局安装的时候不适用版本号,而在安装项目依赖的时候就用了?

  • 这个问题涉及到npm的加载原理:npm会优先使用项目本地的npm包,如果没找到的时候,才去全局的npm包里找,我们在全局安装就是为了提供npm的命令,而真正用到的来时本地的安装包版本。 2.本地安装的时候加了一个--save-dev,这是什么意思?
  • 这是npm的另一个机制,它会把包的信息存放到package.json的文件里,这样就能记录项目的依赖了。例如通过--save-dev安装了npm包以后,包的名称和版本都会被自动存到package.json的文件里,会存放到devDependencies文字段。 还有另外一种方式是--save,这种方式安装的包会被存放到dependencies文字段。这两个的区别:其实就是加了dev的存放开发时的辅助工具,一般不会被打包进业务代码,也就是我们的测试工具、打包工具之类的都可以放这。而没有devdependencies字段里放的是业务代码的依赖包,比如我们项目依赖jQuery,就可以把jQuery放在dependencies

5.webpack的配置文件(webpack的核心内容)

webpack对各种文件的处理方式都是在这里配置的,webpack的配置文件默认指向的是根目录下的webpack.config.js文件。这个文件其实就是commonjs的一个模块,而模块的最终输出就是一个json形式的配置文件。wenpack的配置文件里有如下几个主要的 字段:

  • 1.entry:它是js的入口文件,这里放我们源文件中js的路径。
  • 2.externals:是外部依赖的声明,一些外部的内容可以用它来转化成commonjs可引用的模块。
  • 3.output:定义了目标文件的内容。
  • 4.resolve:用来配置目录的别名。
  • 5.module:它里面是各种文件的loader。
  • 6.plugins:用来加载webpack的插件。

对于webpack来说,它最重要的就是webpack的loader,它能够require anything就是通过loader来实现的。 常用的loader:

  • 1.加载HTML时,用:html-webpack-plugin或者html-loader
  • 2.加载JS时,用:babel-loader 和 babel-preset-es2015
  • 3.加载CSS时,用:style-loader 和 css-loader
  • 4.图片和字体等其他静态资源image + font,都可以用:url-loader

Paste_Image.png

6.webpack的常用命令

  • webpack:用来规定以不压缩的形式打包,常用于调试代码。
  • webpack-p:用来做线上发布时的打包,会把所有文件做最小化压缩。
  • webpack --watch:是用来监听文件的改变而自动编译,一般用于开发过程。

7.webpack-dev-server

作用:前端开发服务器,启动后可以通过localhost的形式来访问我们的项目。 特色:最大的用途是可以在文件改变时,自动刷新浏览器。 安装命令:npm install webpack-dev-server --save-dev,安装完以后需要在webpack的配置文件里加一些东西。就是我们需要把webpack-dev-server的client打包进业务代码。

  • 配置:npm install webpack-dev-server/client?http://localhost:8080,配置完以后我们就可以启动webpack-dev-server
  • 使用:npm install webpack-dev-server --port 8088 --inline,--inline的作用就是把webpack-dev-server的client直接用脚本的方式插入到页面

Paste_Image.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯云存储团队

cosbrowser 腾讯云 COS 桌面客户端

首先猛戳下载地址安装好 cosbrowser:https://cloud.tencent.com/document/product/436/11366

6875
来自专栏小樱的经验随笔

Linux目录结构

Linux 目录结构 装完Linux,首先需要弄清Linux 标准目录结构 ? / root —?启动Linux时使用的一些核心文件。如操作系统内核、引导程序G...

3606
来自专栏Lambda

Ubuntu下SVN安装和配置

Ubuntu下SVN安装和配置 一、SVN安装 1.安装包 1.$ sudo apt-get install subversion 2.创建项目目...

2527
来自专栏信安之路

XSS学习笔记【一】

非持久型XSS也称反射型XSS。具体原理就是当用户提交一段代码的时候,服务端会马上返回页面的执行结果。那么当攻击者让被攻击者提交一个伪装好的带有恶意代码的链接时...

680
来自专栏北京马哥教育

Gitlab CE 8.1.3 安装手册(Debian/Ubuntu)

安装概述 Gitlab的安装过程主要包括以下组件的配置: 安装软件包及解决依赖项 Ruby环境 Go 系统用户 数据库(Mysql/Postgresql) Re...

3035
来自专栏Pythonista

centos7上使用locate命令

locate(locate) 命令用来查找文件或目录。 locate命令要比find -name快得多,原因在于它不搜索具体目录,而是搜索一个数据库/var/l...

1071
来自专栏腾讯云Elasticsearch Service

Elasticsearch跨集群数据迁移之离线迁移

用户在腾讯云上自建的ES集群或者在其它云厂商购买的ES集群,如果要迁移至腾讯云ES,用户可以根据自己的业务需要选择适合自己的迁移方案。如果业务可以停服或者可以暂...

1.9K8
来自专栏python学习路

一、Django的基本用法

学习Django有一段时间了,整理一下,充当笔记。盗张图: ? MVC 大部分开发语言中都有MVC框架 MVC框架的核心思想是:解耦 降低各功能模块之间的耦合性...

3045
来自专栏云计算教程系列

如何在Ubuntu 14.04上安装Munin监视工具

Munin是一个系统,网络和基础设施监控应用程序,通过Web浏览器以图形形式提供信息。它是围绕客户端 - 服务器架构设计的,可以配置为监控它所安装的机器(Mun...

610
来自专栏Laoqi's Linux运维专列

看懂FTP的主动和被动模式

3619

扫码关注云+社区