Synchronized build
This commit is contained in:
Lektor Bot
parent
a34a0b55d6
commit
dc5f12b7a1
|
|
@ -195,8 +195,8 @@ supported by JSON directly and the return value will be in a format that
|
|||
allows safe embedding in HTML. However if you want to use this value in an
|
||||
attribute of an element it needs to use single quotes otherwise it will
|
||||
generate a syntax error due to the embedded quotes.</p>
|
||||
<h2 id="examples">Examples</h2><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/javascript"</span><span class="p">></span>
|
||||
<span class="kd">var</span> <span class="nx">options</span> <span class="o">=</span> <span class="cp">{{</span> <span class="o">{</span><span class="s1">'foo'</span><span class="o">:</span> <span class="s1">'bar'</span><span class="o">}|</span><span class="nf">tojson</span> <span class="cp">}}</span><span class="p">;</span>
|
||||
<h2 id="examples">Examples</h2><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/javascript"</span><span class="p">></span><span class="w"></span>
|
||||
<span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">options</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="cp">{{</span> <span class="o">{</span><span class="s1">'foo'</span><span class="o">:</span> <span class="s1">'bar'</span><span class="o">}|</span><span class="nf">tojson</span> <span class="cp">}}</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="p"></</span><span class="nt">script</span><span class="p">></span>
|
||||
</pre></div>
|
||||
<p>If used in attributes, single quotes are required:</p>
|
||||
|
|
|
|||
|
|
@ -232,48 +232,48 @@ installed for as long as someone else ran it before.</p>
|
|||
<li>all built files will go to <code>assets/static/gen</code></li>
|
||||
<li>there will be a <code>gen/app.js</code> and a <code>gen/styles.css</code> file to include</li>
|
||||
</ul>
|
||||
<div class="highlight"><pre><span></span><span class="kd">var</span> <span class="nx">webpack</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'webpack'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">path</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'path'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">ExtractTextPlugin</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'extract-text-webpack-plugin'</span><span class="p">);</span>
|
||||
<div class="highlight"><pre><span></span><span class="kd">var</span><span class="w"> </span><span class="nx">webpack</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s1">'webpack'</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="kd">var</span><span class="w"> </span><span class="nx">path</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s1">'path'</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="kd">var</span><span class="w"> </span><span class="nx">ExtractTextPlugin</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s1">'extract-text-webpack-plugin'</span><span class="p">);</span><span class="w"></span>
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">entry</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s1">'app'</span><span class="o">:</span> <span class="s1">'./js/main.js'</span><span class="p">,</span>
|
||||
<span class="s1">'styles'</span><span class="o">:</span> <span class="s1">'./scss/main.scss'</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">output</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">path</span><span class="o">:</span> <span class="nx">path</span><span class="p">.</span><span class="nx">dirname</span><span class="p">(</span><span class="nx">__dirname</span><span class="p">)</span> <span class="o">+</span> <span class="s1">'/assets/static/gen'</span><span class="p">,</span>
|
||||
<span class="nx">filename</span><span class="o">:</span> <span class="s1">'[name].js'</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">devtool</span><span class="o">:</span> <span class="s1">'#cheap-module-source-map'</span><span class="p">,</span>
|
||||
<span class="nx">resolve</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">modules</span><span class="o">:</span> <span class="p">[</span><span class="s1">'node_modules'</span><span class="p">],</span>
|
||||
<span class="nx">extensions</span><span class="o">:</span> <span class="p">[</span><span class="s1">'.js'</span><span class="p">]</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">module</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">rules</span><span class="o">:</span> <span class="p">[</span>
|
||||
<span class="p">{</span> <span class="nx">test</span><span class="o">:</span> <span class="sr">/\.js$/</span><span class="p">,</span> <span class="nx">exclude</span><span class="o">:</span> <span class="sr">/node_modules/</span><span class="p">,</span>
|
||||
<span class="nx">loader</span><span class="o">:</span> <span class="s1">'babel-loader'</span> <span class="p">},</span>
|
||||
<span class="p">{</span> <span class="nx">test</span><span class="o">:</span> <span class="sr">/\.scss$/</span><span class="p">,</span>
|
||||
<span class="nx">loader</span><span class="o">:</span> <span class="nx">ExtractTextPlugin</span><span class="p">.</span><span class="nx">extract</span><span class="p">({</span>
|
||||
<span class="nx">fallback</span><span class="o">:</span> <span class="s1">'style-loader'</span><span class="p">,</span>
|
||||
<span class="nx">use</span><span class="o">:</span> <span class="s1">'css-loader!sass-loader'</span> <span class="p">}</span> <span class="p">)</span> <span class="p">},</span>
|
||||
<span class="p">{</span> <span class="nx">test</span><span class="o">:</span> <span class="sr">/\.css$/</span><span class="p">,</span>
|
||||
<span class="nx">loader</span><span class="o">:</span> <span class="nx">ExtractTextPlugin</span><span class="p">.</span><span class="nx">extract</span><span class="p">({</span>
|
||||
<span class="nx">fallback</span><span class="o">:</span> <span class="s1">'style-loader'</span><span class="p">,</span>
|
||||
<span class="nx">use</span><span class="o">:</span> <span class="s1">'css-loader'</span> <span class="p">}</span> <span class="p">)</span> <span class="p">},</span>
|
||||
<span class="p">{</span> <span class="nx">test</span><span class="o">:</span> <span class="sr">/\.(woff2?|ttf|eot|svg|png|jpe?g|gif)$/</span><span class="p">,</span>
|
||||
<span class="nx">loader</span><span class="o">:</span> <span class="s1">'file'</span> <span class="p">}</span>
|
||||
<span class="p">]</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">plugins</span><span class="o">:</span> <span class="p">[</span>
|
||||
<span class="ow">new</span> <span class="nx">ExtractTextPlugin</span><span class="p">({</span>
|
||||
<span class="nx">filename</span><span class="o">:</span> <span class="s1">'styles.css'</span><span class="p">,</span>
|
||||
<span class="nx">allChunks</span><span class="o">:</span> <span class="kc">true</span>
|
||||
<span class="p">}),</span>
|
||||
<span class="ow">new</span> <span class="nx">webpack</span><span class="p">.</span><span class="nx">optimize</span><span class="p">.</span><span class="nx">UglifyJsPlugin</span><span class="p">()</span>
|
||||
<span class="p">]</span>
|
||||
<span class="p">};</span>
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">entry</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s1">'app'</span><span class="o">:</span><span class="w"> </span><span class="s1">'./js/main.js'</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s1">'styles'</span><span class="o">:</span><span class="w"> </span><span class="s1">'./scss/main.scss'</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">output</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">path</span><span class="o">:</span><span class="w"> </span><span class="nx">path</span><span class="p">.</span><span class="nx">dirname</span><span class="p">(</span><span class="nx">__dirname</span><span class="p">)</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s1">'/assets/static/gen'</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">filename</span><span class="o">:</span><span class="w"> </span><span class="s1">'[name].js'</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">devtool</span><span class="o">:</span><span class="w"> </span><span class="s1">'#cheap-module-source-map'</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">resolve</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">modules</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s1">'node_modules'</span><span class="p">],</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">extensions</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s1">'.js'</span><span class="p">]</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">module</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">rules</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">test</span><span class="o">:</span><span class="w"> </span><span class="sr">/\.js$/</span><span class="p">,</span><span class="w"> </span><span class="nx">exclude</span><span class="o">:</span><span class="w"> </span><span class="sr">/node_modules/</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">loader</span><span class="o">:</span><span class="w"> </span><span class="s1">'babel-loader'</span><span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">test</span><span class="o">:</span><span class="w"> </span><span class="sr">/\.scss$/</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">loader</span><span class="o">:</span><span class="w"> </span><span class="nx">ExtractTextPlugin</span><span class="p">.</span><span class="nx">extract</span><span class="p">({</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">fallback</span><span class="o">:</span><span class="w"> </span><span class="s1">'style-loader'</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">use</span><span class="o">:</span><span class="w"> </span><span class="s1">'css-loader!sass-loader'</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">test</span><span class="o">:</span><span class="w"> </span><span class="sr">/\.css$/</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">loader</span><span class="o">:</span><span class="w"> </span><span class="nx">ExtractTextPlugin</span><span class="p">.</span><span class="nx">extract</span><span class="p">({</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">fallback</span><span class="o">:</span><span class="w"> </span><span class="s1">'style-loader'</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">use</span><span class="o">:</span><span class="w"> </span><span class="s1">'css-loader'</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">test</span><span class="o">:</span><span class="w"> </span><span class="sr">/\.(woff2?|ttf|eot|svg|png|jpe?g|gif)$/</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">loader</span><span class="o">:</span><span class="w"> </span><span class="s1">'file'</span><span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">]</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">plugins</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">ExtractTextPlugin</span><span class="p">({</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">filename</span><span class="o">:</span><span class="w"> </span><span class="s1">'styles.css'</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">allChunks</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}),</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">webpack</span><span class="p">.</span><span class="nx">optimize</span><span class="p">.</span><span class="nx">UglifyJsPlugin</span><span class="p">()</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">]</span><span class="w"></span>
|
||||
<span class="p">};</span><span class="w"></span>
|
||||
</pre></div>
|
||||
<h2 id="creating-the-app">Creating the App</h2><p>Now we can start building our app. We configured at least two files
|
||||
in webpack: <code>js/main.js</code> and <code>scss/main.scss</code>. Those are the entry
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@ speak multiple languages and allow you to easily create localized websites.</li>
|
|||
<div class="slideshow-wrapper">
|
||||
<div class="slideshow">
|
||||
<div class="slideshow-inner">
|
||||
<div class="carousel slide" data-ride="carousel" data-interval="8500" id="carousel-9bb3620d3ccb48e99944981e3c93e4cf">
|
||||
<div class="carousel slide" data-ride="carousel" data-interval="8500" id="carousel-08425d57c51e493b95bc5d72a2ce243e">
|
||||
|
||||
<div class="carousel-inner" role="listbox">
|
||||
|
||||
|
|
@ -210,11 +210,11 @@ be completely customized.</p>
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<a class="left carousel-control" href="#carousel-9bb3620d3ccb48e99944981e3c93e4cf" role="button" data-slide="prev">
|
||||
<a class="left carousel-control" href="#carousel-08425d57c51e493b95bc5d72a2ce243e" role="button" data-slide="prev">
|
||||
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#carousel-9bb3620d3ccb48e99944981e3c93e4cf" role="button" data-slide="next">
|
||||
<a class="right carousel-control" href="#carousel-08425d57c51e493b95bc5d72a2ce243e" role="button" data-slide="next">
|
||||
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -206,7 +206,7 @@ $ yarn add parcel-bundler babel-preset-env node-sass
|
|||
</pre>
|
||||
<h3><code>parcel/main.js</code></h3>
|
||||
<p>A simple Javascript file that imports the SCSS file so that Parcel will know to include it as well.</p>
|
||||
<pre><span class="k">import</span> <span class="s1">'./main.scss'</span><span class="p">;</span>
|
||||
<pre><span class="k">import</span><span class="w"> </span><span class="s1">'./main.scss'</span><span class="p">;</span><span class="w"></span>
|
||||
</pre>
|
||||
<h2>Running the Server</h2>
|
||||
<p>Now you're ready to go. When you run <code>lektor server</code> nothing wil happen,
|
||||
|
|
|
|||
|
|
@ -138,47 +138,47 @@
|
|||
These files will then be copied over to Lektors templates folder so that they can be used by Lektor.
|
||||
This plugin depends on the <a href="https://github.com/lektor/lektor-webpack-support" rel="nofollow">lektor-webpack-support</a> plugin to be really useful.</p>
|
||||
<h1>webpack/webpack.config.js</h1>
|
||||
<pre><span class="kd">const</span> <span class="nx">path</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">"path"</span><span class="p">);</span>
|
||||
<span class="kd">const</span> <span class="nx">MiniCssExtractPlugin</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">"mini-css-extract-plugin"</span><span class="p">);</span>
|
||||
<span class="kd">const</span> <span class="nx">HtmlWebpackPlugin</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">"html-webpack-plugin"</span><span class="p">);</span>
|
||||
<span class="kd">const</span> <span class="p">{</span> <span class="nx">CleanWebpackPlugin</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">"clean-webpack-plugin"</span><span class="p">);</span>
|
||||
<pre><span class="kd">const</span><span class="w"> </span><span class="nx">path</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s2">"path"</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">MiniCssExtractPlugin</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s2">"mini-css-extract-plugin"</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">HtmlWebpackPlugin</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s2">"html-webpack-plugin"</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">CleanWebpackPlugin</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s2">"clean-webpack-plugin"</span><span class="p">);</span><span class="w"></span>
|
||||
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">mode</span><span class="o">:</span> <span class="s2">"production"</span><span class="p">,</span>
|
||||
<span class="nx">entry</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">main</span><span class="o">:</span> <span class="s2">"./src/index.js"</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">output</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">filename</span><span class="o">:</span> <span class="s2">"[name].bundle.js"</span><span class="p">,</span>
|
||||
<span class="nx">path</span><span class="o">:</span> <span class="nx">path</span><span class="p">.</span><span class="nx">dirname</span><span class="p">(</span><span class="nx">__dirname</span><span class="p">)</span> <span class="o">+</span> <span class="s2">"/assets/generated"</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">optimization</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">minimizer</span><span class="o">:</span> <span class="p">[</span>
|
||||
<span class="ow">new</span> <span class="nx">HtmlWebpackPlugin</span><span class="p">({</span>
|
||||
<span class="nx">inject</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
|
||||
<span class="nx">filename</span><span class="o">:</span> <span class="s2">"layout_generated.html"</span><span class="p">,</span>
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s2">"./src/layout_template.html"</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">],</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">plugins</span><span class="o">:</span> <span class="p">[</span>
|
||||
<span class="ow">new</span> <span class="nx">CleanWebpackPlugin</span><span class="p">(),</span>
|
||||
<span class="ow">new</span> <span class="nx">MiniCssExtractPlugin</span><span class="p">({</span>
|
||||
<span class="nx">filename</span><span class="o">:</span> <span class="s2">"[name].css"</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">],</span>
|
||||
<span class="nx">module</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">rules</span><span class="o">:</span> <span class="p">[{</span>
|
||||
<span class="nx">test</span><span class="o">:</span> <span class="sr">/\.scss$/</span><span class="p">,</span>
|
||||
<span class="nx">use</span><span class="o">:</span> <span class="p">[</span>
|
||||
<span class="nx">MiniCssExtractPlugin</span><span class="p">.</span><span class="nx">loader</span><span class="p">,</span>
|
||||
<span class="s2">"css-loader"</span><span class="p">,</span>
|
||||
<span class="s2">"sass-loader"</span>
|
||||
<span class="p">]</span>
|
||||
<span class="p">}]</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">mode</span><span class="o">:</span><span class="w"> </span><span class="s2">"production"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">entry</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">main</span><span class="o">:</span><span class="w"> </span><span class="s2">"./src/index.js"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">output</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">filename</span><span class="o">:</span><span class="w"> </span><span class="s2">"[name].bundle.js"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">path</span><span class="o">:</span><span class="w"> </span><span class="nx">path</span><span class="p">.</span><span class="nx">dirname</span><span class="p">(</span><span class="nx">__dirname</span><span class="p">)</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s2">"/assets/generated"</span><span class="w"> </span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">optimization</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">minimizer</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">HtmlWebpackPlugin</span><span class="p">({</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">inject</span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">filename</span><span class="o">:</span><span class="w"> </span><span class="s2">"layout_generated.html"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">template</span><span class="o">:</span><span class="w"> </span><span class="s2">"./src/layout_template.html"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">})</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">],</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">plugins</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">CleanWebpackPlugin</span><span class="p">(),</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">MiniCssExtractPlugin</span><span class="p">({</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">filename</span><span class="o">:</span><span class="w"> </span><span class="s2">"[name].css"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">})</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">],</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">module</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">rules</span><span class="o">:</span><span class="w"> </span><span class="p">[{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">test</span><span class="o">:</span><span class="w"> </span><span class="sr">/\.scss$/</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">use</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">MiniCssExtractPlugin</span><span class="p">.</span><span class="nx">loader</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"css-loader"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"sass-loader"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">]</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}]</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
</pre>
|
||||
<h1>webpack/src/layout_template.html</h1>
|
||||
<pre><span class="cp"><!DOCTYPE html></span>
|
||||
|
|
|
|||
|
|
@ -182,43 +182,43 @@ setup that's good enough to cover most things you will encounter. The
|
|||
idea is to build the files from <code>webpack/scss</code> and <code>webpack/js</code> into
|
||||
<code>assets/static/gen</code> so that we can use it even if we do not have webpack
|
||||
installed for as long as someone else ran it before.</p>
|
||||
<pre><span class="kd">const</span> <span class="nx">path</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">"path"</span><span class="p">);</span>
|
||||
<span class="kd">const</span> <span class="nx">MiniCssExtractPlugin</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">"mini-css-extract-plugin"</span><span class="p">);</span>
|
||||
<pre><span class="kd">const</span><span class="w"> </span><span class="nx">path</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s2">"path"</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="kd">const</span><span class="w"> </span><span class="nx">MiniCssExtractPlugin</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s2">"mini-css-extract-plugin"</span><span class="p">);</span><span class="w"></span>
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">entry</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">app</span><span class="o">:</span> <span class="s2">"./js/main.js"</span><span class="p">,</span>
|
||||
<span class="nx">styles</span><span class="o">:</span> <span class="s2">"./scss/main.scss"</span><span class="p">,</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">output</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">path</span><span class="o">:</span> <span class="nx">path</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="nx">path</span><span class="p">.</span><span class="nx">dirname</span><span class="p">(</span><span class="nx">__dirname</span><span class="p">),</span> <span class="s2">"assets"</span><span class="p">,</span> <span class="s2">"static"</span><span class="p">,</span> <span class="s2">"gen"</span><span class="p">),</span>
|
||||
<span class="nx">filename</span><span class="o">:</span> <span class="s2">"[name].js"</span><span class="p">,</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">devtool</span><span class="o">:</span> <span class="s2">"source-map"</span><span class="p">,</span>
|
||||
<span class="nx">mode</span><span class="o">:</span> <span class="s2">"production"</span><span class="p">,</span>
|
||||
<span class="nx">module</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">rules</span><span class="o">:</span> <span class="p">[</span>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">test</span><span class="o">:</span> <span class="sr">/\.js$/</span><span class="p">,</span>
|
||||
<span class="nx">exclude</span><span class="o">:</span> <span class="sr">/node_modules/</span><span class="p">,</span>
|
||||
<span class="nx">use</span><span class="o">:</span> <span class="p">[</span><span class="s2">"babel-loader"</span><span class="p">],</span>
|
||||
<span class="p">},</span>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">test</span><span class="o">:</span> <span class="sr">/\.scss$/</span><span class="p">,</span>
|
||||
<span class="nx">use</span><span class="o">:</span> <span class="p">[</span><span class="nx">MiniCssExtractPlugin</span><span class="p">.</span><span class="nx">loader</span><span class="p">,</span> <span class="s2">"css-loader"</span><span class="p">,</span> <span class="s2">"sass-loader"</span><span class="p">],</span>
|
||||
<span class="p">},</span>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">test</span><span class="o">:</span> <span class="sr">/\.css$/</span><span class="p">,</span>
|
||||
<span class="nx">use</span><span class="o">:</span> <span class="p">[</span><span class="nx">MiniCssExtractPlugin</span><span class="p">.</span><span class="nx">loader</span><span class="p">,</span> <span class="s2">"css-loader"</span><span class="p">],</span>
|
||||
<span class="p">},</span>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">test</span><span class="o">:</span> <span class="sr">/\.(woff2?|ttf|eot|svg|png|jpe?g|gif)$/</span><span class="p">,</span>
|
||||
<span class="nx">use</span><span class="o">:</span> <span class="p">[</span><span class="s2">"file"</span><span class="p">],</span>
|
||||
<span class="p">},</span>
|
||||
<span class="p">],</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">plugins</span><span class="o">:</span> <span class="p">[</span><span class="ow">new</span> <span class="nx">MiniCssExtractPlugin</span><span class="p">({</span> <span class="nx">filename</span><span class="o">:</span> <span class="s2">"styles.css"</span> <span class="p">})],</span>
|
||||
<span class="p">};</span>
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">entry</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">app</span><span class="o">:</span><span class="w"> </span><span class="s2">"./js/main.js"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">styles</span><span class="o">:</span><span class="w"> </span><span class="s2">"./scss/main.scss"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">output</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">path</span><span class="o">:</span><span class="w"> </span><span class="nx">path</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="nx">path</span><span class="p">.</span><span class="nx">dirname</span><span class="p">(</span><span class="nx">__dirname</span><span class="p">),</span><span class="w"> </span><span class="s2">"assets"</span><span class="p">,</span><span class="w"> </span><span class="s2">"static"</span><span class="p">,</span><span class="w"> </span><span class="s2">"gen"</span><span class="p">),</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">filename</span><span class="o">:</span><span class="w"> </span><span class="s2">"[name].js"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">devtool</span><span class="o">:</span><span class="w"> </span><span class="s2">"source-map"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">mode</span><span class="o">:</span><span class="w"> </span><span class="s2">"production"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">module</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">rules</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">test</span><span class="o">:</span><span class="w"> </span><span class="sr">/\.js$/</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">exclude</span><span class="o">:</span><span class="w"> </span><span class="sr">/node_modules/</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">use</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"babel-loader"</span><span class="p">],</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">test</span><span class="o">:</span><span class="w"> </span><span class="sr">/\.scss$/</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">use</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="nx">MiniCssExtractPlugin</span><span class="p">.</span><span class="nx">loader</span><span class="p">,</span><span class="w"> </span><span class="s2">"css-loader"</span><span class="p">,</span><span class="w"> </span><span class="s2">"sass-loader"</span><span class="p">],</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">test</span><span class="o">:</span><span class="w"> </span><span class="sr">/\.css$/</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">use</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="nx">MiniCssExtractPlugin</span><span class="p">.</span><span class="nx">loader</span><span class="p">,</span><span class="w"> </span><span class="s2">"css-loader"</span><span class="p">],</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">test</span><span class="o">:</span><span class="w"> </span><span class="sr">/\.(woff2?|ttf|eot|svg|png|jpe?g|gif)$/</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">use</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"file"</span><span class="p">],</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">],</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nx">plugins</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="ow">new</span><span class="w"> </span><span class="nx">MiniCssExtractPlugin</span><span class="p">({</span><span class="w"> </span><span class="nx">filename</span><span class="o">:</span><span class="w"> </span><span class="s2">"styles.css"</span><span class="w"> </span><span class="p">})],</span><span class="w"></span>
|
||||
<span class="p">};</span><span class="w"></span>
|
||||
</pre>
|
||||
<h2>Creating the App</h2>
|
||||
<p>Now we can start building our app. We configured at least two files
|
||||
|
|
|
|||
Loading…
Reference in New Issue