动手实践用Gulp+Webpack构建纯前端React应用
1.用Webpack打包React应用
安装依赖包
npm install react --save-dev
npm install react-dom --save-dev
npm install webpack --save-dev
npm install babel-loader --save-dev构建webpack.config.js配置文件
module.exports = {
entry:[
'./app/main.js'
],
output: {
path: __dirname + '/assets/',
publicPath: "/assets/",
filename: '.bundle.js'
},
resolve:{},
module: {
loaders: [
/*{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},*/{
test: /\.js$/,
loaders: ['babel-loader'],
include: __dirname + '/app/'
},
{ test: /\.jsx?$/, loaders: ['babel','jsx?harmony']}
]
},
plugins:[]
};
2.使用Gulp构建项目
构建 gulpfile.js 配置文件
var connect = require('gulp-connect');
var gulpWebpack = require('gulp-webpack');
var bower = require('gulp-bower');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');
var webpackConfig = require('./webpack.config');
gulp.task('bower', function() {
return bower('./bower_components')
.pipe(gulp.dest('./static/lib/'));
});
gulp.task('easy_webpack',function(){
gulp.src('./app/main.js')
.pipe(gulpWebpack(webpackConfig))
.pipe(uglify())
.pipe(gulp.dest('./assets/scripts/'))
});
gulp.task('easy_sass', function () {
return gulp.src(path.SASS + '/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./assets/styles/'));
});
gulp.task('easy_build',['bower','easy_webpack','easy_sass'], function () {});
gulp.task('staticserver', function() {
connect.server({
port:3333,
});
});
后续还在测试......
页:
[1]