webpack + react

var webpack = require('webpack');
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var config = {
　　entry: './src/app.js', //入口文件配置为app.js文件。若入口文件为index.js,这里可以直接写成'./src'

　　//多入口的写法
　　//entry:{
　　　　// pageOne: './src/pageOne/index.js',
　　　　// pageTwo: './src/pageTwo/index.js',
　　　　// pageThree: './src/pageThree/index.js'
　　// }

　　output: {
　　　　path: __dirname + '/build', //把合并的js文件，放到根目录build文件夹下面
 　　　　filename: "bundle.js" //js合并后的输出的文件，命名为bundle.js
　　　　//publicPath:'',生成文件的公共路径，‘/work/reactweb/dist’ 生产环境下所有的文件路径将会添加这个公共路径
 　　},

　　//多个入口的输出文件格式
　　// output: {
　　　　// filename:'[name].js',//name相当于变量，等同于pageOne/pageTwo/pageThree
　　　　// path:path.resolve(__dirname,'build'),//
　　//},

　　module: {
　　　　rules: [{
　　　　　　test: /\.js$/,
　　　　　　exclude: /node_modules/,
　　　　　　loader: 'babel-loader',
　　　　　　query: {
　　　　　　　　plugins: ['transform-runtime'],
　　　　　　　　presets: ['es2015', 'react', 'stage-2']
　　　　　　}
　　　　}, {
　　　　　　test: /\.css$/,
　　　　　　loader: "style-loader!css-loader"
　　　　}, {
　　　　　　test: /\.scss$/,
　　　　　　loader: "style-loader!css-loader!sass-loader"
　　　　}]
　　},
　　plugins: [
　　　　new webpack.HotModuleReplacementPlugin({
　　　　　　// title:"reactwebpack", 配置html 的title
　　　　　　// filename: , html文件的名字，默认是index
　　　　　　// template:__dirname+'/build/index.html', //模板文件路径
　　　　　　// inject:true|'body'|'head'|'false', 设置为 true|'body':js文件引入的位置为body的结束标签之前
　　　　　　// favicon:'', 设置html的icon图标
　　　　　　// minify:{}|false, 暂时不理解这个参数的使用
　　　　　　// hash:true|false, 将添加唯一的webpack编译hash到所有包含的脚本和css文件
　　　　　　// cache:true|false, 默认为true，仅仅在文件修改之后才会发布
　　　　　　// showErrors:true|false, 默认为true，错误信息写入HTML页面中
　　　　　　// chunks: 允许添加某些块（比如unit test）
　　　　　　// chunksSortMode: 允许控制块在添加到页面之前的排序方式
　　　　　　// excludeChunks: 允许跳过模型块，比如单元测试块
 　　　　}),
　　　　new HtmlWebpackPlugin({
　　　　　　filename: 'index.html',
　　　　　　template: `${__dirname}/index.html`,
　　　　　　inject: 'body',
　　　　　　hash: true
　　　　}),
　　　　new webpack.DefinePlugin({

　　　　})
　　],
　　devServer： {
　　　　//contentBase: path.join(__dirname,"dist"),//用于静态文件的目录，不设置默认为当前根目录
	　　　　// contentBase:[path.join(__dirname,'public'),path.join(__dirname,'assets')],//支持多路径
	　　　　// publicPath:"/assets", 服务器地址:http://localhost:8080 ,output file:http://localhost:8080/assets/bundle.js
　　　　//compress:true,//gzip压缩
	　　　　//headers:{"X-Custom-Foo":"bar"},
　　　　// host: 'localhost', //配置项用于打开指定 URL 的网页,如果想要局域网中其他设备访问你本地的服务，可以在启动的时候带上 ：--host 0.0.0.0
　　　　hot: true, //是否启用热更新
	　　　　port: 8080,
　　　　historyApiFallback: true, //html5接口,设置为true，所有路径均转到index.html
　　　　inline: true, //是否实时刷新，即代码有更改，自动刷新浏览器 
	　　　　stats: {
　　　　　　colors: true
　　　　}, //显示bundle文件信息，不同类型的信息用不同的颜色显示
　　　　// open: true, //在DevServer第一次构建完成时，自动用浏览器打开网页，默认是true
　　　　// openPage: 'class', //配置项用于打开指定 URL 的网页,改设置打开的是localhost:8080/class#/
　　　　// allowedHosts: [ // 配置一个白名单列表，只有HTTP请求的HOST在列表里才正常返回，
　　　　// '.host.com',
　　　　//'subdomain.host.com',
　　　　// ],
　　　　/*
　　　　proxy:{ //服务器代理配置
	　　　　　　"/api":{ //相对路径已/api打头，将会触发代理
	　　　　　　　　target:"http://localhost:3000", //代理地址
	　　　　　　　　pathRewrite:{"^/api":""}, //路径替换
	　　　　　　　　secure:false //跨域
	　　　　　　}
　　　　}
　　　　*/
　　}
};
module.exports = config;