1. const path = require('path');
  2. const webpack = require('webpack');
  3. const HtmlWebpackPlugin = require('html-webpack-plugin');
  4. const ExtractTextPlugin = require("extract-text-webpack-plugin");
  5.  
  6. module.exports = {
  7. entry: './src/app.jsx',
  8. output: {
  9. path: path.join(__dirname, 'dist'),
  10. filename: 'js/app.js'
  11. },
  12. module: {
  13. rules: [
  14. {
  15. test: /\.jsx$/,
  16. exclude: /(node_modules)/,
  17. use: {
  18. loader: 'babel-loader',
  19. options: {
  20. presets: ['env', 'react']
  21. }
  22. }
  23. },
  24. {
  25. test: /\.css$/,
  26. loader: ExtractTextPlugin.extract({
  27. use: "css-loader",
  28. fallback: "style-loader"
  29. })
  30. },
  31. {
  32. test: /\.scss$/,
  33. loader: ExtractTextPlugin.extract({
  34. use: 'css-loader!sass-loader',
  35. fallback: 'style-loader'
  36. })
  37. },
  38. {
  39. test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
  40. use: [{
  41. loader: 'url-loader',
  42. options: {
  43. name: '[path][name].[ext]',
  44. limit: 2000
  45. }
  46. }]
  47. }
  48. ]
  49. },
  50. resolve: {
  51. alias: {
  52. node_modules: path.join(__dirname, '/node_modules'),
  53. util: path.join(__dirname, '/src/util'),
  54. component: path.join(__dirname, '/src/component'),
  55. service: path.join(__dirname, '/src/service'),
  56. page: path.join(__dirname, '/src/page'),
  57. styles: path.join(__dirname, '/src/styles')
  58. }
  59. },
  60. devServer: {
  61. port: '8088', //设置端口号
  62. // 路径的配置
  63. historyApiFallback: {
  64. index: '/dist/index.html'
  65. },
  66. proxy: {
  67. '/manage': {
  68. target: 'http://test.happymmall.com/',
  69. changeOrigin: true
  70. },
  71. '/user/logout.do': {
  72. target: 'http://test.happymmall.com/',
  73. changeOrigin: true
  74. }
  75. }
  76. },
  77. plugins: [
  78. new webpack.optimize.CommonsChunkPlugin({
  79. name: 'common',
  80. filename: 'js/base.js'
  81. }),
  82. new HtmlWebpackPlugin({
  83. template: './src/index.html',
  84. filename: 'index.html',
  85. favicon: './favicon.ico'
  86. }),
  87. new ExtractTextPlugin("[name].css")
  88. ]
  89. };

react-webpack(二)的更多相关文章

  1. 真刀实战地搭建React+Webpack+Express搭建一个简易聊天室

    一.前面bb两句 因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉.想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈.好了,可以停止bb了,说一下干货. 二. 这个项目能学到啥? ...

  2. 部署React+webpack工程的步骤

    # 部署React+webpack工程的步骤ps:以Mac os系统做开发环境.因为npm现在使用灰常的慢,所以我使用淘宝境像cnpm. 1,准备工作: 先确保存已经安装了node.js: 2,文件部 ...

  3. scss + react + webpack + es6

    scss + react + webpack + es6 写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果 ...

  4. jQuery和react实现二维码

    jq如何生成二维码 代码如下: 1.jquery.qrcode生成二维码代码 <!DOCTYPE html> <html> <head> <script ch ...

  5. react +webpack 配置px2rem

    项目背景需要适配ipad 以及手机端,这时候当然要告别刀耕火种时代啦(自己算rem),因为已经有成熟的工具啦,即px2rem(https://www.npmjs.com/package/px2rem) ...

  6. NodeJS + React + Webpack + Echarts

    最近画了个简单的前端图,使用百度的echarts,基于原来项目的NodeJS+React+Webpack框架.在此记录一下: 1.  在react里封装echarts组件,并调用后端API. (参考的 ...

  7. react+webpack+babel环境搭建

    [react+webpack+babel环境搭建] 1.react官方文档推荐使用 babel-preset-react.babel-preset-es2015 两个perset. Babel官方文档 ...

  8. 如何在react&webpack中引入图片?

    在react&webpack项目中需要引入图片,但是webpack使用的模块化的思想,如果不进行任何配置,而直接在jsx或者是css中使用相对路径来使用就会出现问题,在webpack中提供了u ...

  9. react+webpack 引入字体图标

    在使用react+webpack 构建项目过程中免不了要用到字体图标,在引入过程中报错,不能识别字体图标文件中的@符,报错 Uncaught Error: Module parse failed: U ...

  10. React + webpack 快速搭建开发环境

    因网上大多React + webpack快速搭建的运行不起来,便自行写了一个.在搭建开发环境的前需安装nodejs,npm. 新建一个工作目录,比如叫reactdome,在reactdome目录中运行 ...

随机推荐

  1. eslasticsearch操作集锦

    索引-index:一个索引就是一个拥有几分相似特征的文档的集合.比如说,你可以有一个客户数据的索引,另一个产品目录的索引,还有一个订单数据的索引.一个索引由一个名字来标识(必须全部是小写字母的),并且 ...

  2. beego——XSRF过滤

    跨站请求伪造,简称XSRF,是Web应用中常见的一个安全问题. 当前防范 XSRF 的一种通用的方法,是对每一个用户都记录一个无法预知的token数据, 然后要求所有提交的请求(POST/PUT/DE ...

  3. python基础(数字、字符串、布尔值、字典数据类型简介)

    一 执行第一个python程序 1.下载安装python2.7和python3.6的版本及pycharm,我们可以再解释器中输入这样一行代码: 则相应的就打出了一句话.这里的print是打印的意思.你 ...

  4. CodeForces - 451E Devu and Flowers (容斥+卢卡斯)

    题意:有N个盒子,每个盒子里有fi 朵花,求从这N个盒子中取s朵花的方案数.两种方法不同当且仅当两种方案里至少有一个盒子取出的花的数目不同. 分析:对 有k个盒子取出的数目超过了其中的花朵数,那么此时 ...

  5. CodeForces - 786B Legacy (线段树+DIjkstra+思维)

    题意:给N个点和Q条选项,有三种类型的选项:1.从u到v花费w修建一条路:2.从u到下标区间为[L,R]的点花费w修建一条路; 3.从下标区间为[L,R]的点到u花费w修建一条路. 然后求起点s到其余 ...

  6. vs2012编译cocos2dx 3.10报错解决方法

    新建的一个cocos工程没有改过任何代码直接编译居然报错了? 百度了一下原来是因为vs2012不支持c++11的部分特性 cocos2dx 3.10正好就用到了vs2012不支持的那部分特性,所以报错 ...

  7. Sybase:数据库检索的日期格式

    Sybase:数据库检索的日期格式 示例代码: --1,字符转日期 ' as date ),'yyyy/mm/dd'); ---结果:2018/03/09 --2,一年内第几天 ' as date ) ...

  8. jQuery农历黄历日期表

    在线演示 本地下载

  9. J2EE--Hibernate基础笔记

    因为写的是基础内容,所以在这里,(映射集合.映射组件.复合主键和联合主键,jpa annotation,关联映射,hql等等实用内容)都不会提到- 这里写的就是试用李刚<J2EE实战>那本 ...

  10. vue切换路由模式{hash/history}

    vue中常用的路由模式 hash(#):默认路由模式 histroy(/)切换路由模式 切换路由模式 export default new Router({ // 路由模式:hash(默认),hist ...