查看 192
回复 0
动手实践用Gulp+Webpack构建纯前端React应用 复制链接
发表于 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

  5.    

  

  复制代码

构建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. };

  26.    

  

  复制代码


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');

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

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

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

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

  23. gulp.task('staticserver', function() {
  24.     connect.server({
  25.         port:3333,
  26.     });
  27. });

  28.    

  

  复制代码


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


您需要登录后才可以回帖

登录

Or

立即注册

在线咨询 快速回复 返回列表