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. 查看Oracle的表中有哪些索引

    用user_indexes和user_ind_columns系统表查看已经存在的索引 对于系统中已经存在的索引我们可以通过以下的两个系统视图(user_indexes和user_ind_columns ...

  2. StrobeMediaPlayback的Javascript桥接

    StrobeMediaPlayback是Adobe官方出的流媒体播放器,支持RTMP协议,在项目中运用到了,却在网上怎么都找不到相关资料,可以说是寥寥无几. 无奈之下,稍微看了点源代码,对播放器与JS ...

  3. Python-Cpython解释器支持的进程与线程

    一.Python并发编程之多进程 1. multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源(os.cpu_count()查看),在pyt ...

  4. BOM对象,math对象document对象的属性和操作和 事件的基本操作

    Math对象 //该对象中的属性方法 和数学有关. abs(x) 返回数的绝对值. exp(x) 返回 e 的指数. floor(x) 对数进行下舍入. log(x) 返回数的自然对数(底为e). m ...

  5. Unity 碰撞检测 OnTriggerEnter 入门

    当我们需要检测两个物体A和B发生碰撞的时候,必须要满足一下条件 1:A和B必须有碰撞边界,你可以点开一个A,在属性窗口点击AddComponent,在physis(物理)目录下看到以下这些 ,根据形状 ...

  6. Java并发之CyclicBarria的使用

    Java并发之CyclicBarria的使用 一.简介 笔者在写CountDownLatch这个类的时候,看到了博客园上的<浅析Java中CountDownLatch用法>这篇博文,为博主 ...

  7. 当root用户无密码,非超级权限用户时提示mysqladmin: Can't turn off logging; error: 'Access denied; you need the SUPER privilege for this op解决方案

    问题: 在centOS上安装了mysql后,卸载了又重新安装,使用mysqladmin -u root password 'new password' 更改密码,提示: mysqladmin: Can ...

  8. echo指令

    1.在Linux中echo命令用来在标准输出上显示一段字符,比如:echo "the echo command test!" 这个就会输出“the echo command tes ...

  9. linux 压缩以及解压命令

    转载:http://blog.csdn.net/mmllkkjj/article/details/6768294/ tar-c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件- ...

  10. Spring Boot 中修改端口和上下文路径

    通过修改application.properties内容来改变访问的端口号和上下文路径(很简单!) spring.mvc.view.prefix=/WEB-INF/jsp/ spring.mvc.vi ...