webpack详解。

首先webpack是一个模块管理工具。

  特性：

           1.它同时支持common.js和AMD规范。

           2、它可以打成一个完整的包，也可以分成多个部分，在运行时异步加载（可以减少第一次加载的时间）

  

var webpack = require('webpack');
module.exports = {
    entry: [
        'webpack/hot/only-dev-server',
        './js/app.js'
    ],
    output: {
        path: './build',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
        { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude:     /node_modules/ },
        { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
        { test: /\.css$/, loader: "style!css" },
        {test: /\.less/,loader: 'style-loader!css-loader!less-loader'}
        ]
    },
    resolve:{
        extensions:['','.js','.json']
    },
    plugins: [
        new webpack.NoErrorsPlugin()
    ]
};

1、entry  可以是字符串或者数组或者是对象

   当entry是字符串的时候，用来定义入口文件

   entry:'/.js/main.js'

   当entry是个数组的时候，里面同样包含入口js文件，另一个参数可以是用来配置webpack提供的一个静态资源服务器，webpack-dev-server。webpack-dev-server会监控项目中每一个文件的变化，实时的进行构建，并且自动刷新页面：

   entry:[

         'webpack/hot/only-dev/server',

         './js/app.js'

    ]

   当entry是个对象的时候，我们可以将不同的文件构成不同的文件，按需使用，比如在我的hello页面中只要<script src='build/Profile.js'></script>引入hello.js即可。

entry:{

     hello:'./js/hello.js',

     form:'./js/form.js'

}

2、output   参数是个对象  用于 定义构建后的文件的输出，其中包含path和filename

  output:{

     path:'./build',

     filename:'bundle.js'

}

当我们在entry中定义构建多个文件的时候，filename可以对应的更改为[name].js用于定义不同文件构建后的文字。

3、module  关于模块的加载相关，我们就定义在module.loaders