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文件内容被压缩，好酷