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文件內容被壓縮，好酷