Copywebpackplugin

Usage

The plugin will generate an HTML5 file for you that includes all your bundles in the body using tags. Just add the plugin to your config as follows:

webpack.config.js


constHtmlWebpackPlugin=require('html-webpack-plugin')module.exports={  entry'index.js',  output{    path__dirname+'/dist',    filename'index_bundle.js'},  pluginsnewHtmlWebpackPlugin()}

This will generate a file containing the following

<!DOCTYPE html><html><head><metacharset="UTF-8"><title>Webpack App</title></head><body><scriptsrc="index_bundle.js"></script></body></html>

If you have multiple entry points, they will all be included with tags in the generated HTML.

If you have plugins that make use of it, should be ordered first before any of the integrated plugins.

Options

Type: Default:

Test to match files against.

webpack.config.js

Type: Default:

Files to include.

webpack.config.js

Type: Default:

Files to exclude.

webpack.config.js

Type: Default:

Enable file caching. Default path to cache directory: .

Enable/disable file caching.

webpack.config.js

Enable file caching and set path to cache directory.

webpack.config.js

Type: Default:

Allows you to override default cache keys.

Default cache keys:

webpack.config.js

Type: Default:

Use multi-process parallel running to improve the build speed. Default number of concurrent runs: .

Enable/disable multi-process parallel running.

webpack.config.js

Enable multi-process parallel running and set number of concurrent runs.

webpack.config.js

Type: Default: (see below for details around value and plugin)

Works only with , , and values for the option.

Why?

  • wraps modules in and the minimizer does not handle strings.
  • has not column information and minimizer generate only a single line, which leave only a single mapping.

The plugin respect the and using the plugin. Using supported values enable source map generation. Using with enabled the option enables source map generation.

Use source maps to map error message locations to modules (this slows down the compilation). If you use your own function please read the section for handling source maps correctly.

webpack.config.js

Type: Default:

Allows you to override default minify function. By default plugin uses terser package. Useful for using and testing unpublished versions or forks.

webpack.config.js

Type: Default:

Terser minify .

webpack.config.js

Type: Default:

Whether comments shall be extracted to a separate file, (see details). By default extract only comments using regexp condition and remove remaining comments. If the original file is named , then the comments will be stored to . The option specifies whether the comment will be preserved, i.e. it is possible to preserve some comments (e.g. annotations) while extracting others or even preserving comments that have been extracted.

Enable/disable extracting comments.

webpack.config.js

Extract or (use RegExp) comments.

webpack.config.js

All comments that match the given expression will be extracted to the separate file.

webpack.config.js

All comments that match the given expression will be extracted to the separate file.

webpack.config.js


Allow to customize condition for extract comments, specify extracted file name and banner.

webpack.config.js

Type:

Condition what comments you need extract.

webpack.config.js

Type: Default:

Available placeholders: , and ( for webpack 5).

The file where the extracted comments will be stored. Default is to append the suffix to the original filename.

webpack.config.js

Type: Default:

The banner text that points to the extracted file and will be added on top of the original file. Can be (no banner), a , or a that will be called with the filename where extracted comments have been stored. Will be wrapped into comment.

webpack.config.js

Configuration Examples

All scripts with ‘important’ in their name are sync and all others set to :

pluginsnewHtmlWebpackPlugin(),newScriptExtHtmlWebpackPlugin({    sync'important'    defaultAttribute'defer'})

Alternatively, using a regular expression:

pluginsnewHtmlWebpackPlugin(),newScriptExtHtmlWebpackPlugin({    syncimportant,    defaultAttribute'defer'})

All scripts with ‘mod’ in their name are async and type ‘module’, all others are sync (no explicit setting for this as it is the default):

pluginsnewHtmlWebpackPlugin(),newScriptExtHtmlWebpackPlugin({    async'mod',    module'mod'})

Script ‘startup.js’ is inlined whilst all other scripts are async and preloaded:

pluginsnewHtmlWebpackPlugin(),newScriptExtHtmlWebpackPlugin({    inline'startup',    preload\.js$,    defaultAttribute'async'})

All scripts are preloaded with a attribute set to enable CDN’s:

pluginsnewHtmlWebpackPlugin(),newScriptExtHtmlWebpackPlugin({    custom{      test\.js$,      attribute'crossorigin',      value'anonymous'}    preload{      test\.js$}})

All asynchronous scripts are added as resource hints. All other scripts are :

pluginsnewHtmlWebpackPlugin(),newScriptExtHtmlWebpackPlugin({    async\.js$    preload{      test\.js$,      chunks'async'}})

All scripts have custom attribute and ui.js also has a custom attribute of :

pluginsnewHtmlWebpackPlugin(),newScriptExtHtmlWebpackPlugin({    custom{        test\.js$,        attribute'type',        value'text/paperscript'},{        test'ui.js',        attribute'id',        value'12345'}})

And so on, to craziness:

pluginsnewHtmlWebpackPlugin(),newScriptExtHtmlWebpackPlugin({    inline'startup',    syncimp(1|2){1,3}},'initial',    defer'slow',big.*andslow,    module^((?!sync).)*,'mod',    prefetch'indirectly-referenced.js',    defaultAttribute'async'})

Any problems with real-world examples, just raise an issue.

minify output html demo

and support options to minify output html use the following rules:

  • if is set — if is , builtin html minify function will used to minify output html(minify HTML only,not CSS or JS) — if is , builtin html pretty function will used to output human read friendly html — if is a ,use this function to minify html

  • if is missing() — if environment is , builtin html minify function will used to minify output html(minify HTML only,not CSS or JS)

    if environment is not production, builtin html pretty function will used to output human read friendly html

This plugin takes into account both development environment and production environment. And only if current environment is production environment, others are considered to be development environment. will use DefinePlugin define 。

Связывание модулей с Webpack

Теперь, когда мы знаем, зачем нам нужен Webpack, давайте посмотрим на него в действии.

Webpack — это упаковщик модулей. Его целью является обработка вашего приложения путем отслеживания его зависимостей, а затем их объединение в один или несколько файлов, которые можно запустить в браузере. Так же, как приложения Node настраиваются с помощью package.json, вы можете настроить Webpack в своем файле webpack.config.js.

webpack.config.js

В основе Webpack лежат несколько ключевых компонентов: точка входа (entry point), место вывода (output location), загрузчики (loaders — https://webpack.js.org/concepts/loaders/) и плагины (plugins — https://webpack.js.org/concepts/plugins/). Я сосредоточусь только на вводе и выводе, но вы определенно будете использовать два других при настройке Webpack для более крупных проектов.

Output: Имя и путь для упакованного файла JavaScript.

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js', // отправная точка для нашей программы
  output: {
    path: path.resolve(__dirname, 'directory_name'), // абсолютный путь к каталогу, в который мы хотим поместить вывод
    filename: 'my-first-webpack.bundle.js' // имя файла, который будет содержать наш вывод - мы могли бы назвать его как угодно, но типично bundle.js
  }
};

Ваш файл webpack.config.js может выглядеть примерно так:

const path = require('path');

module.exports = {
  mode: "development", // could be "production" as well
  entry: './src/main.js', 
  output: {
    path: path.resolve(__dirname, 'public'), 
    filename: 'bundle.js' 
  }
};

scripts

Теперь, когда у нас есть конфигурация Webpack, нам нужно добавить скрипты запуска в наш package.json. Для этого мы можем выбрать любое слово, которое захотим, но обычно используется build. Также если мы хотим, чтобы Webpack отслеживал изменения в файлах которые мы редактируем, мы можем добавить флаг «—w» в конце команды. (Если бы мы это не сделаем, то нам нужно запускать команду сборки каждый раз, когда мы вносим изменения в исходные файлы.)

Раздел scripts в webpack.config.js должен выглядеть так:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --w"
  },

Что дальше?

И что теперь в консоли?

Это ваша первая сборка. Метаданные в вашей консоли говорят вам, насколько большим получился ваш пакет сборки. Вот Это Да! Теперь, когда вы сделали это, вы можете использовать модули ES. Это означает, что по мере роста вашей программы вы можете импортировать и экспортировать функции между файлами JavaScript. И это круто!

Change History

  • 4.1.0 — remove webpack v1.x and webpack v2.x support — updated webpack 4 testing to 4.35.2 — added support for HtmlWebpackPlugin v4.x (thanks @SpyTec)
  • 3.4.7 — removed legacy dependencies (thanks @ngyikp)
  • 3.4.3 — added node 7 & 8 testing
  • 3.4.1 — updating dependencies / typos on README
  • 3.4.0 — add explicit css file matching (thanks @mastilver for the complete PR), updated dependecies
  • 3.3.0 — add minification option (thanks @pablohpsilva for the idea)
  • 3.2.0 — runs even if for html-webpack-plugin; supports explicit positioning of style tags; update dependencies
  • 3.1.1 — updated README (sorry @rastasheep)
  • 3.1.0 — support multiple entry points (thanks @hagmandan); README typos fixed (thanks @eahlberg); updated all dependencies (including webpack 2.2.0)
  • v3.0.8 — webpack2 tests moved to webpack 2.2.0-rc3
  • v3.0.7 — webpack2 tests moved to webpack 2.2.0-rc.2 and minor fix to maintain compatability
  • v3.0.6 — webpack1 tests moved to webpack 1.14.0
  • v3.0.4 — support configuration and better debugging support
  • v3.0.2 — include folder in deployment (thanks, @Aweary)
  • v3.0.1 — minor REAME and error handling improvements
  • v3.0.0 — complete rewrite to piggback off ExtractTextPlugin
  • v2.0.5 — modified test to use dynavers with webpack 1.13.2 and 2.1.0-beta.16
  • v2.0.3 — updated dependency versions, reclassified some dependencies
  • v2.0.2 — merged pull request by 7pass fixing 2.0.1 — thanks!
  • v2.0.1 — added explicit guard against use of option
  • v2.0.0 — webpack 1.x and 2.x compatible, including hot reloading
  • v2.0.0.beta.3 — warnings about beta testing (!), debug enhancements, and better unescaping
  • v2.0.0.beta.2 — Travis timeout and tag spacing fixes
  • v2.0.0-beta.1 — node 4.x fix and fixed handling of multiple scripts
  • v2.0.0-beta.0 — hot module reload working (with cache switched off)
  • v1.1.1 — hot module reload not working with webpack 2
  • v1.1.0 — now Webpack 2.x compatible
  • v1.0.7 — added warning that not compatible with Webpack 2
  • v1.0.4 — added debug options
  • v1.0.3 — documentation update
  • v1.0.2 — documentation update
  • v1.0.1 — now plays happily with plugins on same event
  • v1.0.0 — initial release

Настройка Webpack с помощью файла webpack.config.js

То, что можно сделать с помощью команды , является стандартным режимом работы Webpack. Если выполнить , то он создаст граф зависимостей из входного файла и выдаст пакетный файл . Но задать расположение точек входа и выхода программы можно, настроив файл конфигурации. Поместите следующий код в файл с именем :

Теперь можно выполнить или сделать ту же сборку, что и раньше, без указания точки входа в программу в аргументах командной строки, т. к. теперь всё это есть в . Также это значит, что нужно обновить скрипт файла следующим образом:

Если в файле конфигурации изменить путь вывода на что-то вроде  , то при повторном выполнении команды пакетный файл будет помещён в  (Commit 5).

Файл конфигурации предназначен не только для настройки расположения входных и выходных файлов. Также можно настроить что именно Webpack делает, когда встречает файлы разных типов, используя специальные загрузчики, которые на самом деле являются JavaScript-программами, преобразующими ваш код. Например, в файле конфигурации может быть правило, определяющее, что, если Webpack встречает файл TypeScript в своём графе зависимостей, этот файл отправляется в загрузчик, который преобразует его из TypeScript в обычный JavaScript.


Загрузчик, который будет использоваться далее, — это Babel. Если вы не использовали его раньше, Babel — это инструмент, который берёт код JS, использующий современные функции, и преобразует его в эквивалент, совместимый со старыми версиями JavaScript. Это позволяет вашему приложению работать в старых браузерах или в браузерах, которые ещё не поддерживают некоторые новые функции JavaScript. В конце концов, некоторые ленивцы не обновляли свои браузеры с 2009 года. Некоторая часть написанного кода не будет работать в браузере 2009 года:

Здесь используется стрелочная функция и старые браузеры её не воспринимают. Поэтому используем загрузчик и отправим эту функцию в прошлое. Для начала выполним следующее:

Затем в файле добавим следующий код в :

Этот код добавит новое правило в ваш Webpack. Если в дереве зависимостей Webpack встречает файл, который заканчивается на (например, ), и этот файл отсутствует в папке (например, jQuery), то к этому файлу применяется данное правило.

Любой файл, который соответствует этому правилу, проходит через все загрузчики в блоке (в данном случае только через загрузчик babel). Таким образом, файлы и пройдут через загрузчик, что приведёт к удалению стрелочной функции в , а затем Webpack продолжит свой путь сборки. Тем временем, как только Webpack встречает jQuery, он просто загружает этот код как он есть без загрузчиков, поскольку jQuery находится в каталоге .

Теперь, если выполнить и посмотреть исходный код в , фрагмент, соответствующий вашей функции сортировки, использует ключевое слово , а не стрелочную функцию (Commit 6).

Подсвеченный код на верхнем изображении — это функция из до использования загрузчика, а подсвеченный код внизу — та же функция после добавления загрузчика

Обратите внимание на то, как выше мы используем стрелочную функцию, а ниже присутствует уже знакомое браузеру 2009 года ключевое слово

Теперь приложение готово к работе на устаревших браузерах. Чтобы этот код был поддерживаемым, следует написать несколько тестов для него.

Usage

Create an instance of and provide one of the allowed params.

Providing

Provide a handler function which will be called when hooks report progress. function arguments:

  • : a number between 0 and 1 indicating the completion percentage of the compilation
  • : a short description of the currently-executing hook
  • : zero or more additional strings describing the current progress

Providing

When providing an to the , following properties are supported:

  • (): Shows active modules count and one active module in progress message.
  • (): Shows entries count in progress message.
  • (See )
  • (): Shows modules count in progress message.
  • (): A minimum modules count to start with. Takes effect when property is enabled.
  • (): Tells to collect profile data for progress steps.
  • (): Shows the count of dependencies in progress message.
  • (): A minimum dependencies count to start with. Takes effect when property is enabled.
  • (): Tells how to calculate progress percentage.

Troubleshooting

needs a different cache for each different webpack configuration. The default may not detect all of your options to plugins or other configuration files like or . In those cases a custom is needed hashing the webpack config and those other values that it cannot normally reach.

needs a different cache than or other webpack cli tools. Make sure your and options are hashing the changes makes to your webpack config. The default values should do this.

If you are using multiple webpack instances in separate processes make sure each has its own cache by changing or .

This is can be due to module context dependencies. or loaders that watch folders use this webpack feature so webpack rebuilds when files or folders are added or removed from these watched directories. Be careful about using or context aware loaders on folders that contain a lot of items. Both and context loaders depend on those folders recursively. hashes every file under a or context loader folder to detect when the context has changed and dependent modules are rebuilt.

Make sure you don’t have a or context loader on the root of your project. Such a context module means webpack is watching the hard source cache and when the cache is written after a build, webpack will start a new build for that module. This normally does not happen with because it writes the built files into memory instead of the disk. cannot do that since that would defeat its purpose as a disk caching plugin.

Basic Usage

Add the plugin to your webpack config as follows:

pluginsnewHtmlWebpackPlugin(),newScriptExtHtmlWebpackPlugin()

The order is important — the plugin must come after HtmlWebpackPlugin.

The above configuration will actually do nothing due to the configuration defaults.

Some more useful scenarios:

All scripts set to :

pluginsnewHtmlWebpackPlugin(),newScriptExtHtmlWebpackPlugin({    defaultAttribute'async'})

All scripts set to except ‘first.js’ which is sync:

pluginsnewHtmlWebpackPlugin(),newScriptExtHtmlWebpackPlugin({    sync'first.js',    defaultAttribute'async'})

Configuration offers much more complex options:

Supported Hooks

The following hooks report progress information to .

Compiler

  • compilation
  • emit*
  • afterEmit*
  • done

Compilation

  • buildModule
  • failedModule
  • succeedModule
  • finishModules*
  • seal*
  • optimizeDependenciesBasic*
  • optimizeDependencies*
  • optimizeDependenciesAdvanced*
  • afterOptimizeDependencies*
  • optimize*
  • optimizeModulesBasic*
  • optimizeModules*
  • optimizeModulesAdvanced*
  • afterOptimizeModules*
  • optimizeChunksBasic*
  • optimizeChunks*
  • optimizeChunksAdvanced*
  • afterOptimizeChunks*
  • optimizeTree*
  • afterOptimizeTree*
  • optimizeChunkModulesBasic*
  • optimizeChunkModules*
  • optimizeChunkModulesAdvanced*
  • afterOptimizeChunkModules*
  • reviveModules*
  • optimizeModuleOrder*
  • advancedOptimizeModuleOrder*
  • beforeModuleIds*
  • moduleIds*
  • optimizeModuleIds*
  • afterOptimizeModuleIds*
  • reviveChunks*
  • optimizeChunkOrder*
  • beforeChunkIds*
  • optimizeChunkIds*
  • afterOptimizeChunkIds*
  • recordModules*
  • recordChunks*
  • beforeHash*
  • afterHash*
  • recordHash*
  • beforeModuleAssets*
  • beforeChunkAssets*
  • additionalChunkAssets*
  • record*
  • additionalAssets*
  • optimizeChunkAssets*
  • afterOptimizeChunkAssets*
  • optimizeAssets*
  • afterOptimizeAssets*
  • afterSeal*

load css demo

webpack config

module.exports={    module{        loaders{                test\.css$,                loaderExtractTextPlugin.extract({                    fallbackLoader'style-loader',                    loader'css-loader',}),},,},    entry{1'./1',2'./2',3'./3',4'./4',},    pluginsnewExtractTextPlugin('.css'),newWebPlugin({            filename'index.html',            template'./template.html',            requires'1','2','3','4',}),,};

html template

<!DOCTYPE html><htmllang="zh-cn"><head><metacharset="UTF-8"><linkrel="stylesheet"href="1"><linkrel="stylesheet"href="2?_inline"><linkrel="stylesheet"href="3?_ie"><scriptsrc="1"></script></head><body><scriptsrc="2"><script><footer>footer</footer></body></html>

output html

<!DOCTYPE html><htmllang="zh-cn"><head><metacharset="UTF-8"><linkrel="stylesheet"href="1.css"><style>body{background-colorrebeccapurple;}</style><scriptsrc="1.js"></script><linkrel="stylesheet"href="4.css"></head><body><scriptsrc="2.js"><script><scriptsrc="3.js"><script><scriptsrc="4.js"><script><footer>footer</footer></body></html>

output directory

Debugging

Your next step is to simply remove the StyleExtPlugin and check that ExtractTextPlugin works by itself.

DEBUG=StyleExt webpack

The output of a working configuration will look something like:

StyleExt constructor: enabled=true, filename=undefinedStyleExt html-webpack-plugin-alter-asset-tags: CSS file in compilation: 'styles.css'StyleExt html-webpack-plugin-alter-asset-tags: CSS in compilation: @import url(https://fonts.googleapis.com/css?family=Indie+Flower);...StyleExt html-webpack-plugin-alter-asset-tags: link element found forstyle path 'styles.css'StyleExt html-webpack-plugin-alter-asset-tags: completed)

Что мы узнали?

Webpack — это пакетный инструмент, который упаковывает все ваши файлы JavaScript в один файл. Мы узнали что:

  • Webpack объединяет код JS и помогает поддерживать модули ES
  • Две основные концепции: точка входа и выхода
  • Как настраивать webpack.config.js

Отличная работа! Вы узнали так много, и все же, есть еще много всего, чему можно научиться. Вы так же можете прочитать о компиляторе Babel — https://github.com/babel/babel-loader. Webpack обычно используется с Babel для того чтобы новый синтаксис JavaScript мог работать в старых браузерах. Вы также можете прочитать о том, как Webpack обрабатывает CSS-файлы, code splitting и другие интересные вещи. Webpack также не единственный инструмент для этих целей — есть еще grunt (https://gruntjs.com/), gulp (https://gulpjs.com/) и browserify (http://browserify.org/).

Documentation

More to come soon, you’ll have to mostly rely on the example for now.


Configuration options can be passed to the client by adding querystring parameters to the path in the webpack config.

'webpack-hot-middleware/client?path=/__what&timeout=2000&overlay=false'
  • path — The path which the middleware is serving the event stream on
  • name — Bundle name, specifically for multi-compiler mode
  • timeout — The time to wait after a disconnection before attempting to reconnect
  • overlay — Set to to disable the DOM-based client-side overlay.
  • reload — Set to to auto-reload the page when webpack gets stuck.
  • noInfo — Set to to disable informational console logging.
  • quiet — Set to to disable all console logging.
  • autoConnect — Set to to use to prevent a connection being automatically opened from the client to the webpack back-end — ideal if you need to modify the options using the function
  • overlayStyles — An object to let you override or add new inline styles to the client overlay div.
  • overlayWarnings — Set to to enable client overlay on warnings in addition to errors.
var ansiColors ={  red'00FF00'};var overlayStyles ={  color'#FF0000'};var hotMiddlewareScript ='webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true&ansiColors='+encodeURIComponent(JSON.stringify(ansiColors))+'&overlayStyles='+encodeURIComponent(JSON.stringify(overlayStyles));

Configuration options can be passed to the middleware by passing a second argument.

app.use(require("webpack-hot-middleware")(compiler,{    logfalse,    path"/__what",    heartbeat2000}));
  • log — A function used to log lines, pass to disable. Defaults to
  • path — The path which the middleware will serve the event stream on, must match the client setting
  • heartbeat — How often to send heartbeat updates to the client to keep the connection alive. Should be less than the client’s setting — usually set to half its value.

Basic Usage

Add the plugin to your webpack config.

The order is important — the plugin must come after HtmlWebpackPlugin and ExtractTextWebpackPlugin:

module{  loaders{ test\.css$, loaderExtractTextPlugin.extract(...)}}pluginsnewHtmlWebpackPlugin({...}),newExtractTextWebpackPlugin('styles.css'),newStyleExtHtmlWebpackPlugin()<< add the plugin

That’s it.

Add the plugin and use more than one loader for your CSS:

module{  loaders{ testcritical.css, loaderExtractTextPlugin.extract(...)},{ testother.css, loader'style-loader!css-loader'},<< add separate loader}pluginsnewHtmlWebpackPlugin({...}),newExtractTextWebpackPlugin('styles.css'),newStyleExtHtmlWebpackPlugin()

Use two instances of ExtractTextPlugin and tell StyleExtWebpackPlugin which one to target by giving it the name of the output file:

constinternalCSS=newExtractTextPlugin('internal.css');constexternalCSS=newExtractTextPlugin('styles.css');return{...  module{    loaders{ testcritical.css, loaderinternalCSS.extract(...)},{ testother.css, loaderexternalCSS.extract(...)},}  pluginsnewHtmlWebpackPlugin({...}),    internalCSS,    externalCSS,newStyleExtHtmlWebpackPlugin('internal.css')<< tell the plugin which to target}
  • : [] — for switching the plugin on and off (default: );
  • : the css filename — previously, the single argument (default: — uses the first css file found in the compilation);
  • : which chunks the plugin scans for the css file — see the next Use Case: Multiple HTML files for usage (default: — scans all chunks);
  • : — all (hopefully) self-explanatory except , which means defer to html-webpack-plugin’s option (default: );
  • : see next section
  • : A regular expression that indicates the css filename (default: /.css$/);

So to put the CSS at the bottom of the element:

module{  loaders{ test\.css$, loaderExtractTextPlugin.extract(...)}}pluginsnewHtmlWebpackPlugin({...}),newExtractTextWebpackPlugin('styles.css'),newStyleExtHtmlWebpackPlugin({    position'head-bottom'})

The inlined CSS can be minified/optimised using the extended, hash version of the configuration. Use the property with one of the following values:

  • : the default, does not minify;
  • : minifies with default options;

Default minification:

plugins...newStyleExtHtmlWebpackPlugin({    minifytrue})

Custom minification:

plugins...newStyleExtHtmlWebpackPlugin({    minify{      level{1{          allfalse,          tidySelectorstrue}}}})

All as per the extract plugin you have chosen.

style-ext-html-webpack-plugin supports this approach by offering the same option. As you also need an instance of extract-text-webpack-plugin, the configuration is quite unwieldy:

...constpage1Extract=newExtractTextPlugin('page1.css');constpage2Extract=newExtractTextPlugin('page2.css');constwebpackConfig={...  entry{    entry1'page-1-path/script.js',    entry2'page-2-path/script.js'},output.filename='.js',module.loaders{      test\.css$,      loaderpage1Extract.extract('style-loader','css-loader'),      include'page-1-path'},{      test\.css$,      loaderpage2Extract.extract('style-loader','css-loader'),      include'page-2-path'},  pluginsnewHtmlWebpackPlugin({      chunks'entry1',      filename'page1.html'}),newHtmlWebpackPlugin({      chunks'entry2',      filename'page2.html'}),    page1Extract,    page2Extract,newStyleExtHtmlWebpackPlugin({      chunks'entry1'}),newStyleExtHtmlWebpackPlugin({      chunks'entry2'}),...}return webpackConfig;

Phew! A loop is recommended instead.

ExtractTextPlugin does not support HMR. If you really need this for your CSS you have two options:

  1. only internalize the CSS on production builds.

The former option is viable if v2.x supports your requirements but that version is no longer maintained hence the second approach is recommended.

For this, use a conditional in your webpack.config to:

  • either remove the StyleExtPlugin or disable it by passing to its constructor:
constDEBUG=(process.env.NODE_ENV!=='production');return{...  module{    loaders{        test\.css$,        loaderDEBUG?'style-loader|css-loader'ExtractTextPlugin.extract({...})}},  pluginsnewHtmlWebpackPlugin({...}),newExtractTextPlugin('styles.css'),newStyleExtHtmlWebpackPlugin(!DEBUG)}

Usage

The plugin will generate an HTML5 file for you that includes all your bundles in the body using tags. Just add the plugin to your config as follows:

webpack.config.js

constHtmlWebpackPlugin=require('html-webpack-plugin')module.exports={  entry'index.js',  output{    path__dirname+'/dist',    filename'index_bundle.js'},  pluginsnewHtmlWebpackPlugin()}

This will generate a file containing the following

<!DOCTYPE html><html><head><metacharset="UTF-8"><title>Webpack App</title></head><body><scriptsrc="index_bundle.js"></script></body></html>

If you have multiple entry points, they will all be included with tags in the generated HTML.

If you have plugins that make use of it, should be ordered first before any of the integrated plugins.

config resource attribute demo

every resource required by html,it can config some attribute as below:

  • only load in production environment
  • only load in dev environment
  • inline resource content info html,inline script and css
  • resource only required IE browser,to achieve by comment

there has two way to config resource attribute:

webpack config

module.exports={    entry{'ie-polyfill''./ie-polyfill',        inline'./inline',        dev'./dev',        googleAnalytics'./google-analytics',},    pluginsnewWebPlugin({            filename'index.html',            template'./template.html',}),,};

html template

<!DOCTYPE html><htmllang="zh-cn"><head><metacharset="UTF-8"><scriptsrc="inline?_inline"></script><scriptsrc="ie-polyfill?_ie"></script></head><body><scriptsrc="dev?_dev"><script><scriptasyncsrc="./google-analytics.js?_dist"><script></body></html>

webpack config

module.exports={    pluginsnewWebPlugin({            filename'index.html',            requires{'ie-polyfill'{                    _ietrue,},                inline{                    _inlinetrue,                    _disttrue,},                dev{                    _devtrue,},'./google-analytics.js'{                    _disttrue,},},}),,};

other attribute in config without name start with _ will be treat as attribute for HTML tag in output HTML file. e.g if a script resource with query will lead to output HTML be .

Последний штрих

Мы почти закончили. Мы настроили Webpack для сборки нашего файла main.js и вывода его в bundle.js в наш каталог /public.

Теперь мы можем использовать ES-модули в JavaScript. Помните, как функция click вызывалась до того, как она появилась в браузере? Теперь мы можем использовать синтаксис export и import, чтобы экспортировать функцию из game.js и вызывать ее в main.js, чтобы полностью избежать этой проблемы:

main.js

// В начале main.js
import click from './game'

Наконец, нам нужно внести небольшое изменение в наш HTML-файл. Прежде чем мы узнали о Webpack, index.html загрузил два отдельных файла JavaScript. Теперь весь код в этих файлах будет упакован в bundle.js — так что мы можем просто указать тег скрипта на bundle.js.

Идем дальше и заменим ваши теги script ссылкой на bundle.js:

  <!-- <script src="../src/game.js" defer></script>
  <script src="../src/main.js" defer></script> -->
  <script src="bundle.js" defer></script>

Теперь запустите open public/index.html.

Ваша программа выглядит и функционирует точно так же, как и раньше? Супер! Вы все сделали правильно.

Загляните в свой DevTools и перейдите на вкладку «Sources». Щелкнуть на bundle.js и увидите свой прекрасно упакованный JavaScript.


С этим читают