------------------------------------------------------------------------
Webpack 2 API
------------------------------------------------------------------------
Комментарии
Файлы с модулями ищутся во всех директориях, перечисленных в массиве resolve.modules = []
С помощью объекта resolve.alias = {} можно указать альтернативный путь к файлу модуля, которые заменит его путь, указанный в импорте.
Если путь к файлу модулю указанный в импорте имеет расширение файла, то загружается сразу.
Если в пути расширение не указано, то проверяется перечень расширений файлов, указанных в массиве resolve.extensions = ['.js', '.jsx']
и загружается файл, соотвествующий первому найденному расширению.
Если путь в импорте указывает на директорию, то в ней ищется файл package.json, внутри которого ищутся пути указанные в resolve.mainFields,
если такой путь найден, то он берется, как путь до файла, в противном случае ищутся пути, указанные в resolve.mainFiles и, если такой путь найден,
то он становится путем до файла. Раширение файла берется из resolve.extensions.
Такой же принцип поиска файлов и у загрузчиков модулей.
module.preLoaders и module.postLoaders были удалены. Взамен их в rules надо указывать свойство enforce: "pre"
Плагин webpack.optimize.DedupePlugin был удален
Плагин BannerPlugin принимает теперь только 1 объект вместо 2-х параметров
Конфиги к лоадерам теперь надо указывать внутри rules:
module: {
rules: [{
test: /\.tsx?$/,
loader: 'ts-loader'
options: {transpileOnly: false} // work with webpack 2
}]
},
// does not work with webpack 2
ts: {transpileOnly: false}
------------------------------------------------------------------------
Запуск сборки через package.json
npm start
"scripts": {
"start": "webpack --progress --watch --config webpack.config.js webpack-dev-server --open"
}
// Dev Server start at http://localhost:8080
------------------------------------------------------------------------
const path = require('path');
const webpack = require('webpack'); // импорт wepack для получения доступа к встроенным в Webpack плагинам
const HtmlWebpackPlugin = require('html-webpack-plugin'); // импорт отдельно установленного плагина для Webpack
------------------------------------------------------------------------
const config = {
------------------------------------------------------------------------
context: path.join(__dirname, 'source'), // Базовая директория - абсолютный путь для поиска исходного главного файла entry и загрузчиков модулей
// Абсолютный путь до папки с файлом указанным в entry. По умолчанию равно process.cwd(). А также исходная точка для поиска загрузчиков модулей module.rules.loader
------------------------------------------------------------------------
entry: './index.js', // Исходный главный файл (string | object | array)
entry: ['./library.js', './index.js'], // Последовательный набор, идущих друг за другом исходных файлов, которые будут объединены в 1 общий фыайл. Последний в списке файл главный и только он экспортируется в output.
entry: { // Несколько разных исходных главных файлов
page1: './index1.js', // Исходный главный файл для страницы 1
page2: ['./library.js', './index2.js'] // Исходный главный файл для страницы 2
},
------------------------------------------------------------------------
output: {
path: path.join(__dirname, '/home/proj/public/dist/[hash]'), // Только абсолютный путь до папки с итоговыми файлами. (string)
publicPath: '/dist/[hash]', // Например "https://cdn.example.com/assets/" - Браузерный путь до папки, где лежат итоговый файлы. Предназначен для использования вместе с Webpack Dev Server. (string)
publicPath: "https://cdn.example.com/assets/", // CDN (always HTTPS)
publicPath: "//cdn.example.com/assets/", // CDN (same protocol)
publicPath: "/assets/", // server-relative
publicPath: "assets/", // relative to HTML page
publicPath: "../assets/", // relative to HTML page
publicPath: "", // relative to HTML page (same directory)
pathinfo: true // Включить в сборку информацию откуда взялся каждый модуль
filename: "[name].bundle.js", // Имя итогового файла (string)
// [id] - идентификатор модуля
// [name] - имя итогового файла
// [hash] - хэш итогового файла
// [chunkhash] - хэш части сборки итогового файла
// [filebase] - базовое имя файла
// [file] - имя файла
// [query] - что-то что следует после ? в имени файла
chunkFilename: "[id].bundle.js", // Имя итоговой части сборки
// [id] - идентификатор части сборки
// [name] - имя части сборки
// [hash] - хэш части сборки
// [chunkhash] - хэш части сборки
sourceMapFilename: "[file].map" // Имя файлов source map, размещаемых в папке output.path
// [file] - имя итогового JavaScript-файла
// [id] - идентификатор части сборки
// [hash] хэш итогового файла
// [contenthash] заменен на hashфайла (в webpack 3.0.0).
sourcePrefix: "\t" // Изменить префикс у каждой линии сборки итогового файла
strictModuleExceptionHandling: false
hashDigest: 'hex' // Используемый алгоритм для создания хэшей [hash]
hashDigestLength: 20 // Длина создаваемых хэшей [hash]
hashFunction: 'md5' // Используемая функция для создания хэшей [hash]
hashSalt: '' // Соль для создания хэшей [hash]
chunkLoadTimeout: 120000 // Число миллисекунд до того, как chunk устареет
library: 'lib.js' // Если задано, то итоговая сборка будет экспортирована как отдельная библиотека с указанным именем. Используется только, если вы хотите собрать отдельную библиотеку. (string)
libraryTarget: "var" // В каком формате написать экспорт содержимого библиотеки? var Library = ...library code...; (string)
libraryExport: '' // Позволяет задать export для библиотеки
umdNamedDefine: true // При указании libraryTarget: "umd" именует модуль UMD сборки
crossOriginLoading: "anonymous" // Включить cross-origin loading для частей сборки
devtoolModuleFilenameTemplate: "webpack:///[resource-path]?[loaders]" // Имя файла шаблона для генерируемых файлов source map
devtoolFallbackModuleFilenameTemplate: "" // Имя файла шаблона когда происходит дублирование
devtoolLineToLine: { // генерировать source map, привязанный линией к линии к исходному файлу Данная опция больше не используется
test: test: /\.js$/, // Регулярное выражение для поиска файлов, для которых будет произведено создание sourve map
exclude: /node_modules/, // Регулярное выражение для поиска файлов, для которых не будет произведено создание sourve map
include: ['/source/file2.js', '/source/file3.js'] // Массив путей до файлов, которые тоже нужно созданить source map
}
hotUpdateChunkFilename: "[id].[hash].hot-update.js" // Имя файла для частей с горячим обновлением, размещаемых в папке output.path
// [id] - идентификатор обновления
// [hash] - хэш обновления
hotUpdateMainFilename: "[hash].hot-update.json" // имя главного файла с горячим обновлением, размещаемиого в папке output.path
// [hash] - хэш сборки
hotUpdateFunction: "webpackHotUpdate" // Имя функци JSONP, используемой Webpack для асинхронной загрузки обновлений частей сборки
jsonpFunction: '' // Используется только если установлена target: 'web' - имя функции для асинхронной загрузки chunks
}
------------------------------------------------------------------------
externals: { // Перечень модулей, которые не должны быть включены в итоговую сборку, а должны быть вынесены в отдельные файлы, которые будут загружаться отдельно через <script>
"lodash": {
commonjs: "lodash",
commonjs2: "lodash",
amd: "lodash",
root: "_"
}
{
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"))
subtract: ['./math', 'subtract']
},
-------------------------------------------
externals: [
'react',
'react-dom'
'library/A',
'library/B',
/^library\/.+$/ // everything that starts with "library/"
]
------------------------------------------------------------------------
module: { // Объект со списком загрузчиков модулей
------------------------------------------------------------------------
-------------------------------------------
// Набор общих опций
exprContextCritical: true,
exprContextRecursive: true,
exprContextRegExp: false,
exprContextRequest: ".",
unknownContextCritical: true,
unknownContextRecursive: true,
unknownContextRegExp: false,
unknownContextRequest: ".",
wrappedContextCritical: false
wrappedContextRecursive: true,
wrappedContextRegExp: /.*/,
strictExportPresence: false // since webpack 2.3.0
------------------------------------------------------------------------
resolveLoader: { // Где искать загрузчики модулей
// Имеет такой же набор опций, что и resolve для файлов, но только для загрузчиков модулей
moduleExtensions: ['-loader'] // Массив расширений загрузчиков модулей
enforceExtension: true // Запретить указывать пути файлов без расширений файлов
modules: [path.join(__dirname, 'src'), 'node_modules'] // Массив имен папок внутри данной директории, в которых надо искать загрузчикимодулей.
enforceModuleExtension: true // Использовать расширения для модулей загрузчиков
alias: { // Заменить имя загрузчика модуля на его полное имя
txt: 'raw-loader'
}
aliasFields: ["browser"] // Указать поле, которое будет обработано парсером
descriptionFiles: ["package.json"] // JSON файлы, которые будут использованы для descriptions
mainFields: ["browser", "module", "main"] // искать пути к модулям в указанных полях файлов package.json: {...main: 'build/d3.Node.js', browser: 'build/d3.js', module: 'index', ...}
mainFiles: ["index"] // Поиск фалов с данными исенами, если вместо пути к файлу указан путь к директории
unsafeCache: true // Включить небезопасное кэширование модулей
cachePredicate: function() { return true } // Функция определяющая стоит ли кэшировать запрос
plugins: [new DirectoryNamedWebpackPlugin()] // Наборе плагинов для поиска файлов модулей
symlinks: true // Искать файлы по ссылкам ярлыкам
}
------------------------------------------------------------------------
resolve: { // Где искать исходные файлы для сборки
extensions: ['.ts', '.js', '.json'] // Массив расширений исходных файлов которые надо включать в сборку
enforceExtension: true // Запретить указывать пути файлов без расширений файлов
modules: [path.join(__dirname, 'src'), 'node_modules'] // Массив имен папок внутри данной директории, в которых надо искать исходные файлы.
enforceModuleExtension: true // Использовать расширения для модулей загрузчиков
alias: { // Заменить имя модуля в импорте на путь до файла
jquery: "jquery/src/jquery"
}
aliasFields: ["browser"] // Указать поле, которое будет обработано парсером
descriptionFiles: ["package.json"] // JSON файлы, которые будут использованы для descriptions
mainFields: ["browser", "module", "main"] // искать пути к модулям в указанных полях файлов package.json: {...main: 'build/d3.Node.js', browser: 'build/d3.js', module: 'index', ...}
mainFiles: ["index"] // Поиск фалов с данными исенами, если вместо пути к файлу указан путь к директории
unsafeCache: true // Включить небезопасное кэширование модулей
cachePredicate: function() { return true } // Функция определяющая стоит ли кэшировать запрос
plugins: [new DirectoryNamedWebpackPlugin()] // Наборе плагинов для поиска файлов модулей
symlinks: true // Искать файлы по ссылкам ярлыкам
},
noParse: [/\.ts$/, /\.tsx$/] // Не парсить перед сборкой файлы, перечисленные в данном массиве. Ожидается, что эти файлы сами ничего не импортирую. В них есть только экспорт exports и module.exports.
rules: [ // Массив загрузчиков модулей загружающие файлы во время сборки итогового файла
// Внимание! Webpack ищет загрузчики модулей относительно файла с конфигом. Если ваши загрузчики установлены в папке node_modules вне в родительской директории,
// то Webpack не сможет их сам найти.
{
test: /\.txt$/, // Какие файлы должен загружать данный загрузчик модулей
use: 'raw-loader' // Какой загрузчик модулей должен загружать данные файлы
// loader: 'raw-loader' // Альтернатива use - Какой загрузчик модулей должен загружать данные файлы
options: { // Набор опций для данного загрузчика модулей
presets: ["es2015"]
},
include: [// Массив путей до файлов, которые тоже нужно загружать данным загрузчиком модулей
path.resolve(__dirname, "app") // Только абсолютные пути
],
exclude: [ // Массив путей до файлов, которые ненужно загружать данным загрузчиком модулей
path.resolve(__dirname, "app/demo-files") // Только абсолютные пути
],
issuer: { test, include, exclude }, // условия дляissuer (the origin of the import)
enforce: "pre" // Загрузчик модулей только для предварительной обработки перед сборкой взамен удаленных module.preLoaders и module.postLoaders
enforce: "post", // Загрузчик модулей только для обработки после сборки взамен удаленных module.preLoaders и module.postLoaders
parser: {
amd: false, // disable AMD
commonjs: false, // disable CommonJS
system: false, // disable SystemJS
harmony: false, // disable ES2015 Harmony import/export
requireInclude: false, // disable require.include
requireEnsure: false, // disable require.ensure
requireContext: false, // disable require.context
browserify: false, // disable special handling of Browserify bundles
requireJs: false, // disable requirejs.*
node: false, // disable __dirname, __filename, module, require.extensions, require.main, etc.
node: {...} // reconfigure node layer on module level
}
}
{
test: /\.css$/, // Регулярное выражение для поиска файлов, загружаемых данным загрузчиком модулей
use: [ // Массив с перечнем модулей загрузчиков, используемых для загрузки данных типов файлов, и выполняющихся с конца в начало
{
loader: 'style-loader' // Имя загрузчика модулей
},
{
loader: 'css-loader', // Имя загрузчика модулей
options: {// Опции для данного загрузчика модулей
modules: true
}
}
]
}
{
test: /\.js$/,
exclude: /(node_modules)/,
use: [{
loader: 'babel-loader',
options: {
presets: [['es2015', {modules: false}]],
plugins: [
'syntax-async-functions',
'syntax-dynamic-import',
'transform-async-to-generator',
'transform-regenerator',
'transform-runtime'
]
}
}]
}
{
resource: /filename/, // matches "/path/filename.js"
resourceQuery: /^\?querystring$/, // matches "?querystring"
issuer: /filename/, // matches "/path/something.js" if requested from "/path/filename.js"
}
]
}
------------------------------------------------------------------------
plugins: [ // Массив плагинов, применяемых к итоговому файлу сборки
new webpack.optimize.UglifyJsPlugin({ // Плагин для минимизации итогового файла сборки
sourceMap: options.devtool && (options.devtool.indexOf("sourcemap") >= 0 || options.devtool.indexOf("source-map") >= 0)
}),
new HtmlWebpackPlugin({template: './src/index.html'}),
new webpack.HotModuleReplacementPlugin() // Включить Hot Module Replacement (HMR)
new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('production')})
new webpack.optimize.CommonsChunkPlugin({name: ['polyfills', 'vendor'].reverse()}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
__assign: ['tslib', '__assign'],
__extends: ['tslib', '__extends'],
})
function() {
this.plugin("done", function(stats) { // save to file extracted from webpack compilation stats
require("fs").writeFileSync(
path.join(__dirname, "build", "stats.json"),
JSON.stringify(stats.toJson()));
});
}
]
------------------------------------------------------------------------
target: 'web' // Скомпилировать сборку для использования в браузере
------------------------------------------------------------------------
bail: true // Прервать сборку при обнаружении хоть одной ошибки
------------------------------------------------------------------------
profile: true // Получать информацию о времени сборки каждого модуля
------------------------------------------------------------------------
recordsPath: path.join(__dirname, 'records.json') // Записывать в файл информации об изменении сборки каждого модуля между сборками
recordsInputPath: path.join(__dirname, 'records.json'), // из какого файла читать последнюю информацию о сборке
recordsOutputPath: path.join(__dirname, 'newRecords.json') // в какой файл записывать
------------------------------------------------------------------------
cache: true // Кэшировать сборку для ускорения пересборки
------------------------------------------------------------------------
watch: true // Отслеживать изменения файлов и запускать пересборку
------------------------------------------------------------------------
watchOptions: { // Опции для процесса отслеживания изменений файлов для сборки
ignored: "files/**/*.js" // Какие файлы не отслеживать для пересборки
aggregateTimeout: 300, // Задержка перед запуском пересборки на случай если сейчас будут еще изменены файлы
poll: 1000 // С каким интервалом проверять изменения в файлах
}
------------------------------------------------------------------------
devtool: 'inline-source-map' // В каком виде производить сборку source map
------------------------------------------------------------------------
devServer: { // конфиг для webpack-dev-server
hot: true, // Сказать dev-server, что мы испольлзуем Hot Module Replacement (HMR)
lazy: true // Компилирует сборку только при запросе файлов из браузера. Не смотрит на изменения файлов watch
filename: "bundle.js" // используется совместо с lazy: true
contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")], // boolean | string | array, место расположения статичных файлов для загрузки
staticOptions: { // Опции для загрузки статичных файлов
redirect: false
}
watchContentBase: true // Остлеживать ли изменения статичных файлов и перезагружать ли после этого страницу браузера
watchOptions: { // Опции для остлеживания процесса изменения файлов для сборки
poll: true
}
https: false, // true для self-signed, объект для cert authority
host: 'localhost', // (работает только в CLI)
port: 7777, // (работает только в CLI)
publicPath: "/assets/" // итоговая сборка будет доступна браузеру по указанному пути
publicPath: "http://localhost:8080/assets/"
allowedHosts: [ // Список разрешенных хостов
'host.com',
'subdomain.host.com',
'subdomain2.host.com',
'host2.com'
]
proxy: { // прокси URL на backend development server
'/api': 'http://localhost:3000'
"/api": {
target: "http://localhost:3000",
pathRewrite: {"^/api" : ""}
}
"/api": {
target: "http://localhost:3000",
bypass: function(req, res, proxyOptions) {
if (req.headers.accept.indexOf("html") !== -1) {
console.log("Skipping proxy for browser request.");
return "/index.html";
}
}
}
},
headers: { // Добавить эти заголовки при ответе браузеру
"X-Custom-Foo": "bar"
}
https: { // Сертификаты для HTTPS
key: fs.readFileSync("/path/to/server.key"),
cert: fs.readFileSync("/path/to/server.crt"),
ca: fs.readFileSync("/path/to/ca.pem"),
}
historyApiFallback: { // true для index.html вплоть 404 или объект для множественных путей
rewrites: [
{ from: /^\/$/, to: '/views/landing.html' },
{ from: /^\/subpage/, to: '/views/subpage.html' },
{ from: /./, to: '/views/404.html' }
]
}
noInfo: true, // только логи errors и warns при hot reload, остальная информация при сборке будет скрыта в консоли командной строки
quiet: true // вся информация о сборке будет скрыта в консоли командной строки
clientLogLevel: "none" //
compress: true, // включить gzip compression
stats: 'minimal', // Какую информацию о сборке выводить в консоль командной строки
hotOnly: true // Включить Hot Module Replacement (работает только в CLI)
inline: false // Включить вставку кода inline или в <iframe> (работает только в CLI)
overlay: { // Показывать сообщения об ошибке сборки прямо на странице браузера, а не в консоли
warnings: true,
errors: true
}
progress: true // Показывать прогрессбар сборки (работает только в CLI)
public: "myapp.test:80" // Указывается при проксирование через Nginx (работает только в CLI)
setup: function (app) { // Собственная функция middleware для Express
app.get('/some/path', function(req, res) {
res.json({ custom: 'response' });
});
}
}
------------------------------------------------------------------------
performance: { // Конфигурирование как отражать информацию о производительности проведения сборки
hints: "warning", // включить или выключить подсказки по производительности
maxAssetSize: 200000, // int (in bytes), - при каких лимитах показывать подсказки по производительности
maxEntrypointSize: 400000, // int (in bytes) - при каких лимитах показывать подсказки по производительности
assetFilter: function (assetFilename) { // Какой файл использовать для оценки производительности сборки
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
},
------------------------------------------------------------------------
stats: "errors-only", // Какую информацию о сборке показывать на экране консоли
stats: {
// Add asset Information
assets: true,
// Sort assets by a field
assetsSort: "field",
// Add information about cached (not built) modules
cached: true,
// Show cached assets (setting this to `false` only shows emitted files)
cachedAssets: true,
// Add children information
children: true,
// Add chunk information (setting this to `false` allows for a less verbose output)
chunks: true,
// Add built modules information to chunk information
chunkModules: true,
// Add the origins of chunks and chunk merging info
chunkOrigins: true,
// Sort the chunks by a field
chunksSort: "field",
// Context directory for request shortening
context: "../src/",
// `webpack --colors` equivalent
colors: true,
// Display the distance from the entry point for each module
depth: false,
// Display the entry points with the corresponding bundles
entrypoints: false,
// Add errors
errors: true,
// Add details to errors (like resolving log)
errorDetails: true,
// Exclude modules which match one of the given strings or regular expressions
exclude: [],
// Add the hash of the compilation
hash: true,
// Set the maximum number of modules to be shown
maxModules: 15,
// Add built modules information
modules: true,
// Sort the modules by a field
modulesSort: "field",
// Show dependencies and origin of warnings/errors (since webpack 2.5.0)
moduleTrace: true,
// Show performance hint when file size exceeds `performance.maxAssetSize`
performance: true,
// Show the exports of the modules
providedExports: false,
// Add public path information
publicPath: true,
// Add information about the reasons why modules are included
reasons: true,
// Add the source code of modules
source: true,
// Add timing information
timings: true,
// Show which exports of a module are used
usedExports: false,
// Add webpack version information
version: true,
// Add warnings
warnings: true,
// Filter warnings to be shown (since webpack 2.4.0),
// can be a String, Regexp, a function getting the warning and returning a boolean
// or an Array of a combination of the above. First match wins.
warningsFilter: "filter" | /filter/ | ["filter", /filter/] | (warning) => ... return true|false
};
------------------------------------------------------------------------
node: { // Включать ли набор разных полифилов для кода Node.js
console: false,
global: true,
process: true,
__filename: "mock",
__dirname: "mock",
Buffer: true,
setImmediate: true
dns: "mock",
fs: "empty",
path: true,
url: false
}
------------------------------------------------------------------------
amd: { // Установить значения для require.amd и define.amd для:
jQuery: true
}
------------------------------------------------------------------------
loader: '' // Передать собственные значения в контекст модуля загрузчика
-----------------------------------------------------------------------
};
------------------------------------------------------------------------
// Компиляция через команду webpack
module.exports = config;
------------------------------------------------------------------------
или
------------------------------------------------------------------------
// Компиляция через Node.js короткий способ
------------------------------------------------------------------------
// Компиляция через 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 через Express
------------------------------------------------------------------------
var express = require("express");
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpack = require("webpack");
var webpackConfig = require("./webpack.config");
var app = express();
var compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler, {
publicPath: "/", // Same as "output.publicPath" in most cases.
filename: "bundle.js", // Same as "output.filename" in most cases.
lazy: true // lazy mode will only recompile on a request to the entry point.
}));
app.listen(3000, function () {
console.log("Listening on port 3000!");
console.log("Depending on what you've used in output.publicPath and output.filename, your bundle now available on http://localhost:3000/bundle.js");
});
Комментариев нет:
Отправить комментарий