webpack初试

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/sunshinewyf/blog/715066