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

@ -6,13 +6,14 @@
"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,22 +1,29 @@
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);
return {
mode: env.production ? 'production' : 'development',
target: 'web',
entry: './src/js/index.js', entry: './src/js/index.js',
output: { output: {
filename: '[name].bundle.js', filename: env.production ? '[name].[contenthash].bundle.js' : '[name].bundle.js',
path: path.resolve(__dirname, 'dist'), path: path.resolve(__dirname, 'dist'),
}, },
devtool: 'inline-source-map', devtool: env.production ? 'cheap-source-map' : 'inline-source-map',
devServer: { devServer: {
contentBase: './dist', contentBase: './dist',
hot: true, hot: true,
}, },
plugins: [ plugins: [
new MiniCssExtractPlugin(), new MiniCssExtractPlugin({
filename: env.production ? '[name].[contenthash].css' : '[name].css',
}),
new CleanWebpackPlugin(), new CleanWebpackPlugin(),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
template: 'src/html/index.html' template: 'src/html/index.html'
@ -26,6 +33,7 @@ module.exports = {
rules: [ rules: [
{ {
test: /\.inline\.css$/i, test: /\.inline\.css$/i,
include: path.resolve(__dirname, 'src/css'),
use: [ use: [
{ {
loader: 'style-loader', loader: 'style-loader',
@ -54,13 +62,23 @@ module.exports = {
}, },
{ {
test: /\.css$/i, test: /\.css$/i,
include: path.resolve(__dirname, 'src/css'),
exclude: /\.inline\.css$/i, exclude: /\.inline\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'], use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
}, },
{ {
test: /.(png|svg|jpg|jpeg|gif)$/i, test: /.(png|svg|jpg|jpeg|gif)$/i,
include: path.resolve(__dirname, 'src'),
type: 'asset', type: 'asset',
}, },
] ]
}, },
optimization: {
minimizer: [
new CssnanoPlugin({
sourceMap: true,
})
],
},
}
}; };