搜索
热搜
活动 交友 discuz
发新帖
返回列表
查看 1194
回复 0
动手实践用Gulp+Webpack构建纯前端React应用
复制链接
逆风天

16

主题

0

回帖

105

积分
超级版主
积分105
发消息
发表于 2021-12-4 20:04:46
显示全部楼层 阅读模式

1.用Webpack打包React应用
安装依赖包
  1. npm install react --save-dev
  2. npm install react-dom --save-dev
  3. npm install webpack --save-dev
  4. npm install babel-loader --save-dev
复制代码
构建webpack.config.js配置文件
  1. module.exports = {
  2.     entry:[
  3.         './app/main.js'
  4.     ],
  5.     output: {
  6.         path: __dirname + '/assets/',
  7.         publicPath: "/assets/",
  8.         filename: '[name].bundle.js'
  9.     },
  10.     resolve:{},
  11.     module: {
  12.         loaders: [
  13.             /*{
  14.                 test: /\.scss$/,
  15.                 loaders: ["style", "css", "sass"]
  16.             },*/{
  17.                 test: /\.js$/,
  18.                 loaders: ['babel-loader'],
  19.                 include: __dirname + '/app/'
  20.             },
  21.             { test: /\.jsx?$/, loaders: ['babel','jsx?harmony']}
  22.         ]
  23.     },
  24.     plugins:[]
  25. };
复制代码

2.使用Gulp构建项目
构建 gulpfile.js 配置文件
  1. var connect = require('gulp-connect');
  2. var gulpWebpack = require('gulp-webpack');
  3. var bower = require('gulp-bower');
  4. var uglify = require('gulp-uglify');
  5. var sass = require('gulp-sass');
  6. var webpackConfig = require('./webpack.config');

  8. gulp.task('bower', function() {
  9.     return bower('./bower_components')
  10.         .pipe(gulp.dest('./static/lib/'));
  11. });

  13. gulp.task('easy_webpack',function(){
  14.     gulp.src('./app/main.js')
  15.         .pipe(gulpWebpack(webpackConfig))
  16.         .pipe(uglify())
  17.         .pipe(gulp.dest('./assets/scripts/'))
  18. });

  20. gulp.task('easy_sass', function () {
  21.     return gulp.src(path.SASS + '/**/*.scss')
  22.         .pipe(sass().on('error', sass.logError))
  23.         .pipe(gulp.dest('./assets/styles/'));
  24. });

  26. gulp.task('easy_build',['bower','easy_webpack','easy_sass'], function () {});

  28. gulp.task('staticserver', function() {
  29.     connect.server({
  30.         port:3333,
  31.     });
  32. });
复制代码

后续还在测试......


回复
举报
发新帖
返回列表
高级模式
您需要登录后才可以回帖 登录 立即注册
本版积分规则
QQ 快速回复 返回列表