Webpack的简单使用

一般的一个webpack的配置文件（webpack.config.js）：

// 首先载入要使用到的模块，插件
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
        entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
        output: {       //输出的位置
            path: __dirname + "/build",  // 文件路径
            filename: "bundle-[hash].js"  //文件的名字，后面的hash是作为一个缓存hash加密
        },
        devtool: 'none',   //调试工具
        devServer: {       //启用开发服务器？
            contentBase: "./public", //本地服务器所加载的页面所在的目录
            historyApiFallback: true, //设置为不跳转
            inline: true,   // 不懂，反正true就行
            hot: true       // 不懂，反正true就行
        },
        module: {         //模块开始
            rules: [{      //js打包的规则开始
                    test: /(\.jsx|\.js)$/,   //js文件的打包规则
                    use: {                     //使用babel进行打包，babel可以将es6的语法转换为es5
                        loader: "babel-loader"   // 设置js的loader
                    },
                    exclude: /node_modules/  //模块的位置
                }, {                    //样式文件打包规则的开始
                    test: /\.css$/,    //设置为CSS样式的打包
                    use: ExtractTextPlugin.extract({    //ExtractTextPlugin插件功能扩展,可将CSS与JS分离
                        fallback: "style-loader",       //默认采用 css-loader进行编译，若css-loader编译失败，则采用css-loader编译
                        use: [{
                            loader: "css-loader",
                            options: {
                                modules: true,
                                localIdentName: '[name]__[local]--[hash:base64:5]'    //最后生成的文件名样式
                            }
                        }, {
                            loader: "postcss-loader"      //设置另一个loader为postcss-loader，postcss-loader可以将浏览器不支持的先进CSS转化为浏览器支持的CSS
                        }],
                    })
                }
            }
        ]
    },
  // 插件的配置：
    plugins: [  
        new webpack.BannerPlugin('以下为插入的内容'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),    //为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
        new webpack.optimize.UglifyJsPlugin(),  //启用这个插件可以压缩js代码
        new ExtractTextPlugin("style.css")      // 分离JS代码和CSS文件
    ]
};