Compare commits
No commits in common. "8e6ad9fb42cf0dbe7111643185e951ac957284dd" and "bc8fa72fa6cd408b4d0392758f84df0ea1ba2e64" have entirely different histories.
8e6ad9fb42
...
bc8fa72fa6
91
notes.md
91
notes.md
|
|
@ -1,91 +0,0 @@
|
||||||
Requirements
|
|
||||||
|
|
||||||
* html
|
|
||||||
- templating
|
|
||||||
* js
|
|
||||||
- babel transpilation
|
|
||||||
- source maps
|
|
||||||
- minification on production
|
|
||||||
- eslint
|
|
||||||
* css preprocessing
|
|
||||||
- nested selectors
|
|
||||||
- variables
|
|
||||||
- mixins
|
|
||||||
- functions
|
|
||||||
- autoprefixer
|
|
||||||
- imports
|
|
||||||
- source maps
|
|
||||||
- minification on production
|
|
||||||
- stylelint
|
|
||||||
* live server with hmr
|
|
||||||
* clean dist directories
|
|
||||||
|
|
||||||
## NOT INCLUDED
|
|
||||||
* code splitting
|
|
||||||
|
|
||||||
#### html
|
|
||||||
|
|
||||||
* html-webpack-plugin - automatically create index.html or use a template file
|
|
||||||
also takes care of templating - default templating is ejs
|
|
||||||
* ejs-compiled-loader (for use with the ejs templates)
|
|
||||||
bit of a fuck on getting it to work - [issue](https://github.com/bazilio91/ejs-compiled-loader/issues/46)
|
|
||||||
|
|
||||||
#### js
|
|
||||||
|
|
||||||
* @babel/core
|
|
||||||
- also takes care of minification in production
|
|
||||||
* @babel/preset-env
|
|
||||||
* babel-loader
|
|
||||||
* eslint
|
|
||||||
* eslint-webpack-plugin
|
|
||||||
|
|
||||||
#### css
|
|
||||||
|
|
||||||
* css-loader
|
|
||||||
* sass-loader
|
|
||||||
* style-loader - injects css into dom (defaults to style tags)
|
|
||||||
* mini-css-extract-plugin - extracts css to separate files
|
|
||||||
* postcss-loader
|
|
||||||
* postcss-preset-env
|
|
||||||
takes care of autoprefixing(?) (supposedly nesting too but i needed to install
|
|
||||||
postcss-nested)
|
|
||||||
* postcss-nested
|
|
||||||
* postcss-import
|
|
||||||
* postcss-mixins
|
|
||||||
* postcss-functions
|
|
||||||
* cssnano-webpack-plugin
|
|
||||||
* stylelint
|
|
||||||
* stylelint-webpack-plugin
|
|
||||||
|
|
||||||
#### other
|
|
||||||
* clean-webpack-plugin
|
|
||||||
|
|
||||||
#### live server
|
|
||||||
* webpack-dev-server
|
|
||||||
|
|
||||||
|
|
||||||
## Installation notes
|
|
||||||
|
|
||||||
## Notes
|
|
||||||
|
|
||||||
### assets - jpgs, svgs, etc
|
|
||||||
|
|
||||||
loaded with webpack 5's asset modules.
|
|
||||||
path to asset file is relative from the source file.
|
|
||||||
assets are automatically inlined or exported as a resource based on file size.
|
|
||||||
this default size is 8kb. - can configure see [docs](https://webpack.js.org/guides/asset-modules/).
|
|
||||||
|
|
||||||
Now, when you import MyImage from '../img/my-image.png', that image will be processed and added to your output directory and the MyImage variable will contain the final url of that image after processing.
|
|
||||||
When using the css-loader, as shown above, a similar process will occur for url('../img/my-image.png') within your CSS. The loader will recognize this is a local file, and replace the '../img/my-image.png' path with the final path to the image in your output directory.
|
|
||||||
The html-loader handles <img src="./my-image.png" /> in the same manner.
|
|
||||||
however, in the template files need to use:
|
|
||||||
```
|
|
||||||
<img src="<%=require('../img/my-img.jpg');%>">
|
|
||||||
```
|
|
||||||
|
|
||||||
javascript is the usual:
|
|
||||||
```
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -2,4 +2,3 @@
|
||||||
@import 'variables.css';
|
@import 'variables.css';
|
||||||
@import 'colors.css';
|
@import 'colors.css';
|
||||||
@import 'base/base.css';
|
@import 'base/base.css';
|
||||||
|
|
||||||
|
|
|
||||||
BIN
src/img/1.jpg
BIN
src/img/1.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 171 KiB |
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE HTML>
|
<!DOCTYPE HTML>
|
||||||
<html class="no-js" lang="en">
|
<html class="no-js is-loading" lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
<!-- Place favicon.ico in the root directory -->
|
<!-- Place favicon.ico in the root directory -->
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.documentElement.classList.remove('no-js');
|
document.documentElement.classlist.remove('no-js');
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="component">
|
<div class="component">
|
||||||
<p><%= text %></p>
|
<p><%= text %></p>
|
||||||
<img src="<%=require('../../img/1.jpg');%>">
|
<p>woot!</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,7 @@ module.exports = (env) => ({
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.js$/,
|
test: /\.js?/,
|
||||||
exclude: /node_modules/,
|
exclude: /node_modules/,
|
||||||
use: {
|
use: {
|
||||||
loader: 'babel-loader',
|
loader: 'babel-loader',
|
||||||
|
|
@ -86,31 +86,12 @@ module.exports = (env) => ({
|
||||||
test: /\.css$/i,
|
test: /\.css$/i,
|
||||||
include: path.resolve(__dirname, 'src/css'),
|
include: path.resolve(__dirname, 'src/css'),
|
||||||
exclude: /\.inline\.css$/i,
|
exclude: /\.inline\.css$/i,
|
||||||
use: [
|
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
|
||||||
{
|
|
||||||
loader: MiniCssExtractPlugin.loader,
|
|
||||||
options: {
|
|
||||||
publicPath: '',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
'css-loader',
|
|
||||||
'postcss-loader',
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.scss$/i,
|
test: /\.scss$/i,
|
||||||
include: path.resolve(__dirname, 'src/sass'),
|
include: path.resolve(__dirname, 'src/sass'),
|
||||||
use: [
|
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
|
||||||
{
|
|
||||||
loader: MiniCssExtractPlugin.loader,
|
|
||||||
options: {
|
|
||||||
publicPath: '',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
'css-loader',
|
|
||||||
'postcss-loader',
|
|
||||||
'sass-loader',
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /.(png|svg|jpg|jpeg|gif)$/i,
|
test: /.(png|svg|jpg|jpeg|gif)$/i,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue