react-todoMVC脚手架

• webpack.config.js

var path = require(‘path‘); // node中的 路径解析的模块const HtmlWebpackPlugin =require(‘html-webpack-plugin‘);module.exports = { ???//入口文件 ???entry:‘./src/app.js‘, ???//出口文件 ???output:{ ???????//出口文件名称 ???????filename:‘index.js‘, ???????// 出口文件路径 ???????path:path.resolve( __dirname , ‘dist‘ ) ???????,publicPath:"/" ???}, ???// webpack-dev-server 服务器目录 ???devServer: { ????contentBase: ‘./dist/‘ ???}, ???//插件 ???plugins:[ ???????// 自动在出口路劲生成 html文件， 函数可以接受一个对象：template为生成新html文件的模板文件 ???????new HtmlWebpackPlugin({ ???????????template:‘./src/index.html‘ ???????}) ???], ???// 模块处理 ???module:{ ???????//处理规则 ???????rules:[ ???????????//处理css ???????????{ ???????????????//匹配文件 ???????????????test:/\.css$/, ???????????????//使用的loader，处理顺序为从后向前处理 ???????????????use:[‘style-loader‘,‘css-loader‘] ???????????}, ???????????// 处理文件：img。。。 ???????????{ ???????????????//匹配文件 ???????????????test:/\.(png|jpg|gif)$/, ???????????????use:[{ ???????????????????loader:‘url-loader‘, ???????????????????//loader处理文件时的一些配置选项 ???????????????????options:{ ???????????????????????//大小限制 （以字节为单位）：小于这个限制的会转为 base64 ???????????????????????limit:1024 ???????????????????} ???????????????}] ???????????}, ???????????//处理react JSX 语法 和 ES6语法 ???????????{ ???????????????//匹配文件 ???????????????test:/\.js$/, ???????????????//排除 node_modules文件下的所有文件 ???????????????exclude: path.resolve( __dirname , ‘node_modules‘ ), ???????????????//使用的loader信息 ???????????????use:{ ???????????????????loader:‘babel-loader‘, ???????????????????options:{ ???????????????????????//使用的预设：env处理ES6语法 ， react处理JSX语法 , stage-0处理react对ES6部分语法不支持的问题 ???????????????????????presets:[ ‘env‘,‘react‘,‘stage-0‘] ???????????????????} ???????????????} ???????????} ???????] ???}}

• package.json

{ ?"name":"webpack-demo", ?"version":"1.0.0", ?"description":"", ?"main":"index.js", ?"scripts":{ ?????"webpack":"webpack", ?????"start":"webpack-dev-server --open" ?}, ?"author":"", ?"license":"ISC", ?"devDependencies":{ ?????"babel-cli":"^6.26.0", ?????"babel-core":"^6.26.0", ?????"babel-loader":"^7.1.2", ?????"babel-preset-env":"^1.6.1", ?????"babel-preset-react":"^6.24.1", ?????"babel-preset-stage-0":"^6.24.1", ?????"css-loader":"^0.28.7", ?????"file-loader":"^1.1.5", ?????"html-webpack-plugin":"^2.30.1", ?????"style-loader":"^0.19.0", ?????"url-loader":"^0.6.2", ?????"webpack":"^3.10.0", ?????"webpack-dev-server":"^2.9.7" ?}, ?"dependencies":{ ?????"react":"^16.2.0", ?????"react-dom":"^16.2.0" ?}}