Webpack 对icon和图片的处理

对图片的处理

安装相应组件（loader)

$ npm install url-loader@0.5.8 --save-dev

npm WARN url-loader@0.5.8 requires a peer of file-loader@* but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ url-loader@0.5.8
added 3 packages from 3 contributors and audited 1906 packages in 15.682s
found 1 moderate severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

$ npm install file-loader@0.11.1 --save-dev

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ file-loader@0.11.1
added 2 packages from 1 contributor and audited 1911 packages in 16.682s
found 1 moderate severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

修改配置文件

webpack.config.js中添加图中所示这一句：

webpack.config.js:

var webpack = require('webpack');
var Ex      = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
//获取html-webpack-plugin参数的方法
var getHtmlConfig = function(name){
    return {
        template    : './src/view/'+name +'.html',
        filename    : 'view/' + name + '.html',
        inject      : true,
        hash        : true,
        chunks      : ['common',name]
    };
};
//webpack config
var config = {
    entry: {
        "common":['./src/page/common/index.js'],
        "index":['./src/page/index/index.js'],
        "login":['./src/page/login/index.js']
    },
    output: {
        path: './dist',
        filename: 'js/[name].js'
    },
    externals: {
        'jquery':'window.jQuery'
    },
    module: {
        loaders: [
          { test: /\.css$/,loader:Ex.extract('style-loader', 'css-loader')  },
          { test: /\.(gif|png|jpg)\??.*$/,loader:'url-loader?limit=100&name=resource/[name].[ext]'  }
          
        ]
    },
    plugins: [
        //独立通用模块到js/base.js
        new webpack.optimize.CommonsChunkPlugin({
            name : 'common',
            filename : 'js/base.js'
        }),
        //把css单独打包到文件里
        new Ex("css/[name].css"),
        //html模板的处理
        new HtmlWebpackPlugin(getHtmlConfig('index')),
        new HtmlWebpackPlugin(getHtmlConfig('login')),
    ]

};
module.exports = config;

对字体的处理

把上文配置文件中关于module的部分改为：

module: {
        loaders: [
          { test: /\.css$/,loader:Ex.extract('style-loader', 'css-loader')  },
          { test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/,loader:'url-loader?limit=100&name=resource/[name].[ext]'  }
          
        ]
    },