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 ...
随机推荐
- 007-shiro与spring web项目整合【一】基础搭建
一.需求 将原来基于url的工程改成使用shiro实现 二.代码 https://github.com/bjlhx15/shiro.git 中的permission_shiro 三.去除原项目拦截器 ...
- Python HTML Resolution Demo - SGMLParser & PyQuery
1. SGMLParser: 这里定义了一个Parse类,继承SGMLParser里面的方法.使用一个变量is_h4做标记判定html文件中的h4标签,如果遇到h4标签,则将标签内的内容加入到Pars ...
- rails 单数 复数 大写 小写转换 下划线 驼峰命名
downcase 变小写 pluralize 复数 singularize 单数 camelcase 驼峰 underscore : “MyScore”.undersocre ==> my_s ...
- iOS 调整图片尺寸,告诉你的UI,别问我尺寸!我要最大的
如果UI问你“这个图片你要多大尺寸的?”,你该怎么回答呢? 为了不让图片因拉伸或压缩而变形或模糊,请精确告诉UI图片的比例,至于图片的分辨率,不必要要求太严,但是最低要求是要让最大的屏幕不会出现前面描 ...
- java synchronized和(ReentrantLock)区别
原文:http://blog.csdn.net/zheng548/article/details/54426947 区别一:API层面 syschronized使用 synchronized即可修饰方 ...
- MySQL SQL Injection(注入)
如果通过网页接收用户输入,而后再把这些数据插入到数据库中,那么你可能就会碰到 SQL 注入式攻击.本节简要介绍如何防范这种攻击,确保脚本和 MySQL 语句的安全性. 注入式攻击往往发生在要求用户输入 ...
- js防抖
那我们设置个 options 作为第三个参数,然后根据传的值判断到底哪种效果,我们约定: leading:false 表示禁用第一次执行trailing: false 表示禁用停止触发的回调 我们来改 ...
- String类型是特殊的引用类型
例证: string peom1 = "Kubla Khan"; string peom2 = "Kubla Khan"; string peom3 = Str ...
- 【Python】进程和线程
多进程 多线程 ThreadLocal 进程vs线程 分布式进程 Top 学习廖老师的py官网的笔记 多任务的实现方式有三种方式: 1.多进程 2.多线程 3.多进程+多线程(这种比较复杂,实际很少采 ...
- MySQL Binlog解析(1)
一.Binlog File Binlog files start with a Binlog File Header followed by a series of Binlog Event Binl ...