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 ...
 
随机推荐
- HTTP协议简要介绍
			
1. 网络基础 TCP/IP 通常使用的网络是在TCP/IP协议簇基础上运作的. HTTP属于它内部的一个子集. TCP/IP分为4个层次, 应用层, 传输层, 网络层, 链路层. (Applicat ...
 - python读取/写入文件
			
<Python编程:从入门到实践>读书笔记 1.读取文件并且对文件内容进行打印有三种方式: with open('test.txt') as fo: for lins in fo: pri ...
 - Part1.1 、RabbitMQ 操作使用
			
本节目录: 一.最基本的生产者消费者二.acknowledgment 消息不丢失的方法. 三.durable 消息不丢失 (消息持久化) 四.消息获取顺序 RabbitMQ安装. (1.1).ce ...
 - Python(面向对象编程4——继承顺序、封装)
			
继承顺序 ''' 一点需要注意 ''' class Father: def f1(self): print("test func followed ==>") self.te ...
 - sql 中 in 与 exist 的区别
			
可以 通过 where 条件 把 null的情况 筛选掉,已避免出现上述的情况. 1, exist 返回 true or false: in 返回 true unknow. not之后 not ...
 - Windows10安装mysql数据库
			
安装以及配置,参考下面链接 https://www.cnblogs.com/qjoanven/p/7898006.html 碰到的问题: 1. 安装的时候出现 mysql Install/Remove ...
 - 20145201 《Java程序设计》第五周学习总结
			
20145201 <Java程序设计>第五周学习总结 教材学习内容总结 本周学习了课本第八.九章内容,即异常处理.Collection与Map. 第八章 异常处理 8.1 语法与集成架构 ...
 - C++/VC中ANSI与UNICODE中字符定义和函数对照表
			
这样查起来方便多了 ANSI UNICODE 通用 说明 数据类型 (char.h) (wchar.h) (tchar.h) char wchar_t TCHAR char * wchar_t ...
 - QT添加资源文件,并为工具栏添加图片
			
1.右键工程,添加新文件,QT,QT Resource File. 2.选择res,添加前缀,添加文件,(把图片放在文件夹里,把文件夹放在工程目录下)选择图片 3.在ui中,下方有个Action Ed ...
 - yum安装mysql后root用户的临时密码
			
1.查看root用户临时随机密码 yum 安装mysql后,无法通过空密码登录数据库,如下: [root@ mysql]# mysql -u root -p Enter password: ERROR ...