react-webpack(二)
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(二)的更多相关文章
- 真刀实战地搭建React+Webpack+Express搭建一个简易聊天室
一.前面bb两句 因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉.想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈.好了,可以停止bb了,说一下干货. 二. 这个项目能学到啥? ...
- 部署React+webpack工程的步骤
# 部署React+webpack工程的步骤ps:以Mac os系统做开发环境.因为npm现在使用灰常的慢,所以我使用淘宝境像cnpm. 1,准备工作: 先确保存已经安装了node.js: 2,文件部 ...
- scss + react + webpack + es6
scss + react + webpack + es6 写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果 ...
- jQuery和react实现二维码
jq如何生成二维码 代码如下: 1.jquery.qrcode生成二维码代码 <!DOCTYPE html> <html> <head> <script ch ...
- react +webpack 配置px2rem
项目背景需要适配ipad 以及手机端,这时候当然要告别刀耕火种时代啦(自己算rem),因为已经有成熟的工具啦,即px2rem(https://www.npmjs.com/package/px2rem) ...
- NodeJS + React + Webpack + Echarts
最近画了个简单的前端图,使用百度的echarts,基于原来项目的NodeJS+React+Webpack框架.在此记录一下: 1. 在react里封装echarts组件,并调用后端API. (参考的 ...
- react+webpack+babel环境搭建
[react+webpack+babel环境搭建] 1.react官方文档推荐使用 babel-preset-react.babel-preset-es2015 两个perset. Babel官方文档 ...
- 如何在react&webpack中引入图片?
在react&webpack项目中需要引入图片,但是webpack使用的模块化的思想,如果不进行任何配置,而直接在jsx或者是css中使用相对路径来使用就会出现问题,在webpack中提供了u ...
- react+webpack 引入字体图标
在使用react+webpack 构建项目过程中免不了要用到字体图标,在引入过程中报错,不能识别字体图标文件中的@符,报错 Uncaught Error: Module parse failed: U ...
- React + webpack 快速搭建开发环境
因网上大多React + webpack快速搭建的运行不起来,便自行写了一个.在搭建开发环境的前需安装nodejs,npm. 新建一个工作目录,比如叫reactdome,在reactdome目录中运行 ...
随机推荐
- CSS 之怀疑自己的审美 1 (Day49)
CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一.css的四种引入方式 1.行内式 行内式是在标 ...
- ArcGis 获取数据表中某字段唯一值
from:http://www.cnblogs.com/3echo/archive/2006/08/16/478094.html 1 /// <summary> ...
- 算法:LRU(最近最少使用)
算法:LRU(最近最少使用) 本文参考自小灰文章:https://mp.weixin.qq.com/s/B5xiVeW22ZumbI9KfrYJSg LRU算法 什么是LRU算法 LRU算法又称最近最 ...
- java sql解析
https://github.com/JSQLParser/JSqlParser 淘宝博客:http://www.searchtb.com/category/%E6%90%9C%E7%B4%A2%E5 ...
- 使用Vue.js初次真正项目开发-2018/07/14
一.组件化 使用Vue.js进行开发,按照MVVM模式,围绕数据为核心,进行开发. 开发过程根据业务和功能组件化,组件化一方面让我们开发思路更加清晰,另一方面对于数据的处理和控制变得更加简单,毕竟一个 ...
- json数据结构
JSON即JavaScript Object Natation,它是一种轻量级的数据交换格式,非常适合服务器与JavaScript的交互.JSON易于人阅读和编写.同时也易于机器解析和生成.JSON采 ...
- MapReduce:输入是两个文件,file1代表工厂表,包含工厂名列和地址编号列;file2代表地址表,包含地址名列和地址编号列。要求从输入数据中找出工厂名和地址名的对应关系,输出"工厂名----地址名"表
文件如下: file1: Beijing Red Star Shenzhen Thunder Guangzhou Honda Beijing Rising Guangzhou Development ...
- Linux中df命令查询磁盘信息和fdisk命令分区的用法
df - 报告文件系统磁盘空间的使用情况 总览 df [OPTION]... [FILE]... POSIX 选项: [-kP] GNU 选项 (最短方式): [-ahHiklmPv] [-t fs ...
- Logstash过滤器修改数据
数据修改(Mutate) filters/mutate 插件是 Logstash 另一个重要插件.它提供了丰富的基础类型数据处理能力.包括类型转换,字符串处理和字段处理等. 类型转换 类型转换是 fi ...
- openlayers2地图控件扩展:图例控件LegendControl
因项目需要在地图中增加图例,以便专题地图查看或输出. 实现思路,折线和多边形图例直接由样式属性创建,多边形直接设置div的样式:折线通过创建svg,设置polyline的样式:点要素的图例比较复杂,目 ...