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;