npm和webpack
npm是前端开发中常用的一种工具,对于普通开发者来说,便于管理依赖。
往大了说,便于共享代码。写完代码,使用npm发布以后,然后别人用npm可以方便地共享到你的代码。
npm的使用:
mac环境下的安装:brew install node //node自带npm
在前端工程的根文件下,npm init --yes 会在该文件夹下生成package.json//package.json 声明了该工程的名称、版本、依赖等信息。
在该工程的根文件夹下,npm install 依赖名 --save,会安装依赖,同时把改依赖信息写入package.json当中
npm install 依赖名 --save-dev 安装开发测试环境的依赖
npm update //更新依赖
npm uninstall 依赖名 //在本地去除依赖
npm uninstall --save 依赖名 //在package.json中删除该依赖的信息
npm install -g 依赖名 //全局安装(全局指该主机的全局),可以直接在命令行中使用
npm update -g 依赖名 //依赖的更新
npm uninstall -g 依赖名 //依赖的卸载
webpack:高效的打包工具,可以把一堆js合成为一个js文件,同时生成html
使用方法:
安装:
npm install webpack -g
配置文件:
webpack.config.js
var path = require('path'); module.exports = {
entry: './app/index.js', //入口文件
output: {
filename: 'bundle.js', //生成的文件名
path: path.resolve(__dirname, 'dist') //生成文件的路径
}
};
通过npm使用webpack:在package.json内配置scripts build
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" //关键代码
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.23.1", // 大版本.次要版本.小版本 ~版本号:不低于小版本,不大于次要版本 ^版本号:不低于次要版本,不大于大版本
"babel-loader": "^6.3.2",
"babel-preset-es2015": "^6.22.0",
"html-webpack-plugin": "^2.28.0",
"webpack": "^2.2.1"
},
"dependencies": {
"lodash": "^4.17.4"
}
}
然后 npm run build就开始使用webpack进行打包
webpack把app/index.js为入口的一堆js打包合成为一个 bundle.js
更厉害的是,webpack可以将一个html模板和bundle.js合成在一起,生成一个引用了bundle.js的html文件。
生成html的方法:
安装:
npm install html-webpack-plugin --save-dev
修改webpack.config.js
var path = require('path');
var HtmlWebpackPlugin= require('html-webpack-plugin'); //声明下插件 module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins:[ //使用插件
new HtmlWebpackPlugin({
filename :'index.html', //要生成的html文件
template:'index.html' //html文件的模板
})
]
};
修改后,
npm run build 就会在dist文件夹下生成一个html文件,bundle.js文件已经引入好了。
另外前段开发过程中存在一个这样的问题:
es6(es2015和es2016)已经出了很久了,但是市面上的浏览器还不能完全兼容。
使用es5写代码就好了,但是广大程序员就是喜欢装逼用es6。为了解决这个问题,babel应运而生。babel就是能把你es6写的代码转成es5,方便浏览器兼容。
babel使用方法:
安装:
npm install babel-core babel-loader --save-dev
修改webpack.config.js的配置文件
var path = require('path');
var HtmlWebpackPlugin= require('html-webpack-plugin'); module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins:[
new HtmlWebpackPlugin({
filename :'index.html',
template:'index.html'
})
],
module:{ //添加loader
loaders:[
{
test: /.js$/, //那些文件要转化
exclude: /node_modules/, //屏蔽哪些
loader:"babel-loader" //指定loader
}
]
}
};
最后npm run build就把文件生成好了。
npm和webpack的更多相关文章
- D1.1.利用npm(webpack)构建基本reactJS项目
前提: 已经安装nodejs和npm #全局安装webpack 自动构建化工具,职能管理项目:webpack-dev-server是开发工具,提供 Hot Module Replacement 功能# ...
- element-ui和npm、webpack、vue-cli搭建Vue项目
一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...
- npm安装webpack失败(mac和window都可能会遇到这样的情况,以下问题主要以mac为例)
问题描述:我想查看一下webpack的版本,于是输入了命令webpack -v, 结果如下图所示: 注:这里提示我们要安装webpack-cli,是因为到了webpack4, webpack 已经将 ...
- npm、webpack、vue-cli
Node.js npm 什么是Node.js 以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chrome V8 引擎的. npm 是Node.js 的包管理 ...
- npm、webpack、vue-cli 快速上手版
Node.js npm 什么是Node.js 以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chrome V8 引擎的. npm 是Node.js 的包管理 ...
- 使用npm安装webpack失败时,可能被墙要为cmd命令行设置代理
一.搜索到的相关概念: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. npm是 Node packaged Modules(node的包管理工具).本身用n ...
- npm install webpack -g
npm install webpack -g 全局安装webpack
- npm、webpack、vue-cli快速上手版
node.js和npm npm的安装和更新 Node.js下载安装,npm自带的包管理工具. 查看安装版本信息: node -v 查看node.js版本信息 npm -v 查看npm版本信息 更新np ...
- Vue.js随笔三(npm init webpack my-project指令安装失败解决方案)
如果没有安装淘宝给的镜像就先安装一下,指令如下,对!就是如此简单: npm install -g cnpm -registry=https://registry.npm.taobao.org 首先输入 ...
- npm、webpack、vue-cli 快速上手
npm+webpack+vue-cli快速上手 Node.js npm 什么是Node.js 以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chrome ...
随机推荐
- java中ThreadLocal类的详细介绍(详解)
ThreadLocal简介 变量值的共享可以使用public static的形式,所有线程都使用同一个变量,如果想实现每一个线程都有自己的共享变量该如何实现呢?JDK中的ThreadLocal类正是为 ...
- Python中的三种等待时间
一.强制等待 不论页面是否加载完成,都要等待指定时间才能执行下一步, 单位秒,time.sleep(5) import time time.sleep(10) # 强制等待10秒时间 二.隐式等待( ...
- 使用Aspose.word (Java) 填充word文档数据(包含图片填充)
Aspose填充word数据 本文介绍了如何使用aspose进行word文档的生成,并提供了工具类供参考. 有问题欢迎 call 微信:905369866,小弟尽力而为..毕竟这玩意没吃透. 目录 A ...
- 5、react-路由
1.单页面:(只有一个index.html)(为什么要使用react-router再react中) 所有的组件都是再同一个index.html中进行显示的,它再显示的时候是怎么显示的,通过你点击的连接 ...
- 【微信H5】 Redirect_uri参数错误解决方法
1 https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx14127af0bc9fd367&redirect_uri=http ...
- Firefox中input元素,不能重新获取焦点函数focus()
js校验输入框的函数: function is_number(feild) { var strRegExp = /^\d+(\.\d{1,2})?$/; if (!strRegExp.test(fei ...
- Redis的持久化设计
Redis 持久化设计 持久化的功能:Redis是内存数据库,数据都是存储在内存中的,为了避免进程退出导致数据的永久丢失,要定期将Redis中的数据以某种形式从内存保存到硬盘,当下次Reids重启时, ...
- LinkedList竟然比ArrayList慢了1000多倍?(动图+性能评测)
数组和链表是程序中常用的两种数据结构,也是面试中常考的面试题之一.然而对于很多人来说,只是模糊的记得二者的区别,可能还记得不一定对,并且每次到了面试的时候,都得把这些的概念拿出来背一遍才行,未免有些麻 ...
- Asp.Net Mvc 控制器详解
理解控制器 控制器的角色 (1)中转作用:控制器通过前面的学习大家应该知道它是一个承上启下的作用,根据用户输入,执行响应行为(动 作方法),同时在行为中调用模型的业务逻辑,返回给用户结果(视图). ( ...
- excel如何快速统计出某一分类的最大值?
问题:如何统计出某一分类的最大值? 解答:利用分类汇总或透视表快速搞定! 思路1:利用分类汇总功能 具体操作方法如下: 选中数据区任意一个单元格,然后点击“数据-分类汇总”按钮.(下图 1 处). 在 ...