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. php 获取各类时间归类

    //php获取今日开始时间戳和结束时间戳 $beginToday=mktime(0,0,0,date('m'),date('d'),date('Y')); $endToday=mktime(0,0,0 ...

  2. java反射基础知识(四)反射应用实践

    反射基础 p.s: 本文需要读者对反射机制的API有一定程度的了解,如果之前没有接触过的话,建议先看一下官方文档的Quick Start. 在应用反射机制之前,首先我们先来看一下如何获取一个对象对应的 ...

  3. begoo——对象的CRUD操作

    如果已知主键的值,那么可以使用这些方法进行CRUD操作 对object操作的四个方法Read/Insert/Update/Delete o := orm.NewOrm() user := new(Us ...

  4. Redis——安装

    Linux下面: 下载安装包: wget http://download.redis.io/releases/redis-4.0.10.tar.gz 解压: tar xzf redis-4.0.10. ...

  5. dymaic方式的Json序列化

    from:http://stackoverflow.com/questions/3142495/deserialize-json-into-c-sharp-dynamic-object If you ...

  6. webform中Repeater的Command用法、Repeater的替代方法

    Command: 在Repeater控件循环执行过程中,可以给每一项的某个按钮或其他控件设置CommandName.CommandArgument属性,用于在后台代码中获取单项 数据进行调用.   需 ...

  7. poj3125

    /*水题,模拟排队*/#include<stdio.h>#include<string.h>#include<algorithm>using namespace s ...

  8. 32位JDK和64位JDK

    32位和64位系统在计算机领域中常常提及,但是仍然很多人不知道32位和64位的区别,所以本人在网上整理了一些资料,并希望可以与大家一起分享.对于32位和64位之分,本文将分别从处理器,操作系统,JVM ...

  9. 2018年Java面试题搜集

    2018年Java面试题搜集 一.Servlet执行流程(浏览器访问servlet的过程容器) 客户端发起http请求,web服务器将请求发送到servlet容器,servlet容器解析url并根据w ...

  10. Makefile的简单编写【学习笔记】

    首先我们先创建两个简单的文件: main.c #include <stdio.h> extern void hi_fun(); int main() { printf("hell ...