文档章节

webpack

waynehu
 waynehu
发布于 2017/04/27 13:28
字数 386
阅读 11
收藏 0

#安装基础环境

##安装nvm

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
source .bashrc

##用nvm安装node

// 切换一下安装源
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
//安装最新版本的node,6.2
nvm install node
//指定node版本为5.8
nvm install 5.8
#npm自动补全
npm completion >> ~/.bashrc

#开始学习webpack

环境:我们在home目录下建立文件夹webpack-tut,所有的文件都放在这个目录下

mkdir ~/webpack-tut
cd ~/webpack-tut

##建立package.json

npm init

##安装webpack

###全局安装

我们可以将webpack装在家目录下特殊目录里~/.npm,那这个webpack就是所有该项目共有的

npm install webpack -g

安装完成后会装在家目录下.npm目录,并把命令webpack放入环境变量,所以直接可以在命令行使用webpack命令,而非全局安装使用的时候需要找到执行文件所在路径

###非全局安装

我们可以将webpack装在当前目录里~/webpack-tut,那这个webpack就是该项目独有的

npm install webpack --save-dev

安装完成后会在当前目录下多出node_modules目录

##建立测试页面

###index.js

var app = document.getElementById('app');
app.innerHTML = '<p>hello world</p>';

###index.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
</head>
<body>
        <div id="app"></div>
        <script src="index.js"></script>
</body>
</html>

##安装web服务器查看页面

npm install http-server --g
http-server

###查看页面

打开浏览器 http://127.0.0.1:8080 查看页面内容

##使用webpack第一次打包

将index.js打包成bundle.js

 ~/webpack-tut/node_modules/webpack/bin/webpack.js index.js bundle.js

###修改index.html

将index.js替换成bundle.js后发现还可以正常运行

© 著作权归作者所有

上一篇: 抓包分析
下一篇: imagemagic
waynehu
粉丝 34
博文 52
码字总数 27611
作品 0
静安
私信 提问
webpack3新特性简介

升级到webpack3 升级到webpack3,只需要通过npm安装即可:    webpack3几乎与webpack2完美兼容,除了会影响一些插件的使用,官方给出的数据是:98%的用户升级后,没有影响webpack功能的正常...

shptc
2017/06/23
0
0
Webpack 、git常用命令总结

一、Webpack 常用命令总结 npm install webpack -g // 全局安装webpack npm init -y //初始化默认的package.json文件 npm install webpack --save-dev //下载webpack插件到node_modules 并在......

菜鸟的进阶
2017/10/19
0
0
Webpack入门到精通(1)

前言 什么是webpack 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中...

励步前端团队
05/21
0
0
从 Sprockets 迁移到 Webpacker(上)

从 Sprockets 迁移到 Webpacker(上) 脱线道士维克多2017-12-222 阅读 javascript 为何要迁移 当年 Asset Pipeline 在 Rails 3.1 出现的时候确实很惊艳,但是近年来前端社区越来越火热,在大...

脱线道士维克多
2017/12/22
0
0
gulp与webpack-stream集成配置

webpack非常强大,但是也有不足的地方,批量式处理依然是gulp更胜一筹.我们是否可以将两者的优点结合起来呢?这篇文章就是讲述如何集成gulp和webpack 1.安装webpack-stream 很重要的插件,当然也...

WolfX
2016/05/12
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

聊聊Elasticsearch的MonitorService

序 本文主要研究一下Elasticsearch的MonitorService MonitorService elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/monitor/MonitorService.java public class MonitorServic......

go4it
43分钟前
3
0
二、Docker

1、Docker - The TLDR(Too Long,Don't Read,Linxu 终端工具 ) Docker是在Linux和Windows上运行的软件。它创建、管理和编排容器。该软件以开源方式开发,在Github上作为Moby开源项目的一部分。...

倪伟伟
56分钟前
3
0
Python猫荐书系列之七:Python入门书籍有哪些?

本文原创并首发于公众号【Python猫】,未经授权,请勿转载。 原文地址:https://mp.weixin.qq.com/s/ArN-6mLPzPT8Zoq0Na_tsg 最近,猫哥的 Python 技术学习群里进来了几位比较特殊的同学:一...

豌豆花下猫
今天
5
0
Guava RateLimiter限流源码解析和实例应用

在开发高并发系统时有三把利器用来保护系统:缓存、降级和限流 缓存 缓存的目的是提升系统访问速度和增大系统处理容量 降级 降级是当服务出现问题或者影响到核心流程时,需要暂时屏蔽掉,待高...

算法之名
今天
14
0
国产达梦数据库与MySQL的区别

背景 由于项目上的需要,把项目实现国产化,把底层的MySQL数据库替换为国产的达梦数据库,花了一周的时间研究了国产的数据库-达梦数据库,它和MySQL有一定的区别,SQL的写法也有一些区别。 ...

TSMYK
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部