webpack配置(使用react,es6的项目)
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的项目)的更多相关文章
- webpack 配置 (支持 React SCSS ES6 编译打包 和 模块热更新 / 生成SourceMap)
		
1.首先是目录结构 |-node_modules/ #包文件 |-build/ #静态资源生成目录 |-src/ #开发目录 |-js/ |-index.js #入口文件 |-app.js #Reac ...
 - react基于webpack和babel以及es6的项目搭建
		
项目demo地址https://github.com/aushion/webpack_reac_config 1.打开命令提示窗口,输入 mkdir react_test cd react_test ...
 - 基于 Webpack 4 和 React hooks 搭建项目
		
面对日新月异的前端,我表示快学不动了
 - [webpack] 配置react+es6开发环境
		
写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...
 - webpack踩坑之路——构建基本的React+ES6项目
		
转自:http://www.cnblogs.com/ghost-xyx/p/5483464.html webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是 ...
 - React+ES6+Webpack环境配置
		
转自http://www.cnblogs.com/chenziyu-blog/p/5675086.html 参考http://www.tuicool.com/articles/BrAVv2y Reac ...
 - Webpack+React+ES6 最新环境搭建和配置(2017年)
		
刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...
 - Webpack+React+ES6开发模式入门指南
		
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
 - webpack+react+es6开发模式
		
一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...
 
随机推荐
- 在linux中出现there are stopped jobs 的解决方法【转自:http://www.linuxdiyf.com/viewarticle.php?id=104604】
			
在用管理员执行一个命令后,我用Ctrl+Z把命令转移到了后台天.导致我无法退出root的. 输入命令:logout终端显示:There are stopped jobs. 解决方法:输入命令:jobs ...
 - Java Exception异常介绍
			
一:介绍java异常 异常指不期而至的各种状况,如:文件找不到.网络连接失败.非法参数等.异常是一个事件,它发生在程序运行期间,干扰了正常的指令流程.Java通 过API中Throwab ...
 - Codeforces 1197E Culture Code DP
			
题意:你有n个俄罗斯套娃,已知每个套娃的容积和体积,问有多少个子集满足以下条件: 1:这个子集是一个极大子集,即不能再添加其它的套娃到这个子集里. 2:子集的套娃之间的间隙和最小. 思路1:线段树优化 ...
 - 解决vue代理和跨域问题
			
一.安装vue-resource插件 安装命令:npm install vue-resource --save 安装完之后在根目录下的package.json检查一下插件的版本 在rourer-in ...
 - C语言的文件操作
			
在操作系统中,为了统一对各种硬件的操作,简化接口,不同的硬件设备也被看成一个文件.对于这些文件的操作,等于是对普通文件的操作.例如,通常把显示器称为标准输出文件,printf就是想这个文件输出,把键盘 ...
 - centos7 iperf3安装
			
iperf3快速安装 wget -O /usr/lib/libiperf.so.0 https://iperf.fr/download/ubuntu/libiperf.so.0_3.1.3 wget ...
 - enumerate()(Python)
			
>>> E=enumerate('spam') >>> E <enumerate object at 0x1021ceca8> >>> ...
 - shell脚本编写nginx部署脚本
			
下面为shell脚本编写的nginx的安装及修改nginx.conf的脚本,脚本比较简单: #!/bin/bash function yum_install(){ yum install epel-r ...
 - oralce存储过程
			
简单的存储 create or replace procedure sayhelloworld as begin dbms_output.put_line('Hello World'); end;
 - 《NULL-2019团队》第一次作业:OUC二手交易平台
			
前言 项目名称:OUC二手交易平台 项目简介:针对在校大学生的二手交易平台,相对于现在市面已有的二手APP,将其使用的普遍性范围缩小,针对在校大学生,这样可以有效的保证交易的真实性和公平性. NA ...