------------------------------------------------------------------------
Webpack API
------------------------------------------------------------------------
const path = require('path');
const webpack = require('webpack');
------------------------------------------------------------------------
const config = {
------------------------------------------------------------------------
context: path.join(__dirname, 'source'), // Абсолютный путь до папки с файлом указанным в entry. По умолчанию равно process.cwd().
------------------------------------------------------------------------
entry: './index.js', // Исходный главный файл
entry: ['./library.js', './index.js'], // Последовательный набор, идущих друг за другом исходных файлов. Последний в списке файл главный.
entry: { // Несколько разных исходных главных файлов
page1: './index1.js', // Исходный главный файл для страницы 1
page2: ['./library.js', './index2.js'] // Исходный главный файл для страницы 2
},
------------------------------------------------------------------------
output: {
path: path.join(__dirname, '/home/proj/public/dist/[hash]'), // // Абсолютный путь до папки с итоговыми файлами.
publicPath: '/dist/[hash]', // Браузерный путь до папки, где лежат итоговый файлы. Предназначен для использования вместе с Webpack Dev Server.
filename: "[name].bundle.js", // Имя итогового файла
// [name] - имя итогового файла
// [hash] - хэш итогового файла
// [chunkhash] - хэш части сборки итогового файла
chunkFilename: "[id].bundle.js", // Имя итоговой части сборки
// [id] - идентификатор части сборки
// [name] - имя части сборки
// [hash] - хэш части сборки
// [chunkhash] - хэш части сборки
sourceMapFilename: "[file].map" // Имя файлов source map, размещаемых в папке output.path
// [file] - имя итогового JavaScript-файла
// [id] - идентификатор части сборки
// [hash] хэш итогового файла
pathinfo: false, // Включать ли в итоговую сборку комментарии синформацией о модулях: require(/* ./test */23)
library: 'lib.js' // Если задано, то итоговая сборка будет экспортирована как отдельная библиотека с указанным именем. Используется только, если вы хотите собрать отдельную библиотеку.
libraryTarget: "var" // В каком формате написать экспорт содержимого библиотеки? var Library = ...library code...;
umdNamedDefine: false //Если указана output.libraryTarget и в ней установлено "umd" и указано output.library, тогда установка данного значения в true создаст имя AMD модуля
sourcePrefix: "\t" // Записать перед каждой строчкой в итоговой сборке заданную строку
crossOriginLoading: "anonymous" // Включить cross-origin loading для частей сборки
devtoolModuleFilenameTemplate: "webpack:///[resource-path]?[loaders]" // Имяфайла шаблона для генерируемых файлов source map
devtoolLineToLine: false // генерировать source map, привязанный линией к линии к исходному файлу
hotUpdateChunkFilename: "[id].[hash].hot-update.js" // имя файла для частей с горячим обновлением, размещаемых в папке output.path
// [id] - идентификатор обновления
// [hash] - хэш обновления
hotUpdateMainFilename: "[hash].hot-update.json" // имя главного ффайла с горячим обновлением, размещаемиого в папке output.path
// [hash] - хэш сборки
jsonpFunction: "webpackJsonp" // Имя функци JSONP, используемой Webpack для асинхронной загрузки частей сборки
hotUpdateFunction: "webpackHotUpdate" // Имя функци JSONP, используемой Webpack для асинхронной загрузки обновлений частей сборки
},
------------------------------------------------------------------------
externals: { // Перечень модулей, которые не должны быть включены в итоговую сборку, а должны быть вынесены в отдельные файлы
{
a: false, // модуль a не будет вынесен во вне
b: true, // модуль b будет вынесен во вне `module.exports = b`
"./c": "c", // модуль "./c" будет вынесен во вне `module.exports = c`
"./d": "var d", // модуль "./d" будет вынесен во вне `module.exports = ./d` <-- здесь будет синтакическая ошибка
"./f": "commonjs ./a/b", // модуль "./f" будет вынесен во вне `module.exports = require("./a/b")`
"./f": "this ./a/b" // модуль "./f" будет вынесен во вне `(function() { module.exports = this["./a/b"]; }())`
},
/^[a-z\-0-9]+$/, // Каждый модуль не входящий в это выражение будет вынесен во вне abc -> require("abc")
function(context, request, callback) { // Какждый модуль, имеющий в своем имени префикс "global-" будет вынесен во вне "global-abc" -> abc
if(/^global-/.test(request)) {return callback(null, "var " + request.substr(7));}
callback();
},
"./e" // модуль "./e" будет вынесен во вне (require("./e"))
},
------------------------------------------------------------------------
module: { // Как загружать модули JavaScript в сборку
resolveLoader: { // Где искать загрузчики модулей
// Имеет такой же набор опций, что и resolve для файлов, но только для загрузчиков модулей, кроме moduleTemplates, которого у resolve нет
moduleTemplates: ["*-webpack-loader", "*-web-loader", "*-loader", "*"] // Массив с перечнем альтернативных имен для загрузчиков модулей
extensions: ["", ".webpack-loader.js", ".web-loader.js", ".loader.js", ".js"], // Массив расширений загрузчиков модулей
packageMains: ["webpackLoader", "webLoader", "loader", "main"] // Просматривать перечисленные свойства в файлах package.json для поиска загрузчиков модулей
root: path.join(__dirname, "node_modules") // Путь до папки в которой надо искать загрузчики модулей
modulesDirectories: ["web_loaders", "web_modules", "node_loaders", "node_modules"], // Массив имен папок внутри данной директории, в которых надо искать загрузчики модулей.
// Это подобие тому, как Node.js ищет папки с имене "node_modules". Обычно достаточно указать только область поиска в resolveLoader.root.
fallback: [ // Массив с перечнем директорий в которых нужно искать загрузчики модулей, если Webpack не обнаружит нужные загрузчики модулей в папках указананнх в resolveLoader.root и resolveLoader.modulesDirectories.
path.resolve('./some/modules'), // Все пути обязательно должны быть абсолютными!
path.resolve('./other/modules')
]
alias: { // Заменить имя загрузчика модуля на его полное имя
txt: 'raw-loader'
}
packageAlias: "browser" // Найти в файле package.json свойства с указанным именем и использовать его содержимое вместо resolveLoader.alias
unsafeCache: [/some.js/] // Включить небезопасное кэширование
}
resolve: { // Где искать исходные файлы для сборки
extensions: ["", ".webpack.js", ".web.js", ".js", ".json", ".coffee"] // Массив расширений исходных файлов которые надо включать в сборку
packageMains: ["webpack", "browser", "web", "browserify", ["jam", "main"], "main"] // Просматривать перечисленные свойства в файлах package.json для поиска исходных файлов для сборки
root: [ // Массив с перечнем директорий в которых нужно искать исходные файлы.
path.resolve('./app/modules'), // Все пути обязательно должны быть абсолютными!
path.resolve('./vendor/modules')
]
modulesDirectories: [ // Массив имен папок внутри данной директории, в которых надо искать исходные файлы.
// Это подобие тому, как Node.js ищет папки с имене "node_modules". Обычно достаточно указать только область поиска в resolve.root.
"web_modules",
"node_modules"
]
fallback: [ // Массив с перечнем директорий в которых нужно искать исходные файлы, если Webpack не обнаружит нужные исходные файлы в папках указананнх в resolve.root и resolve.modulesDirectories.
path.resolve('./some/modules'), // Все пути обязательно должны быть абсолютными!
path.resolve('./other/modules')
]
alias: { // Заменить имя модуля в импорте на путь до файла
main: "/absolute/path/to/file/main.js"
sum: "/absolute/path/to/file/sum.js"
}
packageAlias: "browser" // Найти в файле package.json свойства с указанным именем и использовать его содержимое вместо resolve.alias
unsafeCache: [/some.js/] // Включить небезопасное кэширование
}
noParse: [/\.ts$/, /\.tsx$/] // Не парсить перед сборкой файлы, перечисленные в данном массиве. Ожидается, что эти файлы сами ничего не импортирую. В них есть только экспорт exports и module.exports.
preLoaders: [ // Массив с перечнем используемых загрузчиков модулей JavaScript для предварительной обработки перед сборкой
test: test: /\.js$/, // Регулярное выражение для поиска файлов, загружаемых данным загрузчиком модулей
exclude: /node_modules/, // Регулярное выражение для поиска которые нельзя, загружаемых данным загрузчиком модулей
include: ['/source/file2.js', '/source/file3.js'] // Массив путей до файлов, которые тоже нужно загружать данным загрузчиком модулей
// Внимание! Webpack ищет загрузчики модулей относительно файла с конфигом. Если ваши загрузчики установлены в папке node_modules вне в родительской директории,
// то Webpack не сможет их сам найти.
// В этом случае необходимо добавить папку node_modules с модулями загрузчиками как абсолютный путь в опцию resolveLoader.root
loader: 'style-loader?mimetype=image/png!css-loader?mimetype=image/png' // Строка с перечнем модулей загрузчиков, используемых для загрузки данных типов файлов, разделенных знаком "!", и выполняющихся справа налево
query: { // Объект с перечнем настроек для loader, если он указан только один. В противном случае перечень настроек указывается внутри строки загрузчика.
mimetype: 'image/png'
}
// Используется или loader или loaders
loaders: [ // Массив с перечнем модулей загрузчиков, используемых для загрузки данных типов файлов, и выполняющихся с конца в начало
'style-loader?mimetype=image/png',
'css-loader?mimetype=image/png'
]
],
loaders: [ // Массив с перечнем используемых загрузчиков модулей JavaScript в сборку
test: test: /\.js$/, // Регулярное выражение для поиска файлов, загружаемых данным загрузчиком модулей
exclude: /node_modules/, // Регулярное выражение для поиска которые нельзя, загружаемых данным загрузчиком модулей
include: ['/source/file2.js', '/source/file3.js'] // Массив путей до файлов, которые тоже нужно загружать данным загрузчиком модулей
// Внимание! Webpack ищет загрузчики модулей относительно файла с конфигом. Если ваши загрузчики установлены в папке node_modules вне в родительской директории,
// то Webpack не сможет их сам найти.
// В этом случае необходимо добавить папку node_modules с модулями загрузчиками как абсолютный путь в опцию resolveLoader.root
loader: 'style-loader?mimetype=image/png!css-loader?mimetype=image/png' // Строка с перечнем модулей загрузчиков, используемых для загрузки данных типов файлов, разделенных знаком "!", и выполняющихся справа налево
query: { // Объект с перечнем настроек для loader, если он указан только один. В противном случае перечень настроек указывается внутри строки загрузчика.
mimetype: 'image/png'
}
// Используется или loader или loaders
loaders: [ // Массив с перечнем модулей загрузчиков, используемых для загрузки данных типов файлов, и выполняющихся с конца в начало
'style-loader?mimetype=image/png',
'css-loader?mimetype=image/png'
]
]
postLoaders: [ // Массив с перечнем используемых загрузчиков модулей JavaScript для обработки после сборки
test: test: /\.js$/, // Регулярное выражение для поиска файлов, загружаемых данным загрузчиком модулей
exclude: /node_modules/, // Регулярное выражение для поиска которые нельзя, загружаемых данным загрузчиком модулей
include: ['/source/file2.js', '/source/file3.js'] // Массив путей до файлов, которые тоже нужно загружать данным загрузчиком модулей
// Внимание! Webpack ищет загрузчики модулей относительно файла с конфигом. Если ваши загрузчики установлены в папке node_modules вне в родительской директории,
// то Webpack не сможет их сам найти.
// В этом случае необходимо добавить папку node_modules с модулями загрузчиками как абсолютный путь в опцию resolveLoader.root
loader: 'style-loader?mimetype=image/png!css-loader?mimetype=image/png' // Строка с перечнем модулей загрузчиков, используемых для загрузки данных типов файлов, разделенных знаком "!", и выполняющихся справа налево
query: { // Объект с перечнем настроек для loader, если он указан только один. В противном случае перечень настроек указывается внутри строки загрузчика.
mimetype: 'image/png'
}
// Используется или loader или loaders
loaders: [ // Массив с перечнем модулей загрузчиков, используемых для загрузки данных типов файлов, и выполняющихся с конца в начало
'style-loader?mimetype=image/png',
'css-loader?mimetype=image/png'
]
]
// Отключить обработку неизвестных require
unknownContextRegExp: /$^/,
unknownContextCritical: false,
// Отключить обработку require с единственным выражением
exprContextRegExp: /$^/,
exprContextCritical: false,
// Предупредить о каждом обнаруженном выражении в require
wrappedContextCritical: true
},
------------------------------------------------------------------------
plugins: [ // Массив с перечнем плагинов, вызываемых по очередние к содержимому итоговой сборки
new webpack.IgnorePlugin(/file\.js$/),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
output: {
comments: false
}
}),
new ComponentPlugin()
]
------------------------------------------------------------------------
target: 'web' // Скомпмилировать сборку для использования в браузере
------------------------------------------------------------------------
bail: true // Прервать сборку при обнаружении хоть одной ошибки
------------------------------------------------------------------------
profile: true // Получать информацию о времени сборки каждого модуля
------------------------------------------------------------------------
cache: true // Кэшировать сборку для ускорения пересборки
------------------------------------------------------------------------
debug: true // Переключить работу загрузчиков модулей в режим отладки
------------------------------------------------------------------------
watch: true // Отслеживать изменения файлов и запускать пересборку
------------------------------------------------------------------------
devtool: 'eval' // В какмо виде произовдить сборку source map
------------------------------------------------------------------------
devServer: { // конфиг для webpack-dev-server
contentBase: "./build",
}
------------------------------------------------------------------------
node: { // Включать ли набор разных полифилов для кода Node.js
console: false,
global: true,
process: true,
Buffer: true,
__filename: "mock",
__dirname: "mock",
setImmediate: true
}
------------------------------------------------------------------------
amd: { // Установить значения для require.amd и define.amd для:
jQuery: true
}
------------------------------------------------------------------------
};
------------------------------------------------------------------------
// Компиляция через команду webpack
module.exports = config;
------------------------------------------------------------------------
или
------------------------------------------------------------------------
// Компиляция через Node.js короткий способ
webpack(config, function (error, stats) {
console.log(error); // => fatal compiler error (rar)
var json = stats.toJson() // => webpack --json
console.log(json.errors); // => array of errors
console.log(json.warnings); // => array of warnings
console.log('Done');
}
);
------------------------------------------------------------------------
или
------------------------------------------------------------------------
// Компиляция через Node.js длинный способ
const compiler = webpack(config);
compiler.run(function(error, stats) {
console.log(stats.hasErrors());
console.log(stats.hasWarnings());
console.log(error); // => fatal compiler error (rar)
var json = stats.toJson({chunks: false, hash: true ...}) // => webpack --json
console.log(json.errors); // => array of errors
console.log(json.warnings); // => array of warnings
console.log(stats.toString({
chunks: false, // Makes the build much quieter
colors: true
}));
console.log('Done');
});
// или
const watchOptions = {
aggregateTimeout: 300, // после внесения любого изменения в файл подождать 300 секунд перед началом сборки. Вдруг еще изменения будут.
poll: true // использовать polling вместо native watchers
// можно передать число для установки polling interval
};
const watcher = compiler.watch(watchOptions, function (error, stats) {
console.log(error); // => fatal compiler error (rar)
var json = stats.toJson() // => webpack --json
console.log(json.errors); // => array of errors
console.log(json.warnings); // => array of warnings
console.log('Done');
}
);
watcher.close(function () {console.log('Watcher stoped ');}); // Остановка отслеживания изменений в файлах
------------------------------------------------------------------------
// Dev Server
var WebpackDevServer = require("webpack-dev-server");
var webpack = require("webpack");
var fs = require("fs");
var compiler = webpack({
// configuration
});
var server = new WebpackDevServer(compiler, {
// webpack-dev-server options
contentBase: "/path/to/directory",
// Can also be an array, or: contentBase: "http://localhost/",
hot: true,
// Enable special support for Hot Module Replacement
// Page is no longer updated, but a "webpackHotUpdate" message is sent to the content
// Use "webpack/hot/dev-server" as additional module in your entry point
// Note: this does _not_ add the `HotModuleReplacementPlugin` like the CLI option does.
historyApiFallback: {
rewrites: [
// shows views/landing.html as the landing page
{ from: /^\/$/, to: '/views/landing.html' },
// shows views/subpage.html for all routes starting with /subpage
{ from: /^\/subpage/, to: '/views/subpage.html' },
// shows views/404.html on all other pages
{ from: /./, to: '/views/404.html' },
],
},
// Set this as true if you want to access dev server from arbitrary url.
// This is handy if you are using a html5 router.
compress: true,
// Set this if you want to enable gzip compression for assets
proxy: {
"**": "http://localhost:9090"
},
// Set this if you want webpack-dev-server to delegate a single path to an arbitrary server.
// Use "**" to proxy all paths to the specified server.
// This is useful if you want to get rid of 'http://localhost:8080/' in script[src],
// and has many other use cases (see https://github.com/webpack/webpack-dev-server/pull/127 ).
setup: function(app) {
// Here you can access the Express app object and add your own custom middleware to it.
// For example, to define custom handlers for some paths:
// app.get('/some/path', function(req, res) {
// res.json({ custom: 'response' });
// });
},
// pass [static options](http://expressjs.com/en/4x/api.html#express.static) to inner express server
staticOptions: {
},
clientLogLevel: "info",
// Control the console log messages shown in the browser when using inline mode. Can be `error`, `warning`, `info` or `none`.
// webpack-dev-middleware options
quiet: false,
noInfo: false,
lazy: true,
filename: "bundle.js",
watchOptions: {
aggregateTimeout: 300,
poll: 1000
},
// It's a required option.
publicPath: "/assets/",
headers: { "X-Custom-Header": "yes" },
stats: { colors: true },
https: {
cert: fs.readFileSync("path-to-cert-file.pem"),
key: fs.readFileSync("path-to-key-file.pem"),
cacert: fs.readFileSync("path-to-cacert-file.pem")
}
});
server.listen(8080, "localhost", function() {});
// server.close();
------------------------------------------------------------------------
// Dev Server Middleware
const webpackDevMiddleware = require("webpack-dev-middleware");
const webpack = require("webpack");
const compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
filename: config.output.filename
watchOptions: {
aggregateTimeout: 300
poll: true
}
noInfo: true
quiet: false
lazy: false
stats: true
headers: {
"X-Custom-Header": "yes"
}
}));
------------------------------------------------------------------------
==================================================================
==================================================================
const webpack = require('webpack');
const ComponentPlugin = require('component-webpack-plugin');
module.exports = {
==================================================================
entry: './src/app.js',
entry: {
beep: './beep.js',
boop: './boop.js',
},
entry: {
app: './app.js',
vendor: ['jquery', 'underscore', ...]
},
output: {
filename: 'bundle.js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin(/* entry= */'vendor', /* filename= */'vendor.bundle.js')
]
<script src='vendor.bundle.js'></script>
<script src='bundle.js'></script>
module.exports = {
entry: {
a: './a',
b: './b'
},
output: {
filename: '[name].js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('init.js')
]
}
<script src='init.js'></script>
<script src='a.js'></script>
<script src='b.js'></script>
==================================================================
output: { // './bin/app.bundle.js'
path: './bin',
filename: 'app.bundle.js' // '[name].bundle.js'
=============================
path: path.join(__dirname, 'assets', '[hash]'),
publicPath: 'assets/[hash]/',
filename: 'output.[hash].bundle.js',
chunkFilename: '[id].[hash].bundle.js'
},
output: {
libraryTarget: 'var', // export itself to a global var
library: 'Foo' // name of the global var: 'Foo'
},
externals: {
jquery: 'jQuery' // require('jquery') is external and available on the global var jQuery
}
==================================================================
resolve: {
extensions: ['', '.js', '.coffee'],
fallback: path.join(__dirname, 'node_modules')
},
resolveLoader: {
fallback: path.join(__dirname, 'node_modules')
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?mimetype=image/png'
},
{
test: /\.css$/,
loaders: [
'style-loader?mimetype=image/png',
'css-loader?mimetype=image/png'
]
},
{
test: /\.png$/,
loader: 'url-loader',
query: {
mimetype: 'image/png'
}
},
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loaders: [{
loader: 'babel-loader',
query: {
cacheDirectory: true
}
}
]
},
plugins: [
new webpack.IgnorePlugin(/file\.js$/),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
output: {
comments: false
}
}),
new ComponentPlugin()
]
};
==================================================================
var webpack = require('webpack');
webpack(
{
entry: './main.js',
output: {
filename: 'bundle.js'
}
}
, function(err, stats) {
console.log(err); // => fatal compiler error (rar)
var json = stats.toJson() // => webpack --json
console.log(json.errors); // => array of errors
console.log(json.warnings); // => array of warnings
}
);
==================================================================
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
posts: './posts',
post: './post',
about: './about'
},
output: {
filename: '[name].js',
chunkFilename: '[id].js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader')
}
]
},
plugins: [
new ExtractTextPlugin('[name].css')
]
}
Output files:
posts.js
posts.css
post.js
post.css
about.js
about.css
Styles in Commons Chunk
// ...
module.exports = {
// ...
plugins: [
new webpack.optimize.CommonsChunkPlugin('commons', 'commons.js'),
new ExtractTextPlugin('[name].css')
]
}
Output files:
commons.js
commons.css
posts.js
posts.css
post.js
post.css
about.js
about.css
==================================================================
var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
module.exports = {
entry: {
p1: './page1',
p2: './page2',
p3: './page3',
ap1: './admin/page1',
ap2: './admin/page2'
},
output: {
filename: '[name].js'
},
plugins: [
new CommonsChunkPlugin('admin-commons.js', ['ap1', 'ap2']),
new CommonsChunkPlugin('commons.js', ['p1', 'p2', 'admin-commons.js'])
]
};
// <script>s required:
// page1.html: commons.js, p1.js
// page2.html: commons.js, p2.js
// page3.html: p3.js
// admin-page1.html: commons.js, admin-commons.js, ap1.js
// admin-page2.html: commons.js, admin-commons.js, ap2.js
Комментариев нет:
Отправить комментарий