Działa świetnie z modułami:
UMD
AMD
CommonJS
ECMAScript 2015
define(['jquery'], function ($) {…var jquery = require('jquery');import $ from 'jquery';Wystarczy zainstalować:
npm install jquery --save+ Łatwa integracja z Bower
Trzy główne koncepcje
Entry points: Pliki, które zostaną wykonane zaraz po załadowaniu strony i ich zależności są analizowane.
np. init/main.js init/contacts.js init/map.js
Loaders: Transformuje każdy ładowany plik źródłowy na formę zrozumiałą dla przeglądarki lub skryptu.
np. sexyTabs.ts → sexyTabs.js menu.handlebars → menu.js
Plugins: Działają na poziomie kompilacji i modyfikują sposób jego działania.
np. CommonsChunkPlugin OfflinePlugin DefinePlugin
Konfiguracja
- Command Line Interface
var webpack = require("webpack");
webpack(config, callback);~$ webpack src/app.js dist/bundle.js// webpack.config.js
module.exports = {
// configuration
};Webpack może być uruchomiony za pomocą:
- Webpack API (NodeJS) - idealny dla gulp, grunt itd.
- Plik konfiguracyjny
Konfiguracja
To teraz trochę kodu…
{
entry: {
libs: ['es6-shim', 'zone.js', 'reflect-metadata', 'angular2/angular2'],
app: './src/app.ts',
},
output: {
filename: '[name].js'
},
resolve: {
extensions: ['', '.ts', '.js']
},
module: {
loaders: [{test: /\.ts$/, loader: 'ts-loader'}]
},
plugins: [
new OccurenceOrderPlugin(),
new CommonsChunkPlugin({
name: 'libs',
filename: 'libs.js',
minChunks: Infinity
})
],
}Odpalamy
I…
Tak
Czy jest możliwa migracja z require.js do webpack?
Dzięki!
webpack
By Kacper Kozak
