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的更多相关文章

  1. Web.config Transformation Syntax for Web Application Project Deployment

    Web.config Transformation Syntax for Web Application Project Deployment Other Versions   Updated: Ma ...

  2. 配置webpack中dev.env.js、prod.env.js,解决不同命令下项目启动和打包到指定的环境

    前后端分离的项目开发中,我们有开发环境.测试环境.预生产环境和生产环境. 1.开发环境下调试接口的时候,一般都会有好几个接口地址(开发服务器上的,本地的,接口开发人员的,七七八八的接口地址),要根据情 ...

  3. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  4. express+gulp构建项目(四)env环境变量

    这里的文件的作用是负责设置env环境变量和日志. index.js try { require('dotenv').load({silent: true}); //dotenv从一个.env文件中读取 ...

  5. Vue+Webpack+Grunt集成

    说明 Vue.Grunt.Webpack的知识请看官方网站 Grunt Tasks:构建.开发调试.打包,命令:grunt build,grunt default,grunt zipall... We ...

  6. 关于web-dev-server 记录

    package.json "scripts": { "init": "webpack --progress --config webpack.dev. ...

  7. 七天学会SALTSTACK自动化运维 (2)

    七天学会SALTSTACK自动化运维 (2) 导读 Grains Pillar 总结 参考链接 导读 上一篇主要介绍了安装和基本的使用方法,但是我认为如果理解了相关概念的话,使用会更加顺手,因为毕竟每 ...

  8. 发布自己第一个npm 组件包(基于Vue的文字跑马灯组件)

    一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HT ...

  9. 在React中使用Redux

    这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

随机推荐

  1. Android studio 如何快速收起代码?

    windows下 ctrl+shift+(小键盘上的减号 -) mac下 commang+shift+减号,搞定

  2. C#实现对图片文件的压缩、裁剪操作实例

    本文实例讲述了C#对图片文件的压缩.裁剪操作方法,在C#项目开发中非常有实用价值.分享给大家供大家参考.具体如下: 一般在做项目时,对图片的处理,以前都采用在上传时,限制其大小的方式,这样带来诸多不便 ...

  3. MySQL之 视图,触发器,事物,存储过程,函数(Day48)

    阅读目录 一.视图 二.触发器 三.事物 四.存储过程 五.函数 六.流程控制 一.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名 ...

  4. Visual Studio各版本区别

    Visual Studio 是微软公司推出的开发环境,Visual Studio 可以用来创建 Windows 平台下的 Windows 应用程序和网络应用程序,也可以用来创建网络服务.智能设备应用程 ...

  5. poj2996

    /*排序函数要写对,优先级:K,Q,R,B,N,P 白色的:如果优先级一样,那么按照行数大的优先,如果行数一样,那么列数小的优先 黑色的:如果优先级一样,那么按照行数小的优先,如果行数一样,那么列数小 ...

  6. cache工作原理

    转:http://www.360doc.com/content/11/0307/21/3791508_99049437.shtml

  7. 利用C#查看特定服务是否安装

    需求:想通过C#代码来查看IIS服务或者MSMQ是否已经安装 分析:IIS服务和MSMQ安装完成后都会创建windows服务,所以我们只需要查看对应的服务是否存在即可. 准备工作: IIS服务名称:W ...

  8. 安装pycurl

    环境:ubuntu 1604 安装 pycurl 遇到一些问题 简单记录 1.安装 pippython2:apt install python-pippython3: apt install pyth ...

  9. 《Python学习手册》(三)

    string 字符串,和列表.元组,都适用序列操作. 关于python转义字符 迭代 for x in S: print(x) [c * 2 for c in S] Comparasion: > ...

  10. MLP(多层神经网络)介绍

    写在前面的 接触神经网络(ANN)的时间很长了,以前也只是学了学原理,做过一个BPN的练习,没有系统的总结过,最近看Torch的源码,对MLP有了更多的了解,写写自己学到的东西吧,算是做了一次总结! ...