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 * live server with hmr
* clean dist directories * clean dist directories
## NOT INCLUDED
* code splitting
#### html #### html
* html-webpack-plugin - automatically create index.html or use a template file * html-webpack-plugin - automatically create index.html or use a template file
@ -47,18 +51,17 @@ Requirements
* postcss-import * postcss-import
* postcss-mixins * postcss-mixins
* postcss-functions * postcss-functions
* cssnano-webpack-plugin
* stylelint * stylelint
* stylelint-webpack-plugin * stylelint-webpack-plugin
* cssnano
#### other #### other
* webpack-dev-server
* clean-webpack-plugin * clean-webpack-plugin
#### live server #### live server
* webpack-dev-server
@ -71,7 +74,7 @@ with
`"private": "true"` `"private": "true"`
## Usage Notes ## Notes
Asset management: 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) 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 for `asset` default size is 8kb. - can configure see
[docs](https://webpack.js.org/guides/asset-modules/). [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, "private": true,
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve", "start": "webpack serve",
"build": "webpack" "build": "webpack --env production"
}, },
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"clean-webpack-plugin": "^3.0.0", "clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1", "css-loader": "^5.0.1",
"cssnano-webpack-plugin": "^1.0.3",
"html-webpack-plugin": "^4.5.0", "html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.3.3", "mini-css-extract-plugin": "^1.3.3",
"postcss": "^8.2.2", "postcss": "^8.2.2",

View File

@ -1,66 +1,84 @@
const path = require('path'); const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssnanoPlugin = require ('cssnano-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = { module.exports = env => {
mode: 'development', console.log(env);
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;
if (!lastInsertedElement) { return {
parent.insertBefore(element, parent.firstChild); mode: env.production ? 'production' : 'development',
} else if (lastInsertedElement.nextSibling) { target: 'web',
parent.insertBefore(element, lastInsertedElement.nextSibling); entry: './src/js/index.js',
} else { output: {
parent.appendChild(element); 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 if (!lastInsertedElement) {
window._lastElementInsertedByStyleLoader = element; parent.insertBefore(element, parent.firstChild);
}, } else if (lastInsertedElement.nextSibling) {
}, parent.insertBefore(element, lastInsertedElement.nextSibling);
}, } else {
'css-loader', parent.appendChild(element);
'postcss-loader'], }
},
{ // eslint-disable-next-line no-underscore-dangle
test: /\.css$/i, window._lastElementInsertedByStyleLoader = element;
exclude: /\.inline\.css$/i, },
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'], },
}, },
{ 'css-loader',
test: /.(png|svg|jpg|jpeg|gif)$/i, 'postcss-loader'],
type: 'asset', },
}, {
] 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,
})
],
},
}
}; };