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;

猜你喜欢

转载自www.cnblogs.com/mufc/p/10213708.html