webpack初试

接触webpack其实已经好久了，可是真正去研究它仍是第一次，因此记录一下本身的学习体验：

webpack的主要功能是：Webpack 是一个前端资源加载/打包工具，只须要相对简单的配置就能够提供前端工程化须要的各类功能，而且若是有须要它还能够被整合到其余好比 Grunt / Gulp 的工做流。

使用步骤：
（1）首先安装webpack
  npm install -g webpack
(2)配置webpack的配置文件，示例以下：
var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: ['./src/index'],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      },
    })
  ],
  module: {
    loaders: [{
      test: /\.css$/,
      loaders: ['style', 'css']
    },
    {
        test: /\.(png|jpg)$/,
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
    }]
  }
}
这里的配置文件主要包含几个关键的配置项

（1）plugins:声明一些插件项
（2）entry：表示页面入口文件的配置
（3）output：入口文件输出配置
（4）loaders：加载器配置
（5）resolve： 其余解决方案配置

使用示例：能够参考这篇博文https://github.com/wangning0/Autumn_Ning_Blog/blob/master/blogs/3-12/webpack.md

在按照他的步骤走的时候，我也遇到了一些坑，好比npm install style-loader css-loader image-webpack-loader webpack --save-dev
这里，我只能一个一个进行install，而不是一块儿install，不然会出错。还有一个问题就是，首先你得npm init，初始化package.json文件，并填写一些必要的配置项。可是遇到一点问题
在安装webpack的时候提示以下错误：

而后仔细看了一下package.json中的配置，发现name配置项写的就是webpack

而后将name改成其余值以后，就可使用了，在dist目录下生成了以MD5命名的文件，而且相应的js文件内容被压缩，好酷