react_webpack.prod.config
const path = require('path');
const webpack = require('webpack');
const jquery = require('jquery');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: ['./src/app.js'],
output: {
path: path.join(__dirname, 'dist'),
publicPath: "/dist",
filename: 'js/app.js'
},
module: {
rules: [
{
test: /\.js[x]?$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react'],
plugins: [
[
"import",
[
{
"libraryName": "antd",
"style": true
}
]
]
]
}
}
},
{
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: /\.less$/,
loader: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader'
}, {
loader: 'less-loader',
options: {
javascriptEnabled: true,
modifyVars: {
'@icon-url': '"~antd-iconfont/iconfont"',
}
}
}],
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'),
component: path.join(__dirname, '/src/component'),
util: path.join(__dirname, '/src/util'),
page: path.join(__dirname, '/src/page'),
service: path.join(__dirname, '/src/service'),
modals: path.join(__dirname, '/src/modals'),
styles: path.join(__dirname, '/src/styles'),
images: path.join(__dirname, '/src/images'),
reduxModel: path.join(__dirname, '/src/reduxModel')
}
},
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"),
new webpack.ProvidePlugin({
_: 'lodash',
$: 'jquery',
jQuery: 'jquery'
}),
new UglifyJSPlugin({
cache: true,
parallel: 2
}),
new webpack.DefinePlugin({
'process.dev.NODE_ENV': JSON.stringify('production')
})
],
devServer: {
port: '8088', //设置端口号
historyApiFallback: {
index: '/dist/index.html'
},
open: true,
proxy: {
'/react-redux-api/*': {
target: 'http://localhost:3000',
secure: false
},
'/api/*': {
target: 'http://localhost:12306',
secure: false
}
}
}
};
react_webpack.prod.config的更多相关文章
- Web.config Transformation Syntax for Web Application Project Deployment
Web.config Transformation Syntax for Web Application Project Deployment Other Versions Updated: Ma ...
- 配置webpack中dev.env.js、prod.env.js,解决不同命令下项目启动和打包到指定的环境
前后端分离的项目开发中,我们有开发环境.测试环境.预生产环境和生产环境. 1.开发环境下调试接口的时候,一般都会有好几个接口地址(开发服务器上的,本地的,接口开发人员的,七七八八的接口地址),要根据情 ...
- webpack构建vue项目(配置篇)
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...
- express+gulp构建项目(四)env环境变量
这里的文件的作用是负责设置env环境变量和日志. index.js try { require('dotenv').load({silent: true}); //dotenv从一个.env文件中读取 ...
- Vue+Webpack+Grunt集成
说明 Vue.Grunt.Webpack的知识请看官方网站 Grunt Tasks:构建.开发调试.打包,命令:grunt build,grunt default,grunt zipall... We ...
- 关于web-dev-server 记录
package.json "scripts": { "init": "webpack --progress --config webpack.dev. ...
- 七天学会SALTSTACK自动化运维 (2)
七天学会SALTSTACK自动化运维 (2) 导读 Grains Pillar 总结 参考链接 导读 上一篇主要介绍了安装和基本的使用方法,但是我认为如果理解了相关概念的话,使用会更加顺手,因为毕竟每 ...
- 发布自己第一个npm 组件包(基于Vue的文字跑马灯组件)
一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HT ...
- 在React中使用Redux
这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
随机推荐
- ViewPager学习及使用(一)
一:基础篇 1.ViewPager的简介和作用ViewPager是android扩展包v4包中的类,这个类可以让用户左右切换当前的view1)ViewPager类直接继承了ViewGroup类,所有它 ...
- Redis一(Redis-py与String操作)
Redis 介绍 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(so ...
- mysqlbinlog作用
mysqlbinlog:解析mysql的binlog日志 在 mysql-bin.index里面记录了所有的binlog文件,它是一个索引 binlog日志的作用:用来记录mysql内部增删改查等对m ...
- Linux基础——centos 跳过管理员密码进行登录(单用户模式、救援模式)
这里列举了两种更改或者取消管理员密码登录Linux系统的方法,其实两种方法类似,都是想方设法跳过用户认定,直接更改用户文件.更改密码的过程. 为了跳过系统正常启动过程中的某些步骤,必须知道大致的系统启 ...
- Rest Framework源码流程解析
目录: 一 整体流程 二 具体流程 一 请求进来之后,都要先执行dispatch方法,dispatch方法根据请求方式的不同触发get/post/put/delete等方法 注意,APIView中的d ...
- TRegExpr正则表达式
TRegExpr正则表达式 2006-10-24 10:55 DELPHi中的REGEXPR [ 2006-03-29 11:33:46 am | Author: Admin ] 其实这个Pasc ...
- Java集合(1):ArrayList
Java容器类的用途是“保存对象”,分为两类:Map——存储“键值对”组成的对象:Collection——存储独立元素.Collection又可以分为List和Set两大块.List保持元素的顺序(有 ...
- HDU - 6430 Problem E. TeaTree 2018 Multi-University Training Contest 10 (LCA+枚举因子)
题意:一棵树,每个点都有自己val(1 <= val <= 1e5),而任意两个点u,v可以对lca(u,v) 产生gcd(valu,valv)的贡献,求每个点能接受到来自子树贡献的最大值 ...
- uva 11426 GCD - Extreme (II) (欧拉函数打表)
题意:给一个N,和公式 求G(N). 分析:设F(N)= gcd(1,N)+gcd(2,N)+...gcd(N-1,N).则 G(N ) = G(N-1) + F(N). 设满足gcd(x,N) 值为 ...
- 对Java 注解的一些理解
转载自https://blog.csdn.net/javazejian/article/details/71860633 引入 注解最简单的使用方式 Java注解与普通修饰符(public\stati ...