Gowhich

webpack分离css单独打包

发表于 2025-07-01 分类于技术

这个操作很简单的，只需要一个插件就好了，就是extract-text-webpack-plugin

1，安装extract-text-webpack-plugin

1	cnpm install extract-text-webpack-plugin --save-dev

2,配置文件添加对应配置

首先require一下

1	var ExtractTextPlugin = require("extract-text-webpack-plugin");

plugins里面添加

1	new ExtractTextPlugin("styles.css"),

我这里如下：

plugins: [
  new webpack.optimize.CommonsChunkPlugin('common.js'),
  new ExtractTextPlugin("styles.css"),
],

modules里面对css的处理修改为

1	{test:/\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},

千万不要重复了，不然会不起作用的

我这里如下：

module: {
  loaders: [
    {test:/\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
    {test: /\.scss$/, loader: "style!css!sass"},
    {test: /\.less$/, loader: "style!css!less"},
  ]
},

3，在引入文件里面添加需要的css，【举例如下】

1
2
3

require('../less/app.less');
require('./bower_components/bootstrap-select/dist/css/bootstrap-select.min.css');
require('./bower_components/fancybox/source/jquery.fancybox.css');

Webpack 打包jsx文件配置

发表于 2025-07-01 分类于技术

打包jsx文件，为了使得此文件可以直接被打包，并且在应用的时候不加入后缀，需要做以下几个步骤：

1，安装jsx-loader

1	$ npm install --save-dev jsx-loader

2，配置

module: {
  loaders: [
    {
      //tell webpack to use jsx-loader for all *.jsx files
      test: /\.jsx$/,
      loader: 'jsx-loader?insertPragma=React.DOM&harmony'
    }
  ]
},

3，扩展设置

1
2
3

resolve: {
  extensions: ['', '.js', '.jsx']
}

Webpack-dev-server 配置

发表于 2025-07-01 分类于技术

1，安装需要的包

1	npm install --save-dev webpack webpack-dev-server

2，配置添加

output: {
  filename: 'bundle.js', //this is the default name, so you can skip it
  //at this directory our bundle file will be available
  //make sure port 8090 is used when launching webpack-dev-server
  publicPath: 'http://localhost:8090/assets' //重点在这里
},

3，安装 http-server

1	npm install --save-dev http-server

4，页面添加启动脚本

<!DOCTYPE html>
<html>
<head>
    <title>Basic Property Grid</title>
    <!-- include react -->
    <script src="./node_modules/react/dist/react-with-addons.js"></script>
</head>
<body>
    <div id="content">
        <!-- this is where the root react component will get rendered -->
    </div>
    <!-- include the webpack-dev-server script so our scripts get reloaded when we make a change -->
    <!-- we'll run the webpack dev server on port 8090, so make sure it is correct -->
    <script src="http://localhost:8090/webpack-dev-server.js"></script>
    <!-- include the bundle that contains all our scripts, produced by webpack -->
    <!-- the bundle is served by the webpack-dev-server, so serve it also from localhost:8090 -->
    <script type="text/javascript" src="http://localhost:8090/assets/bundle.js"></script>
</body>
</html>

NPM package Configure Prepare run scripts[配置执行脚本]

发表于 2025-07-01 分类于技术

The final thing is to add three scripts entries into our package.json:

{
  "scripts": {
    "start": "npm run serve | npm run dev",
    "serve": "./node_modules/.bin/http-server -p 8080",
    "dev": "webpack-dev-server --progress --colors --port 8090"
  },
  "name": "basic-property-grid",
  "version": "0.1.0",
  "main": "index.js",
  "dependencies": {
    "react": "~0.11.2"
  },
  "devDependencies": {
    "webpack": "~1.4.4",
    "webpack-dev-server": "~1.6.5",
    "jsx-loader": "~0.11.2",
    "http-server": "~0.7.1"
  }
}

What we just did was to add 3 commands that can be run through npm run .

serve - npm run serve - just starts an http-server serving files from our local dir, running on port 8080 (it serves index.html).

dev - npm run dev - starts webpack-dev-server on port 8090 which serves both the webpack-dev-server.js runtime and our bundle.js file.

start - npm run start - command simply executes serve first and then starts the dev server.

Launch【运行】

Now we are ready:

1	$ npm run start

If everything is fine, you should open localhost:8080

使用webpack

首先新建一个app的项目,在项目下面执行如下代码：

1	$ npm init // 用于初始化项目的package.json

//初始化文件目录：

app
    --- css
        --- main.scss
    --- js
        --- index.js
        --- a.js
        --- b.js
        --- c.js
        --- es6_module.js
    --- index.html
    --- package.json
    --- webpack.config.js

安装webpack

我们通过npm来将webpack安装到全局

1	$ npm install webpack -g

webpack配置

webpack是需要进行配置的，我们在使用webpack的时候，会默认webpack.config.js为我们的配置文件。所以接下来，我们新建这个js文件。

// webpack.config.js
var path = require("path");
module.exports = {
    entry: './js/index.js', //演示单入口文件
    output: {
        path: path.join(__dirname, 'js/out'),  //打包输出的路径
        filename: 'bundle.js',              //打包后的名字
        publicPath: "/js/out/"              //html引用路径，在这里是本地地址。
    }
};

编写入口文件

接下来就编写我们的入口文件index.js和第一个模块文件a.js。我们一切从简，里面只用来加载一个Js模块。

// index.js
require("./a"); // 使用CommonJs来加载模块
// a.js
console.log("Hello Webpack!");

启动webpack

一切准备好后，我们仅需要在项目根目录下，用命令行webpack执行一下即可。

// webpack 命令行的几种基本命令

$ webpack // 最基本的启动webpack方法
$ webpack -w // 提供watch方法，实时进行打包更新
$ webpack -p // 对打包后的文件进行压缩，提供production
$ webpack -d // 提供source map，方便调试。

webpack成功运行后，我们就可以看到根目录出现了out文件夹，里面有我们打包生成的bundle.js。我们最后通过在index.html里对这个文件引入就可以了。我们可以在控制台看到我们想要的结果，Hello Webpack !

多模块依赖

刚才的例子，我们仅仅是跑通了webpack通过index.js入口文件进行打包的例子。下面我们就来看一下它是否真的支持CommonJs和AMD两种模块机制呢？下面我们新建多几个js文件吧！

// 修改module1.js
require(["./a"], function(){
  console.log("Hello Webpack!");
});
// b.js，使用的是CommonJs机制导出包
module.exports = function(a, b){
  return a + b;
}
// a.js，使用AMD模块机制
define(['./b.js'], function(sum){
  return console.log("1 + 2 = " + sum(1, 2));
})

其实像上面这样混用两种不同机制非常不好，这里仅仅是展示用的，在开发新项目时还是推荐CommonJs或ES2015的Module。当然我个人更倾向于ES2015的模块机制的～

loader加载器

到了我最喜欢也是最激动人心的功能了！我们先想想应用场景，前端社区有许多预处理器供我们使用。我们可以使用这些预处理器做一些强大的事情，大家都听过的就是CoffeeScript和Sass了。我们以前要编译这些预处理器，就是用gulp进行编译。但是我们对这些文件处理其实也挺繁琐的，webpack可以一次性解决！

在这里我们用Sass和babel编译ES2015为例子，看一下loader是如何使用的。

安装loader

我们第一步就是先要安装好各个必须的loader，我们直接看看需要通过npm安装什么。

1	$ npm install style-loader css-loader url-loader babel-loader sass-loader file-loader --save-dev

配置loader

安装完各个loader后，我们就需要配置一下我们的webpack.config.js，载入我们的loader。

// webpack.config.js
module.exports = {
    entry: path.join(__dirname, 'js/index.js'),
    output: {
        path: path.join(__dirname, 'js/out'),
        publicPath: "/js/out/",
        filename: 'bundle.js'
    },
    // 新添加的module属性
    module: {
        loaders: [
            {test: /\.js$/, loader: "babel"},
            {test: /\.css$/, loader: "style!css"},
            {test: /\.(jpg|png)$/, loader: "url?limit=8192"},
            {test: /\.scss$/, loader: "style!css!sass"}
        ]
    }
};

我们主要看看module的loaders。loaders是一个数组，里面的每一个对象都用正则表达式，对应着一种配对方案。比如匹配到js后缀名就用babel-loader，匹配到scss后缀名的就先用sass，再用css，最后用style处理，不同的处理器通过!分隔并串联起来。这里的loader是可以省略掉-loader这样的，也就是原本应该写成style-loader!css-loader!sass-loader，当然我们必须惜字如金，所以都去掉后面的东东。

我们仅仅是配置一下，已经是可以直接用ES2015和SASS去写我们的前端代码了。在此之前，我们对js文件夹里再细分成js，css，image三个文件夹，处理好分层。话不多说，赶紧试试。

稍微复杂的webpack项目

babel-loader

// js/es6-module.js
class People{
    constructor(name){
        this.name = name;
    }
    sayHi(){
        console.log(`hi ${this.name} !`);
    }
}
module.exports = People;

写好模块后，我们直接在index.js入口文件中引入该模块。

// index.js
// javascript
require('./a');
let People = require('./es6-module');
let p = new People("Yika");
p.sayHi();
// css
require('./css/main.scss');

哈哈哈，不能再爽！这下子我们可以使用很多优秀的ES6特性去构建大型的web了。

sass-loader

大家或许注意到了下方的css的require，那就是用来加载Sass样式的。我们通过启动style-loader会将css代码转化到<style>标签内，我们看一下里面的内容。

// css/main.scss
html, body{
    background: #dfdfdf;
}

最后我们打开index.html观察我们所有的结果，首先背景已经是淡灰色的，并且控制台也有我们想要的内容。我们通过查看DOM结构，可以发现head标签里多出了style标签，里面正是我们想要定制的样式。

关于对图片的打包

我们之前也说，webpack对与静态资源来说，也是看作模块来加载的。CSS我们是已经看过了，那图片是怎么作为模块打包加载进来呢？这里我们可以想到，图片我们是用url-loader加载的。我们在css文件里的url属性，其实就是一种封装处理过require操作。当然我们还有一种方式就是直接对元素的src属性进行require赋值。

div.img{
    background: url(../image/xxx.jpg)
}
//或者
var img = document.createElement("img");
img.src = require("../image/xxx.jpg");
document.body.appendChild(img);

上述两种方法都会对符合要求的图片进行处理。而要求就是在url-loader后面通过query参数的方式实现的，这里就是说只有不大于8kb的图片才会打包处理成Base64的图片。关于query，请看文档：Query parameters

1	{test: /\.(jpg\|png)$/, loader: "url?limit=8192"}

打包成多个资源文件

我们在开发多页面的站点的时候，还是需要希望能有多个资源文件的。这样我们就可以有效利用缓存提升性能，做到文件按需加载。如何写入口文件，这里就不再赘述了，我们直接看如何对webpack.config.js进行修改。

// webpack.config.js
entry: {
    page1: "index.js",
    page2: "index2.js"
},
output: {
    path: path.join(__dirname, 'js/out'),
    publicPath: "/js/out/",
    filename: '[name].js'
}

这里重点关注两个地方，entry属性可以是一个对象，而对象名也就是key会作为下面output的filename属性的[name]。当然entry也可以是一个数组，更多用法都可以去webpack的官方文档进行查看。

当然webpack也考虑到公共模块的利用，我们利用插件就可以智能提取公共部分，以提供我们浏览器的缓存复用。我们只需要在webpack.config.js添加下面的代码即可。

// 修改添加，webpack.config.js
var webpack = require('webpack');
module.exports = {
    // ....省略各种代码
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('common.js')
    ]
}

我们做个小测试，让第二个入口文件也加载我们之前的es6-module.js。然后我们用webpack进行打包，就发现生成的common.js里是有相应代码的。我们需要手动在html上去加载common.js，并且是必须要最先加载。

独立出css样式

如果我们希望样式通过<link>引入，而不是放在<style>标签内呢，即使这样做会多一个请求。这个时候我们就要配合插件一起使用啦，我们一起来看看。

1	$ npm install extract-text-webpack-plugin --save-dev

安装完插件就要配置webpack.config.js了。我们添加以下代码

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    // ...省略各种代码
    module: {
        loaders: [
            {test: /\.js$/, loader: "babel"},
            {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
            {test: /\.(jpg|png|svg)$/, loader: "url?limit=8192"},
            {test: /\.scss$/, loader: "style!css!sass"}
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('common.js'),
        new ExtractTextPlugin("[name].css")
    ]
}

为了区分开用<link>链接和用<style>，我们这里以CSS后缀结尾的模块用插件。我们重点关注一下使用了ExtractTextPlugin的模块，在ExtractTextPlugin的extract方法有两个参数，第一个参数是经过编译后通过style-loader单独提取出文件来，而第二个参数就是用来编译代码的loader。

记得运行webpack --config webpack.config.js进行打包

然后在index.html里面引用打包文件，如；

1	<script src="js/out/bundle.js"></script>

如果需要common.js的话，在前面也要加上这个文件，最后js的调用顺序如下：

1 2	<script src="js/out/common.js"></script> <script src="js/out/bundle.js"></script>

Linux 删除文件后，如何释放磁盘空间

发表于 2025-07-01 分类于技术

关于磁盘空间会有一个问题就是磁盘空间满了，但是删除对应的文件后【你删除的没有错误】，通过

1	du -h --max-depth=1

查看后

16K    ./lost+found
26M    ./test.zhidetou.net
88K    ./spider
62M    ./mocker.qeeniao.com
4.6M    ./www.zhidetou.net
12G    ./elasticsearch
12G    .

这里显示是12G啦，总磁盘大小是20G，也应该是60%
发现文件是减少了，但是df -h 发现还是没有减少。

Filesystem      Size  Used Avail Use% Mounted on
/dev/xvda1       20G   11G  8.1G  57% /
tmpfs           1.9G     0  1.9G   0% /dev/shm
/dev/xvdb1       20G   15G  3.7G  81% /data

仍然是81%
原因就是因为某个程序还在占用此文件，文件句柄没有释放，所以即使你rm -rf磁盘空间也不会被释放。
解决办法就是找到使用这个文件的进程，然后重启或者是直接kill掉后，再重启对应进程。

国内速度较快的CDN

发表于 2025-07-01 分类于技术

又拍云：

http://jscdn.upai.com/

（支持https）

JSCN：

http://www.cdnjs.cn/

（支持https）维护者(Sofish/hfcorriez/ikbear@qiniu)

中科大库：

https://servers.ustclug.org/2014/07/ustc-blog-force-google-fonts-proxy/

[支持https，完全GoogleAPIs镜像] 维护者（LUG@ustc）

Mocha的时间戳转换日期正确用法

发表于 2025-07-01 分类于技术

var date = '2015-09-10';
debug('date :',date);
var starttime = moment(Date.parse(date)).second(0).minute(0).hour(0).format('X');
var endtime = moment(Date.parse(date)).add(1,'day').second(0).minute(0).hour(0).format('X');
debug('starttime :',starttime);
debug('endtime :',endtime);
debug('starttime :',moment.unix(starttime).format('YYYY-MM-DD HH:mm:ss'));
debug('endtime :',moment.unix(endtime).format('YYYY-MM-DD HH:mm:ss'));

如果是日期字符串，请先用Date.parse(date)进行parse下。

如果是时间戳，请直接使用moment.unix()进行操作

2015-09-10 工作记录

发表于 2025-07-01 分类于技术

1、查看innodb死锁情况

查看事务情况

1	show engine innodb status\G

查看事务详情

1	SELECT * FROM information_schema.INNODB_TRX\G

2、kibana 4 添加图表，以及如何在dashboard【仪表板】上展示所有的图表或者分开展示图表

添加图表的流程一定要清楚，先要有visualization【可视化视图】，然后才能在dashboard【仪表板】上面添加图表，事实上图表就是所谓的

visualization【可视化视图】；

这里的操作关键比较难的是如何添加visualization【可视化视图】，并且在添加visualization【可视化视图】过程中的Filter的操作。

Filter说起来也很简单就是搜索出你要展示的数据数量的值，比如访问链接地址的时长，某个链接的请求次数的值。

关键是在添加visualization【可视化视图】过程中，先要选择视图的类型，然后就要对metrics和buckets的操作。

这里有一篇关于kibana4的图表入门：请点击这里

3、curl 指定用户以及密码访问

很简单：

1	curl -u user:password -XGET http://www.xxx.net/study/

就可以了.

4、通过python的线程实现异步发送邮件

from threading import Thread
def send_async_email(app, msg):
    with app.app_context():
        mail.send(msg)
def send_email(to, subject, template, **kwargs):
    msg = Message(app.config['FLASKY_MAIL_SUBJECT_PREFIX'] + subject,
                  sender=app.config['FLASKY_MAIL_SENDER'], recipients=[to])
    msg.body = render_template(template + '.txt', **kwargs)
    msg.html = render_template(template + '.html', **kwargs)
    thr = Thread(target=send_async_email, args=[app, msg])
    thr.start()
    return thr

5、针对Flask项目初始化数据库

>>> from walkerfree import config
>>> from walkerfree import app
>>> app.config.from_object(config['development'])
>>> from walkerfree import db
>>> db.init_app(app)
>>> db
<SQLAlchemy engine='mysql+mysqldb://root:@127.0.0.1/walkerfree?charset=utf8'>
>>> db.create_all()

Gowhich

webpack分离css单独打包

Webpack 打包jsx文件配置

Webpack-dev-server 配置

Webpack highcharts 打包处理

NPM package Configure Prepare run scripts[配置执行脚本]

Webpack 打包基础测试

使用webpack

安装webpack

webpack配置

编写入口文件

启动webpack

多模块依赖

loader加载器

安装loader

配置loader

稍微复杂的webpack项目

babel-loader

sass-loader

关于对图片的打包

打包成多个资源文件

独立出css样式

Linux 删除文件后，如何释放磁盘空间

国内速度较快的CDN

Mocha的时间戳转换日期正确用法

2015-09-10 工作记录