npm Webpack

安装nvm
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
npm update 升级
sudo npm install -g n 安装n
sudo n stable
nvm ls-remote 列出node所有版本
nvm install v6.10.0安装node6.10.0版本

git branch –set-upstream-to origin/dev
git branch -m origin/dev dev

git add.
git commit -m “”
git status
git branch
git checkout dev
git branch
git push origin dev
git branch -a
git remote -v
git fetch origin
git merge origin/dev

http://www.clarkhan.com/2015/06/05/linux-install-node-with-nvm/

安装express@4.15.2 : npm install -g express
WebStorm破解 http://blog.csdn.net/u012714280/article/details/51581492

sudo mv mongodb-linux-x86_64-3.0.6/ /usr/local/mongodb

在命令行中的复制战帖是 ctrl+shift+v/c
启动mongdb sudo mongod
sudo gedit /etc/systemd/system/mongodb.service用记事本打开

Webpack
React+Webpack+ES6的组合很常见
Webpack有一个特性叫代码分隔 Code Splitting可以使得项目在加载时只加载项目当时需要的文件
通过loaders对文件进行处理

npm init初始化 一直回车

npm install webpack –save-dev 安装webpack
打开文件会看到以下目录

在项目中新建一个hello.js文件 并编写如下函数

使用webpack打包hello.js 前面是要打包的文件名 后面是打包后的文件名

看到如上输出表示打包成功
Asset表打包后的文件名 Size表打包后的文件大小 Chunks 表示这个打包的分块 Chunk Names表示这个打包的块名称

新建一个world.js

在hello.js上添加引用 require(‘./word.js’)
再次执行打包命令

可以看到两个块
新建style.css文件 在hello.js中用require引入 再次执行打包命令会发现报错

错误提示需要一个loader去加载css文件 即webpack本身不支持.css文件
所以我们需要安装loader

安装css-loader 以及style-loader
同时要给CSS指定想要的loader 即在hello.js中修改require(‘style-loader!css-loader!./style.css’) 即引用style.css之前必须先经过css-loader的处理 这时候执行打包命令将不会出问题
css-loader是使得webpack可以处理css文件
style-loader是将处理后的css文件引到html页面的style标签里

新建一个index.html文件 引入
并在hello.js底部执行hello()函数 重新打包后 在浏览器中打开index.html会弹出hello world即执行hello函数

指定css-loader还可以在命令行中实现
修改require(‘style-loader!css-loader!./style.css’)为require(‘./style.css’)
执行命令

在命令后添加
- -watch 会自动打包 每次修改后不用再次手动打包
- -progress会看到打包过程
- -display-modules看到引用的所有模块
- -display-reasons会显示为什么打包该模块

新建两个文件夹

webpack-demo
配置文件写好 直接运行webpack会自己生成bundle.js

可直接运行webpack 因为在config文件中配置了它的入口文件

如果不叫webpack.config.js就不能直接运行webpack需要配置比如叫webpack.dev.config.js 通过如下命令指定真实的config文件

可以在package.json中指定一系列脚本 “webpack”:”…”

npm run webpack即可运行脚本