webpack入门

webpack已经出来很久了，以前就接触过，但是没有系统的学习，现在已经有了webpack2，本文基于webpack1，下面是段webpack的基本代码

//一个常见的Webpack配置文件
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: __dirname + "/app/main.js",
  output: {
    path: __dirname + "/build",
    filename: "[name]-[hash].js"
  },

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')
      }
    ]
  },
  postcss: [
    require('autoprefixer')
  ],

  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + "/app/index.tmpl.html"
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin("[name]-[hash].css")
  ]
}

上面的代码如果你都能看懂，下面就不用看了
现在开始一点一点分析
1：var webpack = require(‘webpack’);
var HtmlWebpackPlugin = require(‘html-webpack-plugin’);
var ExtractTextPlugin = require(‘extract-text-webpack-plugin’);

require(‘http’) 内置模块,引用内置的模块，基于es6和node。webpack从npm中下载下来，配置，本身就自带了很大模块，提供很大方便。
html-webpack-plugin是自带的一个插件，目的是自动生成 HTML 文件。
extract-text-webpack-plugin也是一个插件，该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。
plugin：插件，extract：提取
2：module.exports 导出代码，是node里面的一个写法。
3：entry: __dirname + “/app/main.js”唯一入口文件,
“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录
4: path: __dirname + “/public”,//打包后的文件存放的地方
filename: “bundle.js”//打包后输出文件的文件名
5:module:模块；loader：装货设备
loader就是用来装脚本和工具。
通过使用不同的loader，webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，比如说分析JSON文件并把它转换为JavaScript文件，或者说把下一代的JS文件（ES6，ES7)转换为现代浏览器可以识别的JS文件。其中可以对css进行预处理，对js进行处理，对html，文本，文件等等，想详细了解可以看webpack进阶之loader篇
loader配置：

• test：一个匹配loaders所处理的文件的拓展名的正则表达式（必须）如：test: /.json$/,test: /\.js$/,test: /.css$/, 对json，js，css等拓展名辨识处理
• loader：loader的名称（必须） 如 loader: “json”，loader: ‘babel’，loader: ExtractTextPlugin.extract(‘style’, ‘css?modules!postcss’)
• include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
• query：为loaders提供额外的设置选项（可选）

6：postcss css预处理
postcss: [
require(‘autoprefixer’)
],
调用autoprefixer插件
7： plugins 插件
要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例
new webpack.BannerPlugin(“Copyright Flying Unicorns inc.”)//在这个数组中new一个就可以了

要了解更多webpack入门知识，可以看入门webpack