You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1133 lines
48 KiB
1133 lines
48 KiB
|
|
<!DOCTYPE HTML>
|
|
<html lang="" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
<title>Simple · Neutrino</title>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="description" content="">
|
|
<meta name="generator" content="GitBook 3.2.2">
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../gitbook/style.css">
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../gitbook/gitbook-plugin-prism/prism.css">
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../gitbook/gitbook-plugin-npmsearchlist/styles.css">
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<meta name="HandheldFriendly" content="true"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
|
|
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
|
|
|
|
|
|
<link rel="next" href="advanced.html" />
|
|
|
|
|
|
<link rel="prev" href="./" />
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="book">
|
|
<div class="book-summary">
|
|
|
|
|
|
<div id="book-search-input" role="search">
|
|
<input type="text" placeholder="Type to search" />
|
|
</div>
|
|
|
|
|
|
<nav role="navigation">
|
|
|
|
|
|
|
|
<ul class="summary">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="chapter " data-level="1.1" data-path="../">
|
|
|
|
<a href="../">
|
|
|
|
|
|
Introduction
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.2" data-path="../installation.html">
|
|
|
|
<a href="../installation.html">
|
|
|
|
|
|
Installation
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.3" data-path="../usage.html">
|
|
|
|
<a href="../usage.html">
|
|
|
|
|
|
Usage
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.4" data-path="../project-layout.html">
|
|
|
|
<a href="../project-layout.html">
|
|
|
|
|
|
Project Layout
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.5" data-path="../FAQ.html">
|
|
|
|
<a href="../FAQ.html">
|
|
|
|
|
|
FAQ
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.6" data-path="../presets/">
|
|
|
|
<a href="../presets/">
|
|
|
|
|
|
Presets
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<ul class="articles">
|
|
|
|
|
|
<li class="chapter " data-level="1.6.1" data-path="../presets/neutrino-preset-web/">
|
|
|
|
<a href="../presets/neutrino-preset-web/">
|
|
|
|
|
|
Web
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.6.2" data-path="../presets/neutrino-preset-react/">
|
|
|
|
<a href="../presets/neutrino-preset-react/">
|
|
|
|
|
|
React
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.6.3" data-path="../presets/neutrino-preset-node/">
|
|
|
|
<a href="../presets/neutrino-preset-node/">
|
|
|
|
|
|
Node.js
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.6.4" data-path="../presets/neutrino-preset-airbnb-base/">
|
|
|
|
<a href="../presets/neutrino-preset-airbnb-base/">
|
|
|
|
|
|
Airbnb
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.6.5" data-path="../presets/neutrino-preset-karma/">
|
|
|
|
<a href="../presets/neutrino-preset-karma/">
|
|
|
|
|
|
Karma
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.6.6" data-path="../presets/neutrino-preset-mocha/">
|
|
|
|
<a href="../presets/neutrino-preset-mocha/">
|
|
|
|
|
|
Mocha
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.6.7" data-path="../presets/neutrino-preset-jest/">
|
|
|
|
<a href="../presets/neutrino-preset-jest/">
|
|
|
|
|
|
Jest
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.6.8" data-path="../presets/community-presets.html">
|
|
|
|
<a href="../presets/community-presets.html">
|
|
|
|
|
|
Community presets
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.7" data-path="../middleware/">
|
|
|
|
<a href="../middleware/">
|
|
|
|
|
|
Middleware
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<ul class="articles">
|
|
|
|
|
|
<li class="chapter " data-level="1.7.1" data-path="../middleware/neutrino-middleware-banner/">
|
|
|
|
<a href="../middleware/neutrino-middleware-banner/">
|
|
|
|
|
|
banner
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.7.2" data-path="../middleware/neutrino-middleware-chunk/">
|
|
|
|
<a href="../middleware/neutrino-middleware-chunk/">
|
|
|
|
|
|
chunk
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.7.3" data-path="../middleware/neutrino-middleware-clean/">
|
|
|
|
<a href="../middleware/neutrino-middleware-clean/">
|
|
|
|
|
|
clean
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.7.4" data-path="../middleware/neutrino-middleware-compile-loader/">
|
|
|
|
<a href="../middleware/neutrino-middleware-compile-loader/">
|
|
|
|
|
|
compile-loader
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.7.5" data-path="../middleware/neutrino-middleware-copy/">
|
|
|
|
<a href="../middleware/neutrino-middleware-copy/">
|
|
|
|
|
|
copy
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.7.6" data-path="../middleware/neutrino-middleware-env/">
|
|
|
|
<a href="../middleware/neutrino-middleware-env/">
|
|
|
|
|
|
env
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.7.7" data-path="../middleware/neutrino-middleware-eslint/">
|
|
|
|
<a href="../middleware/neutrino-middleware-eslint/">
|
|
|
|
|
|
eslint
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.7.8" data-path="../middleware/neutrino-middleware-font-loader/">
|
|
|
|
<a href="../middleware/neutrino-middleware-font-loader/">
|
|
|
|
|
|
font-loader
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.7.9" data-path="../middleware/neutrino-middleware-hot/">
|
|
|
|
<a href="../middleware/neutrino-middleware-hot/">
|
|
|
|
|
|
hot
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.7.10" data-path="../middleware/neutrino-middleware-html-loader/">
|
|
|
|
<a href="../middleware/neutrino-middleware-html-loader/">
|
|
|
|
|
|
html-loader
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.7.11" data-path="../middleware/neutrino-middleware-html-template/">
|
|
|
|
<a href="../middleware/neutrino-middleware-html-template/">
|
|
|
|
|
|
html-template
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.7.12" data-path="../middleware/neutrino-middleware-image-loader/">
|
|
|
|
<a href="../middleware/neutrino-middleware-image-loader/">
|
|
|
|
|
|
image-loader
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.7.13" data-path="../middleware/neutrino-middleware-loader-merge/">
|
|
|
|
<a href="../middleware/neutrino-middleware-loader-merge/">
|
|
|
|
|
|
loader-merge
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.7.14" data-path="../middleware/neutrino-middleware-minify/">
|
|
|
|
<a href="../middleware/neutrino-middleware-minify/">
|
|
|
|
|
|
minify
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.7.15" data-path="../middleware/neutrino-middleware-named-modules/">
|
|
|
|
<a href="../middleware/neutrino-middleware-named-modules/">
|
|
|
|
|
|
named-modules
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.7.16" data-path="../middleware/neutrino-middleware-named-start-server/README.md">
|
|
|
|
<span>
|
|
|
|
|
|
start-server
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.7.17" data-path="../middleware/neutrino-middleware-named-style-loader/README.md">
|
|
|
|
<span>
|
|
|
|
|
|
style-loader
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.8" data-path="./">
|
|
|
|
<a href="./">
|
|
|
|
|
|
Customization
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<ul class="articles">
|
|
|
|
|
|
<li class="chapter active" data-level="1.8.1" data-path="simple.html">
|
|
|
|
<a href="simple.html">
|
|
|
|
|
|
Simple
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.8.2" data-path="advanced.html">
|
|
|
|
<a href="advanced.html">
|
|
|
|
|
|
Advanced
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.9" data-path="../creating-presets.html">
|
|
|
|
<a href="../creating-presets.html">
|
|
|
|
|
|
Creating presets
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.10" data-path="../learning-resources.html">
|
|
|
|
<a href="../learning-resources.html">
|
|
|
|
|
|
Learning Resources
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.11" data-path="../api/">
|
|
|
|
<a href="../api/">
|
|
|
|
|
|
API
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.12" data-path="../cli/">
|
|
|
|
<a href="../cli/">
|
|
|
|
|
|
CLI
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.13" data-path="../upgrading-neutrino.html">
|
|
|
|
<a href="../upgrading-neutrino.html">
|
|
|
|
|
|
Upgrading from v4 to v5
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.14" >
|
|
|
|
<a target="_blank" href="https://github.com/mozilla-neutrino/neutrino-dev/tree/docs-v4/docs">
|
|
|
|
|
|
v4 Documentation
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.15" data-path="../contributing/">
|
|
|
|
<a href="../contributing/">
|
|
|
|
|
|
Contributing
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<ul class="articles">
|
|
|
|
|
|
<li class="chapter " data-level="1.15.1" data-path="../contributing/development.html">
|
|
|
|
<a href="../contributing/development.html">
|
|
|
|
|
|
Development Process
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.15.2" data-path="../contributing/code-of-conduct.html">
|
|
|
|
<a href="../contributing/code-of-conduct.html">
|
|
|
|
|
|
Code of Conduct
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="divider"></li>
|
|
|
|
<li>
|
|
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
|
|
Published with GitBook
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="book-body">
|
|
|
|
<div class="body-inner">
|
|
|
|
|
|
|
|
<div class="book-header" role="navigation">
|
|
|
|
|
|
<!-- Title -->
|
|
<h1>
|
|
<i class="fa fa-circle-o-notch fa-spin"></i>
|
|
<a href=".." >Simple</a>
|
|
</h1>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="page-wrapper" tabindex="-1" role="main">
|
|
<div class="page-inner">
|
|
|
|
<div id="book-search-results">
|
|
<div class="search-noresults">
|
|
|
|
<section class="normal markdown-section">
|
|
|
|
<h1 id="simple-neutrino-customization">Simple Neutrino Customization</h1>
|
|
<p>No two JavaScript projects are ever the same, and as such there may be times when you will need to make modifications
|
|
to the way your Neutrino preset is building your project. By defining a configuration object within your package.json,
|
|
Neutrino will merge this information with those provided by your presets, overriding those options with your custom
|
|
configuration.</p>
|
|
<p><em>Note: Using package.json for customization tends to be quite verbose for anything more than simple overrides. If this
|
|
is not to your liking, consider moving your overrides to their own file using
|
|
<a href="advanced.html">Advanced Customization</a>.</em></p>
|
|
<h2 id="prepare-packagejson">Prepare package.json</h2>
|
|
<p>First, you will need to define a <code>neutrino</code> section within your package.json. You
|
|
<a href="../usage.html#using-multiple-presets">may have already done this</a> if you
|
|
specified your presets through <code>neutrino</code> as opposed to flags through <code>scripts</code>:</p>
|
|
<pre class="language-"><code class="lang-json"><span class="token punctuation">{</span>
|
|
<span class="token property">"neutrino"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"use"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token string">"neutrino-preset-react"</span><span class="token punctuation">,</span>
|
|
<span class="token string">"neutrino-preset-karma"</span>
|
|
<span class="token punctuation">]</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"start"</span><span class="token operator">:</span> <span class="token string">"neutrino start"</span><span class="token punctuation">,</span>
|
|
<span class="token property">"build"</span><span class="token operator">:</span> <span class="token string">"neutrino build"</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre>
|
|
<h2 id="overriding-neutrino-options">Overriding Neutrino options</h2>
|
|
<p>Neutrino has a number of useful options for customizing its behavior, as well as the behavior of presets and middleware.
|
|
You can override these options using an object at <code>neutrino.options</code>:</p>
|
|
<h3 id="optionsroot"><code>options.root</code></h3>
|
|
<p>Set the base directory which Neutrino middleware and presets operate on. Typically this is the project directory where
|
|
the package.json would be located. If the option is not set, Neutrino defaults it to <code>process.cwd()</code>. If a relative
|
|
path is specified, it will be resolved relative to <code>process.cwd()</code>; absolute paths will be used as-is.</p>
|
|
<pre class="language-"><code class="lang-js"><span class="token punctuation">{</span>
|
|
<span class="token string">"neutrino"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
<span class="token string">"options"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment" spellcheck="true">// if not specified, defaults to process.cwd()</span>
|
|
|
|
<span class="token comment" spellcheck="true">// relative, resolves to process.cwd() + ./website</span>
|
|
<span class="token string">"root"</span><span class="token punctuation">:</span> <span class="token string">"./website"</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment" spellcheck="true">// absolute</span>
|
|
<span class="token string">"root"</span><span class="token punctuation">:</span> <span class="token string">"/code/website"</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre>
|
|
<h3 id="optionssource"><code>options.source</code></h3>
|
|
<p>Set the directory which contains the application source code. If the option is not set, Neutrino defaults it to <code>src</code>.
|
|
If a relative path is specified, it will be resolved relative to <code>options.root</code>; absolute paths will be used as-is.</p>
|
|
<pre class="language-"><code class="lang-js"><span class="token punctuation">{</span>
|
|
<span class="token string">"neutrino"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
<span class="token string">"options"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment" spellcheck="true">// if not specified, defaults to options.root + src</span>
|
|
|
|
<span class="token comment" spellcheck="true">// relative, resolves to options.root + ./lib</span>
|
|
<span class="token string">"source"</span><span class="token punctuation">:</span> <span class="token string">"./lib"</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment" spellcheck="true">// absolute</span>
|
|
<span class="token string">"source"</span><span class="token punctuation">:</span> <span class="token string">"/code/website/lib"</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre>
|
|
<h3 id="optionsoutput"><code>options.output</code></h3>
|
|
<p>Set the directory which will be the output of built assets. If the option is not set, Neutrino defaults it to <code>build</code>.
|
|
If a relative path is specified, it will be resolved relative to <code>options.root</code>; absolute paths will be used as-is.</p>
|
|
<pre class="language-"><code class="lang-js"><span class="token punctuation">{</span>
|
|
<span class="token string">"neutrino"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
<span class="token string">"options"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment" spellcheck="true">// if not specified, defaults to options.root + build</span>
|
|
|
|
<span class="token comment" spellcheck="true">// relative, resolves to options.root + ./dist</span>
|
|
<span class="token string">"output"</span><span class="token punctuation">:</span> <span class="token string">"./dist"</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment" spellcheck="true">// absolute</span>
|
|
<span class="token string">"output"</span><span class="token punctuation">:</span> <span class="token string">"/code/website/dist"</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre>
|
|
<h3 id="optionstests"><code>options.tests</code></h3>
|
|
<p>Set the directory that contains test files. If the option is not set, Neutrino defaults it to <code>test</code>.
|
|
If a relative path is specified, it will be resolved relative to <code>options.root</code>; absolute paths will be used as-is.</p>
|
|
<pre class="language-"><code class="lang-js"><span class="token punctuation">{</span>
|
|
<span class="token string">"neutrino"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
<span class="token string">"options"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment" spellcheck="true">// if not specified, defaults to options.root + test</span>
|
|
|
|
<span class="token comment" spellcheck="true">// relative, resolves to options.root + ./testing</span>
|
|
<span class="token string">"tests"</span><span class="token punctuation">:</span> <span class="token string">"./testing"</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment" spellcheck="true">// absolute</span>
|
|
<span class="token string">"tests"</span><span class="token punctuation">:</span> <span class="token string">"/code/website/testing"</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre>
|
|
<h3 id="optionsentry"><code>options.entry</code></h3>
|
|
<p>Set the main entry point for the application. If the option is not set, Neutrino defaults it to <code>index.*</code> - the extension is resolved by Webpack. If a relative path is specified, it will be resolved relative to <code>options.source</code>; absolute paths will be used as-is.</p>
|
|
<p>The main file by default is not required to be in JavaScript format. It also potentially may be JSX, TypeScript or any other preprocessor language. These extensions should be specified in a preset in <code>neutrino.config.resolve.extensions</code>. </p>
|
|
<pre class="language-"><code class="lang-js"><span class="token punctuation">{</span>
|
|
<span class="token string">"neutrino"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
<span class="token string">"options"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment" spellcheck="true">// if not specified, defaults to options.source + index</span>
|
|
|
|
<span class="token comment" spellcheck="true">// relative, resolves to options.source + ./entry.js</span>
|
|
<span class="token string">"entry"</span><span class="token punctuation">:</span> <span class="token string">"./entry.js"</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment" spellcheck="true">// absolute</span>
|
|
<span class="token string">"entry"</span><span class="token punctuation">:</span> <span class="token string">"/code/website/lib/entry.js"</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre>
|
|
<h3 id="optionsnodemodules"><code>options.node_modules</code></h3>
|
|
<p>Set the directory which contains the Node.js modules of the project. If the option is not set, Neutrino defaults it to
|
|
<code>node_modules</code>. If a relative path is specified, it will be resolved relative to <code>options.root</code>; absolute paths will be
|
|
used as-is.</p>
|
|
<pre class="language-"><code class="lang-js"><span class="token punctuation">{</span>
|
|
<span class="token string">"neutrino"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
<span class="token string">"options"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment" spellcheck="true">// if not specified, defaults to options.root + node_modules</span>
|
|
|
|
<span class="token comment" spellcheck="true">// relative, resolves to options.root + ./modules</span>
|
|
<span class="token string">"node_modules"</span><span class="token punctuation">:</span> <span class="token string">"./modules"</span>
|
|
|
|
<span class="token comment" spellcheck="true">// absolute</span>
|
|
<span class="token string">"node_modules"</span><span class="token punctuation">:</span> <span class="token string">"/code/website/modules"</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre>
|
|
<h3 id="middleware-or-preset-options">Middleware or preset options</h3>
|
|
<p>Some middleware and presets also have their own custom options. Consult the documentation for the package for specific
|
|
details on its customization.</p>
|
|
<h2 id="overriding-build-configuration">Overriding build configuration</h2>
|
|
<p>Add a new property to <code>neutrino</code> named <code>config</code>. This will be an object where we can provide configuration data:</p>
|
|
<pre class="language-"><code class="lang-json"><span class="token punctuation">{</span>
|
|
<span class="token property">"neutrino"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"use"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token property">"config"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre>
|
|
<p>Populate this object with configuration overrides. This is not a Webpack configuration, but rather a Neutrino-compatible
|
|
object based on <a href="https://github.com/mozilla-neutrino/webpack-chain" target="_blank">webpack-chain</a>. A schematic of what this structure
|
|
looks like is located on the <a href="https://github.com/mozilla-neutrino/webpack-chain#merging-config" target="_blank">webpack-chain docs</a>.</p>
|
|
<h2 id="usage">Usage</h2>
|
|
<h3 id="entries">Entries</h3>
|
|
<p>Add files to named entry points, or define new entry points. This is a key named <code>entry</code>, with a value being an object.
|
|
This maps to points to enter the application. At this point the application starts executing.</p>
|
|
<p><em>Example: Define an entry point named <code>vendor</code> that bundles React packages separately from the application code.</em></p>
|
|
<pre class="language-"><code class="lang-json"><span class="token punctuation">{</span>
|
|
<span class="token property">"neutrino"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"config"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"entry"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"vendor"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token string">"react"</span><span class="token punctuation">,</span>
|
|
<span class="token string">"react-dom"</span><span class="token punctuation">,</span>
|
|
<span class="token string">"react-hot-loader"</span><span class="token punctuation">,</span>
|
|
<span class="token string">"react-router-dom"</span>
|
|
<span class="token punctuation">]</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre>
|
|
<h3 id="module">Module</h3>
|
|
<p>The <code>module</code> object defines how the different types of modules within a project will be treated. Any additional
|
|
properties attached to <code>module</code> not defined below will be set on the final module configuration.</p>
|
|
<h4 id="module-rules">Module Rules</h4>
|
|
<p>Using <code>module.rule</code> creates rules that are matched to requests when modules are created. These rules can modify how the
|
|
module is created. They can apply loaders to the module, or modify the parser. </p>
|
|
<p>Using <code>module.rule.loader</code> allows to you define the Webpack loader and its options for processing a particular rule.
|
|
This loader is usually a <code>dependency</code> or <code>devDependency</code> of your project. Each <code>loader</code> object can specify a property
|
|
for the string <code>loader</code> and an <code>options</code> object.</p>
|
|
<p><em>Example: Add LESS loading to the project, by overriding the <code>style</code> rule.</em></p>
|
|
<pre class="language-"><code class="lang-json"><span class="token punctuation">{</span>
|
|
<span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"less"</span><span class="token operator">:</span> <span class="token string">"^2.7.2"</span><span class="token punctuation">,</span>
|
|
<span class="token property">"less-loader"</span><span class="token operator">:</span> <span class="token string">"^2.2.3"</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token property">"neutrino"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"config"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"module"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"rule"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"style"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"test"</span><span class="token operator">:</span> <span class="token string">"\\.less$"</span><span class="token punctuation">,</span>
|
|
<span class="token property">"loader"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"less"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"loader"</span><span class="token operator">:</span> <span class="token string">"less-loader"</span><span class="token punctuation">,</span>
|
|
<span class="token property">"options"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"noIeCompat"</span><span class="token operator">:</span> <span class="token boolean">true</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre>
|
|
<h3 id="output">Output</h3>
|
|
<p>The <code>output</code> object contains a set of options instructing Webpack on how and where it should output your bundles,
|
|
assets, and anything else you bundle or load with Webpack. This option can be any property/value combination that
|
|
<a href="https://webpack.js.org/configuration/output/" target="_blank">Webpack accepts</a>.</p>
|
|
<p><em>Example: Change the public path of the application.</em></p>
|
|
<pre class="language-"><code class="lang-json"><span class="token punctuation">{</span>
|
|
<span class="token property">"neutrino"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"config"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"output"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"publicPath"</span><span class="token operator">:</span> <span class="token string">"https://cdn.example.com/assets/"</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre>
|
|
<h3 id="node">Node</h3>
|
|
<p>Use <code>node</code> to customize the Node.js environment using polyfills or mocks:</p>
|
|
<p><em>Example: mock the <code>__filename</code> and <code>__dirname</code> Node.js globals.</em></p>
|
|
<pre class="language-"><code class="lang-json"><span class="token punctuation">{</span>
|
|
<span class="token property">"neutrino"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"config"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"node"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"__filename"</span><span class="token operator">:</span> <span class="token string">"mock"</span><span class="token punctuation">,</span>
|
|
<span class="token property">"__dirname"</span><span class="token operator">:</span> <span class="token string">"mock"</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre>
|
|
<h3 id="devserver">DevServer</h3>
|
|
<p>Use <code>devServer</code> to customize webpack-dev-server and change its behavior in various ways.</p>
|
|
<p><em>Example: gzip the application when serving and listen on port 9000.</em></p>
|
|
<pre class="language-"><code class="lang-json"><span class="token punctuation">{</span>
|
|
<span class="token property">"neutrino"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"config"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"devServer"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"compress"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
|
<span class="token property">"port"</span><span class="token operator">:</span> <span class="token number">9000</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre>
|
|
<h3 id="resolve">Resolve</h3>
|
|
<p>Use <code>resolve</code> to change how modules are resolved. When using <code>resolve.extensions</code> and <code>resolve.modules</code>, these should be
|
|
specified as arrays, and will be merged with their respective definitions used in inherited presets. See the
|
|
webpack-chain docs for more details on this structure.</p>
|
|
<p><em>Example: Add <code>.mjs</code> as a resolving extension and specify modules are located in a <code>custom_modules</code> directory.</em></p>
|
|
<pre class="language-"><code class="lang-json"><span class="token punctuation">{</span>
|
|
<span class="token property">"neutrino"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"config"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"resolve"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"extensions"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">".mjs"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token property">"modules"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"custom_modules"</span><span class="token punctuation">]</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre>
|
|
<h3 id="resolveloader">ResolveLoader</h3>
|
|
<p>Use <code>resolveLoader</code> to change how loader packages are resolved. When using <code>resolveLoader.extensions</code> and
|
|
<code>resolveLoader.modules</code>, these should be specified as arrays, and will be merged with their respective definitions used
|
|
in inherited presets. See the webpack-chain docs for more details on this structure.</p>
|
|
<p><em>Example: Add <code>.loader.js</code> as a loader extension and specify modules are located in a <code>web_loaders</code> directory.</em></p>
|
|
<pre class="language-"><code class="lang-json"><span class="token punctuation">{</span>
|
|
<span class="token property">"neutrino"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"config"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"resolve"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"extensions"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">".loader.js"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token property">"modules"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"web_loaders"</span><span class="token punctuation">]</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre>
|
|
<h3 id="additional-configuration">Additional configuration</h3>
|
|
<p>Any top-level properties you set on <code>neutrino.config</code> will be added to the configuration.</p>
|
|
<p><em>Example: Change the Webpack performance options to error when exceeding performance budgets.</em></p>
|
|
<pre class="language-"><code class="lang-json"><span class="token punctuation">{</span>
|
|
<span class="token property">"neutrino"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"config"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"performance"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"hints"</span><span class="token operator">:</span> <span class="token string">"error"</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre>
|
|
<h2 id="advanced-configuration">Advanced Configuration</h2>
|
|
<p>With the options defined above in your package.json, you can perform a variety of build customizations on a per-project
|
|
basis. In the event that you need more customization than what is afforded through JSON, consider either switching to
|
|
<a href="advanced.html">advanced configuration</a>, or <a href="../creating-presets.html">creating your own preset</a>.</p>
|
|
|
|
|
|
</section>
|
|
|
|
</div>
|
|
<div class="search-results">
|
|
<div class="has-results">
|
|
|
|
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
|
|
<ul class="search-results-list"></ul>
|
|
|
|
</div>
|
|
<div class="no-results">
|
|
|
|
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<a href="./" class="navigation navigation-prev " aria-label="Previous page: Customization">
|
|
<i class="fa fa-angle-left"></i>
|
|
</a>
|
|
|
|
|
|
<a href="advanced.html" class="navigation navigation-next " aria-label="Next page: Advanced">
|
|
<i class="fa fa-angle-right"></i>
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<script>
|
|
var gitbook = gitbook || [];
|
|
gitbook.push(function() {
|
|
gitbook.page.hasChanged({"page":{"title":"Simple","level":"1.8.1","depth":2,"next":{"title":"Advanced","level":"1.8.2","depth":2,"path":"customization/advanced.md","ref":"./customization/advanced.md","articles":[]},"previous":{"title":"Customization","level":"1.8","depth":1,"path":"customization/README.md","ref":"./customization/README.md","articles":[{"title":"Simple","level":"1.8.1","depth":2,"path":"customization/simple.md","ref":"./customization/simple.md","articles":[]},{"title":"Advanced","level":"1.8.2","depth":2,"path":"customization/advanced.md","ref":"./customization/advanced.md","articles":[]}]},"dir":"ltr"},"config":{"plugins":["edit-link","prism","-highlight","github","anchorjs","npmsearchlist"],"root":"./docs","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"prism":{},"github":{"url":"https://github.com/mozilla-neutrino/neutrino-dev/"},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"npmsearchlist":{},"fontsettings":{"theme":"white","family":"sans","size":2},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"edit-link":{"label":"Edit page","base":"https://github.com/mozilla-neutrino/neutrino-dev/tree/master/docs"},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false},"anchorjs":{}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"Neutrino","gitbook":"*"},"file":{"path":"customization/simple.md","mtime":"2017-05-02T22:44:29.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-05-11T00:08:48.026Z"},"basePath":"..","book":{"language":""}});
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
|
|
<script src="../gitbook/gitbook.js"></script>
|
|
<script src="../gitbook/theme.js"></script>
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-edit-link/plugin.js"></script>
|
|
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-github/plugin.js"></script>
|
|
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/3.1.1/anchor.min.js"></script>
|
|
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-anchorjs/anchor-style.js"></script>
|
|
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-npmsearchlist/script.js"></script>
|
|
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
|
|
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-search/search.js"></script>
|
|
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
|
|
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
|
|
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
|
|
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|
|
|