webpack学习教程使用的插件记录

  1. html-webpack-plugin

作用:自动快速的帮我们生成HTML

config文件用法:

plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    })
  ]

2. webpack-dev-server

作用:新建一个开发服务器,可以serve我们pack以后的代码,并且当代码更新的时候自动刷新浏览器。

config文件用法:

devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
  },

webpack使用loader的方式来处理各种各样的资源

//样式处理loader
css-loader
style-loader
sass-loader

//图片和其他静态文件的处理loader
url-loader

//添加ES6的支持
babel-loader
babel-preset-es2015

//检测JS规范
jshint-loader

//JQ插件或者古老的库引入
imports-loader

 

 

 

win10安装webpack问题

最近开始接触webpack,用win10来安装出现了环境变量的问题。具体情况如下:运行webpack命令的时候,CMD出现:

Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

搜索一番后发现原来是windows的环境变量没设置好,可能和我用的用户不是超级用户有关系,后面把环境变量补上去,关掉cmd重新打开就可以运行指令了。

pic1

pic2

具体步骤:

解决方法是:

配置环境变量,指定webpack/lib/node/NodeTemplatePlugin的准确路径;

1.右键我的电脑点击属性,弹出以”系统“为标题的窗口;

2.点击左侧高级系统,弹出系统属性窗口;

3.点击环境变量,弹出环境变量窗口;

4.

    4.1如果你的webpack是是用cnpm安装的,则在dos下执行cnpm config get prefix,然后会在界面输出一个路径;我的是F:\Program Files\nodejs

然后在第3步弹出的环境变量窗口中 系统变量里新建变量NODE_PATH,值为:以第4步得到的路径开头,F:\Program Files\nodejs\node_modules;然后一直点击确定;

    4.2如果你的webpack是是用npm安装的,则在dos下执行npm config get prefix;后续步骤同4.1所述;

5.关闭dos窗口,再次打开dos;就好了;

参照这篇文章:webpack问题

npm failed to fetch from registry解决方法:

最近在win10上面安装了webpack,但是出现下面情况:

QQ图片20160326171102

上网找了一下解决方案:

就是把HTTPS改成了HTTP

npm config set registry http://registry.npmjs.org/

原生JS快速获取和更改标签里面的属性值

今天看代码的时候遇到一个原生JS的知识点,下图的

code1  code2

this.id.split('-')[1]

/* 
这里的this是点击那个<button></button>整个对象代码
假设点击了第一个default的<button>
this.id = "switcher-default"
this.id.split('-') = [switcher,default]
this.id.split('-')[1] = "default"
*/

原生javascript扩展知识:

getAttribute:取得属性;
setAttribute:设置属性;

a[0].id
//"header"
a[0].className
//"Xman"
a[0].getAttribute('attrName');
//获取attrName的值,例如 title、style、data-XX等
a[0].setAttribute('attrName','value');
/*
设置attrName的值,在value处输入对应的值,这个value是直接覆盖原来的值,如果你设置了style,如果里面已经有一个样式了,你要加个背景就要在原有的值上加上背景的样式。
例:font-size:16px; 增加背景:font-size:16px; background:#ccccccc;
*/

 

console.log

code3

win7下初探nodejs

 

安装环境:Win7 32/bit

安装包:https://nodejs.org/en/download/

node版本:Windows Installer (.msi) 5.0

 

知识点

1、不要用默认的c:\program Files\ 因为这样在命令行操作要输入的很长中间还有空格,我把安装目录放在 X:\node (x:任意盘符)

2、npm install -g express 最好在cmd 命令行里cd 到相应的 x:\node 目录下执行,命令里面的 -g 是全局global的意思:


npm的包安装分为本地安装(local)、全局安装(global)两种,从敲的命令行来看,差别只是有没有-g而已,比如:
代码如下:复制代码
npm install grunt # 本地安装
npm install -g grunt-cli # 全局安装
下面分别解释。
1. npm install xxx -g 时, 模块将被下载安装到【全局目录】中。
【全局目录】通过 npm config set prefix “目录路径” 来设置。
通过 npm config get prefix 来获取当前设置的目录。
2. npm install xxx ,则是将模块下载到当前命令行所在目录。
例如:
代码如下:复制代码
c:\123>npm install xxx
将会安装到
代码如下:复制代码
c:\123\node_modules\xxx
这种方式显然是不好的,所以一般都会使用全局安装方式统一安装的一个目录中去,这样既方便管理、结构清晰还可以重复利用。


 

3、页面做了修改不用刷新:supervisor app.js 失效,因为node 新版的 npm start 是在 bin/www ,所以直接 supervisor bin/www 就成功了!

QQ图片20151114160328