const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const eslintPath = path.join(__dirname, '.eslintrc.js');

const config = {
    entry: {
        index: path.resolve(__dirname, './app.jsx'),
        vendors: [
         'react',
            'react-dom',
         'react-color',
           'axios',
           'echarts',
           'babel-polyfill'
        ]
    },
    output: {
      path: path.resolve(__dirname, 'build'),
      chunkFilename: '[name].bundle.js',
      filename: '[name].bundle.js'
      // filename: '[name].bundle[chunkHash:5].js'
    },
    module: {
      rules: [
        // {
          // enforce: "pre",
          // test: /\.js$/,
          // exclude: /node_modules/,
          // loader: "eslint-loader",
          // options: {
          // configFile:path.join(__dirname, '.eslintrc.js'),
          // formatter: require("eslint-friendly-formatter"),
          // // eslintPath: path.join(__dirname, '.eslintrc.js'),
          // emitError: true
          // }
        // },
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: "babel-loader",
        },
        // {
          // test: /\.jsx?$/,
          // loader: ['babel-loader','eslint-loader'],
          // exclude: /node_modules/,
        // },
        {
         test: /(\.(png|jpg|ttf|woff|svg|eot)$)/,
         use: [{
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]',
            outputPath: 'resource/'
          }
           }]
        },
        {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
          })
        },

        ]
       },
    resolve: {
      extensions: ['.js', '.jsx'],
      alias:{
        'corejs': path.resolve('./corejs'),
       }
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
        'NODE_ENV': JSON.stringify('development')
      }
    }),
    new ExtractTextPlugin("styles.css"),
    //生成模板
    new HtmlWebpackPlugin({
      template: './template.html',
      filename: 'index.html',
      inject: true,
      hash: false
    }),
    //添加代码标注
    new webpack.BannerPlugin('This file is created by xdataInsight group'),
    //提取合并共用js库
    // new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendors.[hash:8].min.js' }),
    ],
    devtool: 'eval-source-map',
    devServer: {
      contentBase: './',
      historyApiFallback: true,
      // hot: true,
      inline: true,
      disableHostCheck: true,
      proxy: {  //代理
        '/xdatainsight/*': {
          target: 'http://balabala:41116',
          secure: false,
          auth: 'admin:admin'
        }
      }
    }
};
module.exports = config;

webpack配置(使用react,es6的项目)的更多相关文章

  1. webpack 配置 (支持 React SCSS ES6 编译打包 和 模块热更新 / 生成SourceMap)

    1.首先是目录结构 |-node_modules/ #包文件 |-build/ #静态资源生成目录 |-src/ #开发目录 |-js/ |-index.js #入口文件 |-app.js #Reac ...

  2. react基于webpack和babel以及es6的项目搭建

    项目demo地址https://github.com/aushion/webpack_reac_config 1.打开命令提示窗口,输入 mkdir react_test cd react_test ...

  3. 基于 Webpack 4 和 React hooks 搭建项目

    面对日新月异的前端,我表示快学不动了

  4. [webpack] 配置react+es6开发环境

    写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...

  5. webpack踩坑之路——构建基本的React+ES6项目

    转自:http://www.cnblogs.com/ghost-xyx/p/5483464.html webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是 ...

  6. React+ES6+Webpack环境配置

    转自http://www.cnblogs.com/chenziyu-blog/p/5675086.html 参考http://www.tuicool.com/articles/BrAVv2y Reac ...

  7. Webpack+React+ES6 最新环境搭建和配置(2017年)

    刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...

  8. Webpack+React+ES6开发模式入门指南

    React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...

  9. webpack+react+es6开发模式

    一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...

随机推荐

  1. 线程监控ProcessMonitor

    软件行为 在线监测  注册表  行为判断

  2. 【leedcode】950. Reveal Cards In Increasing Order

    题目如下: In a deck of cards, every card has a unique integer.  You can order the deck in any order you ...

  3. paper 147:Deep Learning -- Face Data Augmentation(一)

    1. 在深度学习中,当数据量不够大时候,常常采用下面4中方法:  (1)人工增加训练集的大小. 通过平移, 翻转, 加噪声等方法从已有数据中创造出一批"新"的数据.也就是Data ...

  4. CDN技术之-介绍

    “第一公里”是指万维网流量向用户传送的第一个出口,是网站服务器接入互联网的链路所能提供的带宽.这个带宽决定了一个网站能为用户提供的访问速度和并发访问量.如果业务繁忙,用户的访问数越多,拥塞越严重,网站 ...

  5. 【数据库】一篇文章搞掂:MySQL数据库

    一.安装 使用版本:5.7(2018/08/03 阿里云的云数据库最高支持5.7,所以这里考虑用5.7) 下载版本:MySQL Community Server 5.7.23 下载地址:https:/ ...

  6. scrapy原理

    scarpy据说是目前最强大的爬虫框架,没有之一.就是这么自信. 官网都是这么说的. An open source and collaborative framework for extracting ...

  7. upc组队赛3 Congestion Charging Zon【模拟】

    Congestion Charging Zon 题目描述 Tehran municipality has set up a new charging method for the Congestion ...

  8. qrcode-使用

    安装 composer require endroid/qrcode namespace App\Http\Controllers\Admin; use Endroid\QrCode\QrCode; ...

  9. web跨域

    之前对于跨域相关的知识一致都很零碎,正好现在的代码中用到了跨域相关的,现在来对这些知识做一个汇总整理,方便自己查看,说不定也可能对你有所帮助. 本篇主要内容如下: 浏览器同源策略 http 请求跨域 ...

  10. spring配置mybatis的sqlsessionfactory

    <!--读入配置文件 --> <bean id="propertyConfigurer" class="org.springframework.bean ...