首先确保你的电脑上安装了node.js （可以使用node -v）查看是否安装
第二步：
全局安装你 font-spider 包：
命令为： sudo npm install font-spider -g （sudo管理员指令，你可以理解为跟高的权限来运行）
第三步：
输入：font-spider -V 确保已经安装完成；
将你要压缩的字体文件 放到一个 font文件夹中 和 css html 平级
你的html文件要引入对应的css文件，且 css 文件要这么写：
第四步：
windows下 为 cmd
Mac 下为 终端
输入： font-spider(敲一个空格)你引用css的html路径
然后 回车！
出现这个图
至此就OK了。
语法：@font-face { font-family : name src : url ( url ) sRules }
取值：
name : 字体名称。任何可能的 font-family 属性的值
url ( url ) : 使用绝对或相对 url 地址指定OpenType字体文件
sRules : 样式表定义
说明：
设置嵌入HTML文档的字体。此规则无默认值。
此规则使你能够在网页上使用客户端本地系统上可能没有的字体。 url 地址必须指向 OpenType 字体文件(.eot或.ote)。此文件包含可以转换为 TrueType 字体的压缩字体数据，可以用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。此文件可以使用 Microsoft WEFT 工具制作。
这样，我们需要微软的WEFT工具来完成。
Microsoft WEFT 工具说明页
http://www.microsoft.com/typography/web/embedding/weft3/
Microsoft WEFT 工具下载地址(点击下载)
http://download.microsoft.com/download/8/a/1/8a1be03f-f7fc-4504-af9a-7b9230775284/WEFTIII2b1.exe
字体嵌入演示
http://www.microsoft.com/typography/web/embedding/demos/10/demo10.htm
使用教程(E文)
http://www.microsoft.com/typography/web/embedding/weft3/tutorial.aspx
简单说明一下： 先新建一个htm空文档，然后打开WEFT，根据向导，添加刚才新建的htm文件
然后下一步，会提示程序将分析系统字体，此时不要勾选skip analysis，继续下一步，等程序扫描完毕，出现一个对话框，此时先不着急下一步，点"Add"按钮，选择一个需要制作的字体，只有TrueType的字体可以被制作，选好后下一步。 接着选择，生成的ETO字体文件的保存位置 下面这个选框比较重要，第一次就是因为没弄清楚，导致无效。这里要输入字体允许被使用在哪些站点内。这个地方建议输入两个域名，一个是：http://127.0.0.1，做为本机测试用，另一个是自己的站点的地址，如：http://www.imagecode.net，设置好后，再下一步直到完成。 这样还不算完，找到生成好的EOT文件，放在网站目录里，在需要使用这个字体的页面里，按照下面的方法操作。
<HTML>
<HEAD>
<TITLE>Test Page</TITLE>
<STYLE TYPE="text/css">
<!--
@font-face {
font-family: myfont
font-style: normal
src: url(ARIAL0.eot)}
-->
</STYLE>
</HEAD>
<BODY>
<FONT FACE="myfont">测试文字</FONT>
</BODY>
</HTML> 最后要注意的是在@font-face的时候，font-family最好自己定义一个字体名称，不要跟本机的字体名称一致。否则在<font face='myfont'>的时候，如果EOT字体加载失败，有可能会使用系统字体来显示，这样自己就无法判断是否CSS字体加载成功。其实，字体是否加载成功，在安装了WEFT后，会自动弹出提示。
我们可以在js中引入样式文件require('myStyle.css')
这时我们便需要引入相应的webpack loader来帮助我们解析这段代码。
一般来说需要引入css-loader和style-loader，其中css-loader用于解析，而style-loader则将解析后的样式嵌入js代码。
// webpack配置如下
{
module: {
loaders: [
{ test: /\.$/, loader: "style-loader!css-loader" }
]
}
}
可以发现，webpack的loader的配置是从右往左的，从上面代码看的话，就是先使用css-loader之后使用style-loader。
同理，如果你使用less来写样式的话，则需要先用less-loader来编译样式文件为css文件，再继续使用css-loader与style-loader。
{
module: {
loaders: [
{ test: /\.$/, loader: "style-loader!css-loader!less-loader" }
]
}
}
我们知道，webpack配置loader时是可以不写loader的后缀明-loader，因此css-loader可以写为css。
将样式抽取出来为独立的文件
将require引入的样式嵌入js文件中，有好处也有坏处。好处是减少了请求数，坏处也很明显，就是当你的样式文件很大时，造成编译的js文件也很大。
我们可以使用插件的方式，将样式抽取成独立的文件。使用的插件就是extract-text-webpack-plugin
基本用法如下
var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
]
},
plugins: [
new ExtractTextPlugin("styles.css")
]
}
根据插件在github上的解释，ExtractTextPlugin.extract可以有三个参数。
第一个参数是可选参数，传入一个loader，当css样式没有被抽取的时候可以使用该loader。
第二个参数则是用于编译解析的css文件loader，很明显这个是必须传入的，就像上述例子的css-loader。
第三个参数是一些额外的备选项，貌似目前只有传入publicPath，用于当前loader的路径。
那什么时候需要传入第一个参数呢，那就得明白什么时候样式不会被抽取出来。
了解过code splittiog的同学便会知道，我们有些代码在加载页面的时候不会被使用时，使用code splitting，可以实现将这部分不会使用的代码分离出去，独立成一个单独的文件，实现按需加载。
那么如果在这些分离出去的代码中如果有使用require引入样式文件，那么使用ExtractTextPlugin这部分样式代码是不会被抽取出来的。
这部分不会抽取出来的代码，可以使用loader做一些处理，这就是ExtractTextPlugin.extract第一个参数的作用。
根据上面的案例，ExtractTextPlugin需要配合plugin使用。
new ExtractTextPlugin([id: string], filename: string, [options])
该插件实例的唯一标志，一般是不会传的，其自己会生成。
文件名。可以是[name]、[id]、[contenthash]
[name]：将会和entry中的chunk的名字一致
[id]：将会和entry中的chunk的id一致
[contenthash]：根据内容生成hash值
options
allchunk： 是否将所有额外的chunk都压缩成一个文件
disable：禁止使用插件
这里的参数filename里如何理解呢看上述案例指定了一个固定的名字，因此便会生成一个styles.css文件。
那么像[name]、[id]这些如何理解。这个在你有多个entry的时候，便需要使用这种方式来命名。
var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
entry: {
"script": "./src/entry.js",
"bundle": "./src/entry2.js",
},
...
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
]
},
plugins: [
new ExtractTextPlugin("[name].css")
]
}
这时候便会生成两个css文件，一个是script.css，另一个便是bundle.css。那些[id]、[contenthash]也是一个道理。
只要明白，在你有多个entry是，一定要使用这种方式来命名css文件。
最后还有那个allchunks又是什么呢看很简单，还记得前面提到的code splitting么看将该参数配置为true，那么所有分离文件的样式也会全部压缩到一个文件上。
plugins: [
new ExtractTextPlugin("[name].css", {allChunks: true})
]
postcss
以前我们写样式时，有些样式不同浏览器需要加不同的前缀，如-webkit-。现在有了构建工具，我们便不需要再去关注这些前缀了，构建工具会自动帮我们加上这些前缀。
对于webpack我们自然想到需要使用loader或者plugin来帮助我们做这些事情，查了下发现autoprefixer-loader已经废弃不再维护了，推荐使用posscss
postcss是用于在js中转换css样式的js插件，需要搭配其他插件一起使用，这点和babel6一样，本身只是个转换器，并不提供代码解析功能。
这里我们需要autoprefixer插件来为我们的样式添加前缀。首先下载该模块。
npm install autoprefixer --save-dev
接着便可以配置webpack了
var autoprefixer = require('autoprefixer')
module.exports = {
...
module: {
loaders: [
...
{
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(["css-loader", "postcss-loader"])
},
}
]
},
postcss: [autoprefixer()],
...
}
查看一下抽取出来的样式文件便可以发现已经加上了前缀
a {
display: flex
}
/*compiles to:*/
a {
display: -webkit-box
display: -webkit-flex
display: -ms-flexbox
display: flex
}
另外autoprefixer还可以根据目标浏览器版本生成不同的前缀个数，例如你的应用的使用用户如果大多数是使用比较新版本的浏览器，那么便可以做如下配置。
postcss: [autoprefixer({ browsers: ['last 2 versions'] })]
这是生成的样式便会有些不一样，还是上面的例子
a {
display: flex
}
/*compiles to:*/
a {
display: -webkit-flex
display: -ms-flexbox
display: flex
}
postcss后记
这里再说一个问题，有些童鞋可能会在css文件中使用@import引入其他样式文件，但是使用autoprefixer发现，import进来的样式没有处理，如下面所示：
/*myStyle.css:*/
body {
background-color: gray
}
.flex {
display: flex
}
/*myStyle2.css:*/
@import "./myStyle.css"
.div {
color: red
}
/*autoprefixer之后*/
body {
background-color: gray
}
.flex {
display: -webkit-box
display: -webkit-flex
display: -ms-flexbox
display: flex
}
body {
background-color: gray
}
.flex {
display: flex
}
.div {
color: red
}
要解决这个问题，postcss有个解释，它让我们使用postcss-import插件，再配合autoprefixer
postcss: function(webpack) {
return [
postcssImport({
addDependencyTo: webpack
}),
autoprefixer
]
},
其实我们是不推荐使用@import的，心细的童鞋可以看到最后生成的样式文件有样式是重复的。
所以一般我们应该是在js中使用require来引入样式文件。可以参考的说法这里
样式压缩
压缩代码我们可以使用webpack的内置插件UglifyJsPlugin来做，它既可以压缩js代码也可以压缩css代码。
plugins: [
...
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
...
]
其实并不能说是在压缩css代码，本质来说还是压缩js代码，再将这块代码输出到css文件中。
使用CommonsChunkPlugin抽取公共代码
首先要明确一点CommonsChunkPlugin是在有多个entry时使用的，即在有多个入口文件时，这些入口文件可能会有一些共同的代码，我们便可以将这些共同的代码抽取出来成独立的文件。明白这一点非常重要。（搞了很久才明白的一点，唉～～～～）
如果在多个entry中require了相同的css文件，我们便可以使用CommonsChunkPlugin来将这些共同的样式文件抽取出来为独立的样式文件。
module.exports = {
entry: {
"A": "./src/entry.js",
"B": "./src/entry2.js"
},
...
plugins: [
new webpack.optimize.CommonsChunkPlugin({name: "commons", filename: "commons.js"}),
...
]
}
当然，这里不止会抽取共同的css，如果有共同的js代码，也会抽取成为commons.js。
这里有个有趣的现象，抽取出来的css文件的命名将会是参数中name的值，而js文件名则会是filename的值。
CommonsChunkPlugin好像只会将所有chunk中都共有的模块抽取出来，如果存在如下的依赖
// entry1.js
var style1 = require('./style/myStyle.css')
var style2 = require('./style/style.css')
// entry2.js
require("./style/myStyle.css")
require("./style/myStyle2.css")
// entry3.js
require("./style/myStyle2.css")
使用插件后会发现，根本没有生成commons.css文件。
如果我们只需要取前两个chunk的共同代码，我们可以这么做
module.exports = {
entry: {
"A": "./src/entry.js",
"B": "./src/entry2.js",
"C": "./src/entry3.js"
},
...
plugins: [
new webpack.optimize.CommonsChunkPlugin({name: "commons", filename: "commons.js", chunks: ['A', 'B']}),
...
]
}
