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 ...
随机推荐
- beego——模板处理
beego的模板处理引擎采用的是Go内置的html/template包进行处理,而且beego的模板处理逻辑是采用了缓存编译方式, 也就是所有的模板会在beego应用启动的时候全部编译然后缓存在map ...
- windows10+mysql8.0.zip安装
〇.准备: MySQL8.0 Windows zip包下载地址:https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.11-winx64.zip 环 ...
- Codeforces Round #397 by Kaspersky Lab and Barcelona Bootcamp (Div. 1 + Div. 2 combined) E. Tree Folding
地址:http://codeforces.com/contest/765/problem/E 题目: E. Tree Folding time limit per test 2 seconds mem ...
- c#的yield return
4.1 迭代器块 一个迭代器块(iterator block)是一个能够产生有序的值序列的块.迭代器块和普通语句块的区别就是其中出现的一个或多个yield语句. yield return语句产生迭代的 ...
- EasyUI:datagrid控件简介
EasyUI:datagrid控件简介 1,水平滚动条属性: //显示滚动条 fitColumns:false //不显示滚动条 fitColumns:true
- 使用POI做的一个生成Excel的工具类。包含了导出Excel和解析Excel方法
PoiExcelUtils.java /** * */ package com.common.office; import java.io.File; import java.io.FileInput ...
- zabbix监控php-fpm的性能
zabbix监控php-fpm主要是通过nginx配置php-fpm的状态输出页面,在正则取值 要nginx能输出php-fpm的状态必须要先修改php-fpm的配置,这个配置没有开启nginx 就没 ...
- 20145120黄玄曦《网络对抗》MSF基础应用
20145120黄玄曦<网络对抗>MSF基础应用 准备工作 本来决定就是老师提供的XP虚拟机了,做着做着发现因为打补丁以及语言的问题,需要另外的虚拟机. 求来了不那么健壮的虚拟机,环境如下 ...
- 华为S5700系列交换机配置通过流策略实现VLAN间三层隔离
组网图形 图1 配置通过流策略实现VLAN间三层隔离组网图 组网需求 如图一所示,为了通信的安全性,某公司将访客.员工.服务器分别划分到VLAN10.VLAN20.VLAN30中.公司希望: 员工.服 ...
- 伸展树基础(Splay)
3224: Tyvj 1728 普通平衡树 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 3948 Solved: 1627 [Submit][St ...