css minification with cssnano

This commit is contained in:
Ray Elliott 2021-01-03 18:28:42 +00:00
parent 4458e677ee
commit aaf01c5f21
4 changed files with 1949 additions and 64 deletions

View File

@ -20,6 +20,10 @@ Requirements
* live server with hmr
* clean dist directories
## NOT INCLUDED
* code splitting
#### html
* html-webpack-plugin - automatically create index.html or use a template file
@ -47,18 +51,17 @@ Requirements
* postcss-import
* postcss-mixins
* postcss-functions
* cssnano-webpack-plugin
* stylelint
* stylelint-webpack-plugin
* cssnano
#### other
* webpack-dev-server
* clean-webpack-plugin
#### live server
* webpack-dev-server
@ -71,7 +74,7 @@ with
`"private": "true"`
## Usage Notes
## Notes
Asset management:
@ -97,3 +100,7 @@ If we don't want the loader to treat it as a local file we can use (in webpack.c
types - asset/resource (file-loader), asset/inline (url-loader), asset/source (raw-loader), asset (url-loader)
for `asset` default size is 8kb. - can configure see
[docs](https://webpack.js.org/guides/asset-modules/).
## Environment variables
to use environment variables, must change module.exports to use a function.

1859
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -5,14 +5,15 @@
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve",
"build": "webpack"
"start": "webpack serve",
"build": "webpack --env production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"cssnano-webpack-plugin": "^1.0.3",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.3.3",
"postcss": "^8.2.2",

View File

@ -1,66 +1,84 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssnanoPlugin = require ('cssnano-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/js/index.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
hot: true,
},
plugins: [
new MiniCssExtractPlugin(),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: 'src/html/index.html'
}),
],
module: {
rules: [
{
test: /\.inline\.css$/i,
use: [
{
loader: 'style-loader',
options: {
insert: function insertAtTop(element) {
var parent = document.querySelector('head');
// eslint-disable-next-line no-underscore-dangle
var lastInsertedElement =
window._lastElementInsertedByStyleLoader;
module.exports = env => {
console.log(env);
if (!lastInsertedElement) {
parent.insertBefore(element, parent.firstChild);
} else if (lastInsertedElement.nextSibling) {
parent.insertBefore(element, lastInsertedElement.nextSibling);
} else {
parent.appendChild(element);
}
return {
mode: env.production ? 'production' : 'development',
target: 'web',
entry: './src/js/index.js',
output: {
filename: env.production ? '[name].[contenthash].bundle.js' : '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
devtool: env.production ? 'cheap-source-map' : 'inline-source-map',
devServer: {
contentBase: './dist',
hot: true,
},
plugins: [
new MiniCssExtractPlugin({
filename: env.production ? '[name].[contenthash].css' : '[name].css',
}),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: 'src/html/index.html'
}),
],
module: {
rules: [
{
test: /\.inline\.css$/i,
include: path.resolve(__dirname, 'src/css'),
use: [
{
loader: 'style-loader',
options: {
insert: function insertAtTop(element) {
var parent = document.querySelector('head');
// eslint-disable-next-line no-underscore-dangle
var lastInsertedElement =
window._lastElementInsertedByStyleLoader;
// eslint-disable-next-line no-underscore-dangle
window._lastElementInsertedByStyleLoader = element;
},
},
},
'css-loader',
'postcss-loader'],
},
{
test: /\.css$/i,
exclude: /\.inline\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
},
{
test: /.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset',
},
]
},
if (!lastInsertedElement) {
parent.insertBefore(element, parent.firstChild);
} else if (lastInsertedElement.nextSibling) {
parent.insertBefore(element, lastInsertedElement.nextSibling);
} else {
parent.appendChild(element);
}
// eslint-disable-next-line no-underscore-dangle
window._lastElementInsertedByStyleLoader = element;
},
},
},
'css-loader',
'postcss-loader'],
},
{
test: /\.css$/i,
include: path.resolve(__dirname, 'src/css'),
exclude: /\.inline\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
},
{
test: /.(png|svg|jpg|jpeg|gif)$/i,
include: path.resolve(__dirname, 'src'),
type: 'asset',
},
]
},
optimization: {
minimizer: [
new CssnanoPlugin({
sourceMap: true,
})
],
},
}
};