### 目录结构如下：
demo                                        # 工程名
|   |--- dist                               # 打包后生成的目录文件
|   |--- node_modules                       # 所有的依赖包
|   |--- src                                # 项目的文件包
|   |    |--- common
|   |    |     |---css                      # 公用页面的css文件
|   |    |     |---js                       # 公用页面的js文件
|   |---
|   |--- .babelrc                           # 支持es6
|   |--- .gitignore
|   |--- README.md
|   |--- index.html                         # 首页入口文件
|   |--- package.json
|   |--- webpack.config.js                  # 配置文件
|   |--- webpack.production.config.js       # 上线打包配置文件

// 导入路径包
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {//开启sourceMap便于调试devtool: 'eval-source-map', //入口文件，entry: './src/main.js', output: {// 输出文件到当前目录下的 build文件夹内path: path.resolve(__dirname, 'build'), publicPath: '/assets/', //指定资源文件引用的目录
filename: 'bundle.js' // 指定打包为一个文件 bundle.js// filename: '[name].js' // 可以打包为多个文件
},// 使用loader模块
    module: {/* * 在webpack2.0版本已经将 module.loaders 改为 module.rules, 当然module.loaders也是支持的。* 同时链式loader(用!连接)只适用于module.loader，同时-loader不可省略 */rules: [{test: /\.css$/,use: ['style-loader', {loader: 'css-loader',options: {// modules: true // 设置css模块化,详情参考 https://github.com/css-modules/css-modules
                }}, {loader: 'postcss-loader',// 参考 https://github.com/postcss/postcss-loader
                options: {plugins: function() {return [require('autoprefixer')];}}}]}, {test: /\.styl(us)?$/,use: ['style-loader', 'css-loader', {loader: "postcss-loader",options: {plugins: function() {return [require('autoprefixer')];}}}, 'stylus-loader']}, {test: /\.js$/,loader: 'babel-loader', exclude: /node_modules/ //需要排除的目录
          }]},// 配置devServer各种参数
    devServer: {// contentBase: "./",   // 本地服务器所加载的页面所在的目录hot: true,              // 配置HMR之后可以选择开启historyApiFallback: true, // 不跳转inline: true // 实时刷新
    },plugins: [new HtmlWebpackPlugin({template: './index.html' // 模版文件
        }),new webpack.HotModuleReplacementPlugin() // 热加载插件
    ]
}

"scripts": {"start": "webpack-dev-server","build": "set NODE_ENV=production&&webpack --config ./webpack.production.config.js"},

h1 {display: flex;
}

h1 {display: -webkit-box;display: -ms-flexbox;display: flex;
}

devServer: {// contentBase: "./",   // 本地服务器所加载的页面所在的目录hot: true,              // 配置HMR之后可以选择开启historyApiFallback: true, // 不跳转inline: true // 实时刷新
}

plugins: [new webpack.HotModuleReplacementPlugin() // 热加载插件
]

{"presets": [["es2015", {"modules": false}]]
}

{test: /\.js$/,loader: 'babel-loader', exclude: /node_modules/ //需要排除的目录
}