const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = {
entry: './src/app.jsx',
output: {
path: path.join(__dirname, 'dist'),
filename: 'js/app.js'
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react']
}
}
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
use: "css-loader",
fallback: "style-loader"
})
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
use: 'css-loader!sass-loader',
fallback: 'style-loader'
})
},
{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
use: [{
loader: 'url-loader',
options: {
name: '[path][name].[ext]',
limit: 2000
}
}]
}
]
},
resolve: {
alias: {
node_modules: path.join(__dirname, '/node_modules'),
util: path.join(__dirname, '/src/util'),
component: path.join(__dirname, '/src/component'),
service: path.join(__dirname, '/src/service'),
page: path.join(__dirname, '/src/page'),
styles: path.join(__dirname, '/src/styles')
}
},
devServer: {
port: '8088', //设置端口号
// 路径的配置
historyApiFallback: {
index: '/dist/index.html'
},
proxy: {
'/manage': {
target: 'http://test.happymmall.com/',
changeOrigin: true
},
'/user/logout.do': {
target: 'http://test.happymmall.com/',
changeOrigin: true
}
}
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'js/base.js'
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
favicon: './favicon.ico'
}),
new ExtractTextPlugin("[name].css")
]
};

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. 使用jqueryUI和corethink实现的类似百度的搜索提示

    代码:http://download.csdn.net/detail/u012995856/9676845 效果: 目录: 这里是以corethink模块的形式,只需要安装上访问 index.php? ...

  2. Python函数加工厂-装饰器

    引言: 函数和装饰器好比程序界的加工厂: 1.函数一般可用来加工一种或者多种数据类型的数据:字符串.数字.列表.字典等 举一个简单例子:已知半径求面积 def s(r): s = 3.14 * r * ...

  3. s5_day8作业

    # 1 整理今天装饰器代码(每人手写一份,注意,是手写,交到小组长手里,明天我检查),准备明天默写 # 2 编写日志装饰器,实现功能如:一旦函数f1执行,则将消息2017-07-21 11:12:11 ...

  4. jquery 获取checkbox 选中值并拼接字符集

    1.代码示例: var chk_value =[]; $('input[name="rewardids"]:checked').each(function(){   chk_val ...

  5. 自动化测试调查问卷送《QTP自动化测试最佳实践》

    自动化测试调查问卷送<QTP自动化测试最佳实践> http://automationqa.com/forum.php?mod=viewthread&tid=2308&fro ...

  6. javascript Date对象 之 设置时间

    之前对js的date对象总是感觉熟悉,而不愿细细深究其所以然,所以每当自己真正应用起来的时候,总会糊里糊涂的,今日花费2个小时的时间仔细钻研了一下,感觉 豁然开朗,故,以此记录,一来 供以后查阅,二来 ...

  7. React-native Android环境搭建

    基础安装 安装Homebrew Homebrew是Mac OSX的包管理器,我们需要通过Homebrew安装开发React Native的相关软件包. 如果不知道怎样安装Homebrew可以点这里:官 ...

  8. 【leetcode刷题笔记】Rotate Image

    You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...

  9. JavaWeb JavaScript

    1.JavaScript概述 JavaScript是一种基于对象和事件驱动的脚本语言,原名叫做livescript.W3c组织开发的标准叫ECMAscipt 1.1JavaScript和Java的一些 ...

  10. 安装专业版的linux的方法 图解安装专业版的linux

    按装一个linux系统其实很简单,不再像以前那样光光盘就好些个,一不小心还又可能装错,实在也是一个大问题.现在好了基本上都是简单安装+网络升级先安装主要的后面如果需要什么在装什么?大大简化了流程.不行 ...