<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>react15-脚手架</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
</head>
<body>
<div id="root"></div>
</body>
</html>
{
"name": "react-redux-webpack",
"version": "1.1.0",
"description": "",
"scripts": {
"str": "webpack-dev-server --config webpack.config.g.js --progress --colors",
"dev": "webpack-dev-server",
"lint": "eslint src",
"pro": "set NODE_ENV=production&& webpack --progress --hide-modules --config webpack.config.js",
"build-mac": "export NODE_ENV=production && webpack --progress --hide-modules --config webpack.config.js",
"build-win": "set NODE_ENV=production&& webpack --progress --hide-modules --config webpack.config.js",
"test": "jest"
},
"repository": {
"type": "git",
"url": ""
},
"author": "huangyongyue",
"license": "MIT",
"devDependencies": {
"assets-webpack-plugin": "^3.5.1",
"autoprefixer": "^7.1.1",
"axios": "^0.16.2",
"babel-cli": "^6.16.0",
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-latest": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.16.0",
"babel-preset-stage-1": "^6.16.0",
"babel-preset-stage-2": "^6.17.0",
"babel-preset-stage-3": "^6.17.0",
"bundle-loader": "^0.5.5",
"classnames": "^2.2.5",
"colors-cli": "^1.0.8",
"compression": "^1.6.2",
"css-loader": "^0.22.0",
"eslint": "^1.9.0",
"eslint-config-airbnb": "0.1.0",
"eslint-plugin-react": "^3.2.3",
"expect": "^1.12.0",
"express": "^4.15.2",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.8.4",
"http-proxy-middleware": "^0.17.4",
"image-webpack-loader": "^3.1.0",
"imports-loader": "^0.6.4",
"jasmine-core": "^2.3.4",
"jest": "^19.0.2",
"jest-runtime": "^19.0.2",
"less": "^2.7.1",
"less-loader": "^2.2.2",
"open": "0.0.5",
"open-browser-webpack-plugin": "0.0.5",
"postcss-loader": "^0.7.0",
"react-test-renderer": "^15.4.2",
"react-transition-group": "^1.1.1",
"redux-logger": "^2.8.2",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.2.0",
"style-loader": "^0.13.0",
"url-loader": "^0.5.6",
"web-webpack-plugin": "^1.6.2",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"babel-runtime": "^6.23.0",
"dateformat": "^2.0.0",
"dateformat-util": "^1.0.5",
"fastclick": "^1.0.6",
"history": "^4.6.1",
"prop-types": "^15.5.4",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-hot-loader": "^3.0.0-beta.7",
"react-redux": "^5.0.4",
"react-router": "^4.0.0",
"react-router-dom": "^4.0.0",
"react-router-redux": "^4.0.8",
"redux": "^3.6.0",
"redux-devtools-extension": "^2.13.0"
}
}
var path = require('path');
var color = require('colors-cli'); //控制台颜色
var DateFormat = require('dateformat-util'); //生成构建时间
var webpack = require('webpack');
//webpack如何全局加载第三方插件可以使用webpack官方的ProvidePlugin
const AssetsPlugin = require('assets-webpack-plugin') //在生成代码时生成一个 json 文件,其中包含了源文件和打包结果的对应关系
const WebWebpackPlugin = require('web-webpack-plugin')
const {
WebPlugin,
AutoWebPlugin
} = WebWebpackPlugin; //加载html模板
var ExtractTextPlugin = require('extract-text-webpack-plugin'); //引入css 单独打包插件
var OpenBrowserPlugin = require('open-browser-webpack-plugin'); //webpack 启动后自动打开浏览器
var argv = require('yargs').argv; //可以用来开发自己的命令行工具集合
const PORT=12306; //测试环境配置自定义本地端口
const pro_sourceMap=false; //控制生产环境sourceMap
//判断当前运行环境是开发模式还是生产模式
const nodeEnv = process.env.NODE_ENV || 'development'; //默认是测试环境
const isPro = nodeEnv === 'production';
console.log(color.red("当前运行环境：" + (isPro ? 'production' : 'development')+" 构建时间："+(DateFormat.format(new Date()))));
var plugins = [
new ExtractTextPlugin({ //设置生成css 的路径和文件名，会自动将对应entry入口js文件中引入的CSS抽出成单独的文件
filename: 'css/[name].[hash:7].css'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function(module) {
// 该配置假定你引入的 vendor 存在于 node_modules 目录中
return module.context && module.context.indexOf('node_modules') !== -1;
}
}),
new webpack.DefinePlugin({
// 定义全局变量
'process.env': {
'NODE_ENV': JSON.stringify(nodeEnv)
}
}),
new webpack.ProvidePlugin({ //将jquery暴露给所有模块，其它模块不用再显式require('jquery')了；只要模块的代码中出现了$，webpack就会自动将jQuery注入。
// $: 'jquery'
}),
new WebPlugin({ //加载模板，插入css和js
filename: 'index.html',
requires: ['vendor','app'], //要加载的js文件
template: './index.html'
}),
new webpack.BannerPlugin("appver："+DateFormat.format(new Date())) //作用是给输出文件最顶部添加最后一次构建时间appver
]
var app = ['./index']
if(isPro) { //生产环境
plugins.push(
new webpack.optimize.UglifyJsPlugin({
sourceMap: pro_sourceMap,
beautify: false,
comments: false,
compress: {
warnings: false,
drop_console: true,
collapse_vars: true,
reduce_vars: true
}
}),
new AssetsPlugin()
)
} else { //测试环境
app.unshift('react-hot-loader/patch', 'webpack-dev-server/client?http://localhost:'+PORT, 'webpack/hot/only-dev-server')
plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new OpenBrowserPlugin({
url: 'http://localhost:'+PORT
}) //自动打开浏览器
)
}
module.exports = {
/*
基础目录，绝对路径，用于从配置中解析入口起点(entry point)和加载器(loader)
*/
context: path.resolve(__dirname, 'src'),
devtool: isPro ? 'source-map' : 'cheap-module-source-map',
entry: {
app: app
},
output: {
filename: 'js/[name].[hash:7].js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
// BASE_URL是全局的api接口访问地址
plugins,
// alias是配置全局的路径入口名称，只要涉及到下面配置的文件路径，可以直接用定义的单个字母表示整个路径
resolve: {
extensions: ['.js', '.jsx', '.less', '.scss', '.css'], // webpack2 不再需要一个空的字符串
modules: [
path.resolve(__dirname, 'node_modules'),
path.join(__dirname, './src')
]
},
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader?cacheDirectory=true'
}
}, {
test: /\.(less|css)$/,
use: ExtractTextPlugin.extract({ //开启css压缩
use: [{loader:"css-loader",options:{minimize: true}}, "less-loader", "postcss-loader"]
})
}, {
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: [
'url-loader?limit=10240&name=img/[name].[hash:7].[ext]'
]
}, {
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: [ //设置字体生成文件夹
'url-loader?limit=10240&name=font/[name].[hash:7].[ext]'
]
}
]
},
devServer: {
hot: true,
host: '127.0.0.1',
contentBase: path.resolve(__dirname, 'dist'),
publicPath: '/',
port: PORT
}
};
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent