asset management in css

This commit is contained in:
Ray Elliott 2021-02-28 13:09:45 +00:00
parent a81fdfa89c
commit a20bee87d2
2 changed files with 99 additions and 3 deletions

77
notes.md Normal file
View File

@ -0,0 +1,77 @@
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
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.
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/).

View File

@ -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,12 +86,31 @@ 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: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'], use: [
{
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: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'], use: [
{
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,