├── .gitignore ├── README.md ├── build ├── css │ └── main.css ├── js │ └── main.js └── main.html ├── gulpfile.js ├── npm-debug.log.2730103709 ├── package.json ├── pages └── main │ ├── index.html │ ├── index.js │ └── index.less └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | 3 | node_modules/ 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-webpack 2 | react+webpack+gulp开发环境搭建 3 | 执行命令： 4 | ``` 5 | git clone http://...... 6 | 7 | ``` 8 | ``` 9 | cd react-webpack 10 | ``` 11 | ``` 12 | cnpm install 13 | ``` 14 | 15 | ``` 16 | gulp 17 | ``` 18 | 19 | ``` 20 | or 21 | ``` 22 | 23 | ``` 24 | gulp prod 25 | ``` 26 | 27 | gulp webpack-dev-server实时刷新页面方便开发在开发中执行 gulp 28 | 生产执行 gulp prod 打包文件 29 | 30 | 喜欢的宝宝记得star 关注 31 | 哪里不懂可联系我 32 | 交流QQ群：581861141 222765505 33 | -------------------------------------------------------------------------------- /build/css/main.css: -------------------------------------------------------------------------------- 1 | body{background:red} -------------------------------------------------------------------------------- /build/main.html: -------------------------------------------------------------------------------- 1 |

-------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var gutil = require('gulp-util'); 3 | var clean = require('gulp-clean'); 4 | var webpack = require('webpack'); 5 | var webpackDevServer = require('webpack-dev-server'); 6 | var webpackConfig = require('./webpack.config.js'); 7 | 8 | 9 | gulp.task('default',['webpack-dev-server'],function(callback){ 10 | callback() 11 | }) 12 | 13 | gulp.task('webpack-dev-server',function(callback){ 14 | var port = webpackConfig.devServer.port; 15 | var host = webpackConfig.devServer.host; 16 | 17 | //由于inline模式只有通过webpack-dev-server命令启动时才会起作用，所以执行这个任务启动时无法实现自动刷新； 18 | //为了能够实现自动刷新，webpack官网给的方案就是为每个entry增加一个配置； 19 | for(var key in webpackConfig.entry){ 20 | webpackConfig.entry[key].unshift("webpack-dev-server/client?http://"+host+":"+port); 21 | } 22 | 23 | new webpackDevServer(webpack(webpackConfig),webpackConfig.devServer). 24 | listen(port,host,function(err){ 25 | if(err){ 26 | console.log('gulpfile.js:::::'+err); 27 | return false; 28 | } 29 | gutil.log('[webpack-dev-server]', 'http://127.0.0.1:' + port + '/[your-page-name]'); 30 | gutil.log('[webpack-dev-server]', 'or'); 31 | gutil.log('[webpack-dev-server]', 'http://127.0.0.1:' + port + '/webpack-dev-server/[your-page-name]'); 32 | callback(); 33 | }) 34 | }) 35 | 36 | gulp.task('prod',['clean','webpack'],function(callback){ 37 | callback(); 38 | }) 39 | 40 | gulp.task('webpack',function(callback){ 41 | webpack(webpackConfig,function(err,stats){ 42 | if(err){ 43 | gutil.log("webpack:"+err); 44 | return false; 45 | } 46 | gutil.log('[webpack:build]', stats.toString({ 47 | chunks: false, // Makes the build much quieter 48 | colors: true 49 | })); 50 | callback(); 51 | }) 52 | }) 53 | 54 | gulp.task('clean',function(cb){ 55 | gulp.src([webpackConfig.output.path]).pipe(clean({force:true})); 56 | cb(); 57 | }) -------------------------------------------------------------------------------- /npm-debug.log.2730103709: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gourdbaby/react-webpack/70ca082ee33374b85243a370a02efe7247805a5e/npm-debug.log.2730103709 -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react", 3 | "version": "1.0.0", 4 | "description": "test", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "webpack-dev-server", 9 | "build": "webpack" 10 | }, 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "css-loader": "^0.28.4", 15 | "extract-text-webpack-plugin": "^2.1.2", 16 | "gulp": "^3.9.1", 17 | "gulp-util": "^3.0.7", 18 | "gulp-clean": "^0.3.2", 19 | "html-webpack-plugin": "^2.28.0", 20 | "jquery": "^1.12.4", 21 | "less": "^2.7.2", 22 | "less-loader": "^4.0.4", 23 | "react": "^15.6.1", 24 | "react-dom": "^15.6.1", 25 | "webpack": "^2.6.1", 26 | "webpack-dev-server": "^2.4.5" 27 | }, 28 | "devDependencies": { 29 | "babel-core": "^6.25.0", 30 | "babel-loader": "^7.0.0", 31 | "babel-preset-es2015": "^6.24.1", 32 | "babel-preset-react": "^6.24.1" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /pages/main/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |

10 | 11 | -------------------------------------------------------------------------------- /pages/main/index.js: -------------------------------------------------------------------------------- 1 | require('./index.less'); 2 | 3 | class HelloWorld extends React.Component { 4 | render() { 5 | return ( 6 |

H？？？6666dsadsadasdsa555/

7 | ); 8 | } 9 | } 10 | 11 | ReactDOM.render(, document.getElementById('app')); -------------------------------------------------------------------------------- /pages/main/index.less: -------------------------------------------------------------------------------- 1 | body{ 2 | background: red; 3 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 2 | var path = require('path'); 3 | var webpack = require('webpack'); 4 | var extractTextPlugin = require('extract-text-webpack-plugin'); //单独出来文件 5 | var htmlWebpackPlugin = require('html-webpack-plugin'); 6 | var glob = require('glob'); 7 | 8 | var extractCss = new extractTextPlugin('css/[name].css'); 9 | 10 | var config = { 11 | entry:{}, 12 | output:{ 13 | path:path.join(__dirname,'build'), 14 | filename:'js/[name].js' 15 | }, 16 | module:{ 17 | rules:[{ 18 | test: /\.jsx?$/, 19 | exclude: path.resolve(__dirname,'node_modules/'), 20 | use: { 21 | loader:'babel-loader', 22 | options:{ 23 | presets: ['es2015','react'] 24 | } 25 | } 26 | },{ 27 | test:/\.less$/, 28 | use:extractCss.extract({ 29 | use: [{ 30 | loader: "css-loader", 31 | options:{ 32 | minimize: true 33 | } 34 | }, { 35 | loader: "less-loader" 36 | }] 37 | }) 38 | }] 39 | }, 40 | plugins: [ 41 | extractCss, 42 | new webpack.ProvidePlugin({ 43 | //一般如果我们要在某个模块中使用jquery这个模块的话要这样写：var $=require('jquery'); 44 | //某些第三方库可能也直接依赖了jquery； 45 | //而我们通过ProvidePlugin这个插件的话就不需要自己引用jquery模块了，插件会自动帮我们引用; 46 | //ProvidePlugin插件将会把jquery模块的module.exports赋值给$; 47 | //所以，我们直接在模块中使用$就行了。 48 | '$': 'jquery', 49 | 'React': 'react', 50 | 'ReactDOM': 'react-dom', 51 | }) 52 | ], 53 | devServer: { 54 | inline: true, 55 | host: '0.0.0.0', 56 | port: 8080, 57 | publicPath: '/', 58 | stats: { 59 | colors: true 60 | } 61 | } 62 | } 63 | 64 | var entrys = path.join(__dirname,'pages/'); 65 | var entries = glob.sync(entrys + '*').map(function(entry) { 66 | return { 67 | name: path.basename(entry), 68 | path: entry 69 | } 70 | }); 71 | console.log(entries) 72 | entries.forEach(function(entry) { 73 | //添加entry 74 | config.entry[entry.name] = [entry.path]; 75 | 76 | //生成html 77 | config.plugins.push(new htmlWebpackPlugin({ 78 | filename: entry.name + '.html', 79 | template: entry.path + '/index.html', 80 | chunks: [entry.name,'common'], 81 | hash: true, 82 | minify: { 83 | removeComments: true, 84 | collapseWhitespace: true 85 | } 86 | })); 87 | }); 88 | 89 | module.exports = config; --------------------------------------------------------------------------------