webpack配置(使用react,es6的项目)
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const eslintPath = path.join(__dirname, '.eslintrc.js');
const config = {
entry: {
index: path.resolve(__dirname, './app.jsx'),
vendors: [
'react',
'react-dom',
'react-color',
'axios',
'echarts',
'babel-polyfill'
]
},
output: {
path: path.resolve(__dirname, 'build'),
chunkFilename: '[name].bundle.js',
filename: '[name].bundle.js'
// filename: '[name].bundle[chunkHash:5].js'
},
module: {
rules: [
// {
// enforce: "pre",
// test: /\.js$/,
// exclude: /node_modules/,
// loader: "eslint-loader",
// options: {
// configFile:path.join(__dirname, '.eslintrc.js'),
// formatter: require("eslint-friendly-formatter"),
// // eslintPath: path.join(__dirname, '.eslintrc.js'),
// emitError: true
// }
// },
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
},
// {
// test: /\.jsx?$/,
// loader: ['babel-loader','eslint-loader'],
// exclude: /node_modules/,
// },
{
test: /(\.(png|jpg|ttf|woff|svg|eot)$)/,
use: [{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
outputPath: 'resource/'
}
}]
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
]
},
resolve: {
extensions: ['.js', '.jsx'],
alias:{
'corejs': path.resolve('./corejs'),
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
}),
new ExtractTextPlugin("styles.css"),
//生成模板
new HtmlWebpackPlugin({
template: './template.html',
filename: 'index.html',
inject: true,
hash: false
}),
//添加代码标注
new webpack.BannerPlugin('This file is created by xdataInsight group'),
//提取合并共用js库
// new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendors.[hash:8].min.js' }),
],
devtool: 'eval-source-map',
devServer: {
contentBase: './',
historyApiFallback: true,
// hot: true,
inline: true,
disableHostCheck: true,
proxy: { //代理
'/xdatainsight/*': {
target: 'http://balabala:41116',
secure: false,
auth: 'admin:admin'
}
}
}
};
module.exports = config;
webpack配置(使用react,es6的项目)的更多相关文章
- webpack 配置 (支持 React SCSS ES6 编译打包 和 模块热更新 / 生成SourceMap)
1.首先是目录结构 |-node_modules/ #包文件 |-build/ #静态资源生成目录 |-src/ #开发目录 |-js/ |-index.js #入口文件 |-app.js #Reac ...
- react基于webpack和babel以及es6的项目搭建
项目demo地址https://github.com/aushion/webpack_reac_config 1.打开命令提示窗口,输入 mkdir react_test cd react_test ...
- 基于 Webpack 4 和 React hooks 搭建项目
面对日新月异的前端,我表示快学不动了
- [webpack] 配置react+es6开发环境
写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...
- webpack踩坑之路——构建基本的React+ES6项目
转自:http://www.cnblogs.com/ghost-xyx/p/5483464.html webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是 ...
- React+ES6+Webpack环境配置
转自http://www.cnblogs.com/chenziyu-blog/p/5675086.html 参考http://www.tuicool.com/articles/BrAVv2y Reac ...
- Webpack+React+ES6 最新环境搭建和配置(2017年)
刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...
- Webpack+React+ES6开发模式入门指南
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- webpack+react+es6开发模式
一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...
随机推荐
- Matplotlib_key_point
Matplotlib官方入门教程: http://www.labri.fr/perso/nrougier/teaching/matplotlib/ 本文参考教程: http://codingpy.co ...
- C# string.Format json格式字符串报错”输入字符串的格式不正确“
当我们在string.Format中传入Json字符串时,会报”输入字符串的格式不正确“,这是因为json的"{"符号的问题,最开始我是想着用转义一下"{",但 ...
- js实现的简单遮罩层
超级简单的一个实现,可能会有局限性,贵在简单易懂,使用的时候执行前loading,执行成功后loaded /* * 显示loading遮罩层 */ function loading() { var m ...
- linux下各文件夹的结构及其用途说明
bin 二进制可执行命令 dev 设备特殊问题 etc 系统管理和配置文件 etc/rc或etc/rc.d或etc/rc?.d启动或改变运行级时运行的脚本或脚本的目录 etc/passwd 用户数据库 ...
- tomcat manager 禁止外网访问 只容许内网访问
参考:http://tomcat.apache.org/tomcat-7.0-doc/manager-howto.html A default Tomcat installation includes ...
- @ResponseEntity返回值(怪异)
定制相应头 /** * 将返回数据放在响应体中 * * ResponseEntity<String>:响应体中内容的类型 * @return */ //@ResponseBody @Req ...
- 当input中的内容改变时触发的事件
当input中的内容改变时触发的事件 1 $('#id').bind('input propertychange', function() { //处理内容 } 循环js事件 $(document). ...
- Jetson Nano系列教程0:初识Jetson Nano
关于Jetson Nano Developer Kit Jetson nano搭载四核Cortex-A57 MPCore 处理器,采用128 核 Maxwell™ GPU.支持JetPack SDK ...
- BZOJ 3622: 已经没有什么好害怕的了(二项式反演)
传送门 解题思路 首先将\(a\),\(b\)排序,然后可以算出\(t(i)\),表示\(a(i)\)比多少个\(b(i)\)大,根据容斥套路,设\(f(k)\)表示恰好有\(k\)个\(a(i)\) ...
- hdu 5279 YJC plays Minecraft——生成函数
题目:http://acm.hdu.edu.cn/showproblem.php?pid=5279 令 n 个点的树的 EGF 是 g(x) ,则 \( g(x) = \sum\limits_{i=0 ...