asset management in css

notes.md

@@ -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/). 
+

webpack.config.js

@@ -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,