Webpack

Program o nazwie webpack(1) potrafi wydobyć wszystkie użyte skrypty i budować z nich jeden skrypt - gotowy do wywołania na stronie.

Przykład instalacji webpack'a:

npm install --save-dev webpack

Webpack działa w oparciu o plik konfiguracyjny webpack.config.js

Jego strukturę opisuje strona: https://webpack.github.io/docs/configuration.html

Plik ten nie tworzy się automatycznie. Ale jego struktura nie jest zbyt skomplikowana.

Przykład:

var path = require('path');
var webpack = require('webpack');
.
module.exports = {
  entry: './helloworld.jsx',
  output: { path: __dirname, filename: 'helloworld.js' },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
};

Aby sobie ułatwić start, można użyć webpack-cli:

npm install webpack-cli
webpack-cli init

Gulp

Webpack można połączyć z Gulpem.

Najpierw upewniamy się, że Babel jest kompletny:

npm install --save-dev babel-cli babel-preset-es2015 babel-plugin-transform-react-jsx

potem tworzymy konfigurację webpack:

var path = require('path');
var webpack = require('webpack');
.
module.exports = {
  entry: './src/index.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      {
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
};

polecenie webpack tworzy skrypt bundle.js

Na koniec instalujemy gulpa ( npm install gulp gulp-webpack webpack-stream), tworzymy zadanie gulpa i wywołujemy: gulp.

Przykładowy plik gulpfile.js:

var gulp = require('gulp');
var webpack = require('webpack-stream');


var path = {
HTML: 'public/index.html',
DEST: 'dist',
DEST_JS: 'dist/js'
};


gulp.task('webpack', function() {
return gulp.src('src/index.js')
.pipe(webpack( require('./webpack.config.js') ))
.pipe(gulp.dest(path.DEST_JS));
});


gulp.task('html', function() {
return gulp.src(path.HTML)
.pipe(gulp.dest(path.DEST));
});

gulp.task('build', ['webpack', 'html'], function() {
console.log('Zbudowany!');
});
gulp.task('default', ['build']);

1 creator-react-app używa webpacka: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.dev.js