asset management in css
This commit is contained in:
parent
a81fdfa89c
commit
a20bee87d2
|
@ -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/).
|
||||
|
|
@ -45,7 +45,7 @@ module.exports = (env) => ({
|
|||
},
|
||||
},
|
||||
{
|
||||
test: /\.js?/,
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
|
@ -86,12 +86,31 @@ module.exports = (env) => ({
|
|||
test: /\.css$/i,
|
||||
include: path.resolve(__dirname, 'src/css'),
|
||||
exclude: /\.inline\.css$/i,
|
||||
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
|
||||
use: [
|
||||
{
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
options: {
|
||||
publicPath: '',
|
||||
},
|
||||
},
|
||||
'css-loader',
|
||||
'postcss-loader',
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.scss$/i,
|
||||
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,
|
||||
|
|
Loading…
Reference in New Issue