项目脚手架搭建概要

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 条评论
登录 后参与评论

相关文章

来自专栏前端杂谈

vue调试工具vue-devtools安装及使用

2808
来自专栏AndroidTv

如何用Android Studio查看build.gradle源码

上一篇博客里讲过 build.gradle 里的每一行代码基本都是在调用一个方法,既然是这样,我们就可以用 android studio(下面简称as) 去查看...

36110
来自专栏北京马哥教育

Python之Flake8 - Coding Style检查自动化的利器

参考文档: http://blog.csdn.net/gaoyingju/article/details/50449522 http://fla...

3128
来自专栏前端人人

React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建...

4903
来自专栏静默虚空的博客

Webpack 入门

Webpack 入门 **Tip:** 本文所有示例基于 webpack2。 文中的示例代码说明可以参考:Webpack 示例代码说明 安装 本地安装 $...

2777
来自专栏网站源码

博客复制弹窗提示版权

CSS与JS文件配套下载:https://www.lanzous.com/i1j8ppi

1024
来自专栏企鹅号快讯

Ubuntu 17.10 安装Sublime Text 3 教程

流行的跨平台的Sublime Text编辑器终于提供了官方的Linux apt库,以便在Ubuntu中安装和接收更新。 Sublime Text 3 Subli...

2807
来自专栏运维技术迷

python实现Tab自动补全功能

{大神请忽略} ? 默认情况下python命令行下是不支持命令补全功能的,用的时候总是得百度,所以索性在博客简单记录一下,方便下次使用. 一、创建tab....

3006
来自专栏python3

终端循环执行命令

904
来自专栏用户2442861的专栏

17个你必须牢记的Win7快捷键

要在Win7的“资源管理器”中新建一个文件夹,最传统、常规的方式莫过于打开相应分区下的目录,然后右键点击空白处,选择“新建”→“文件夹”。 不过,利用快捷键...

901

扫码关注云+社区