使用webpack 初始化创建一个demo，并打包的简单过程

1、打开命令行，使用npm包管理工具创建项目，执行npm init 。

2、执行 npm webpack —save-dev。

3、创建js文件，并且require该js文件，

4、执行打包：webpack hello.js hello.bundle.js;

webpack会自动创建hello.bundle.js; 

下面是一个可用的webpack.config.js的模版：

var webpack = require('webpack');//加载webpack依赖包；
var path = require('path');

module.exports = {
    //文件入口并添加热加载；
    entry: ['webpack/hot/dev-server',path.resolve(_dirname,'./development/main.js')],
    output: {
        path: path.resolve(_dirname,'./build'),
        filename: 'bundle.js'  //输出文件
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /(node_modules | bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['es2015','react']
                } //将react编译成js
            },
            {test: /\.less$/,loader: 'style-loader!css-loader!postcss-loader!less-loader'},//打包css
            {test: /\.scss$/,loader: 'style!css!sass?sourceMap'},
            //编译sass文件
            {test: /\.(png | jpg)$/,loader: 'url-loader?limit=8192'}
            //对图片进行打包；

        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    resolve: {
        //自动扩展名文件后缀名
            extensions: ['','.js','.json','.scss','.ts']
    }
}