webpack3.0 压缩css 但是不在html中引用,16-webpack 压缩 CSS 代码

从 06-webpack 加载 CSS 之后，能够正常加载 CSS ，并且能够正常显示。

要看到压缩 CSS 代码效果，需要先把 CSS 从 bundle.js 中抽离出来，并导入独立的文件中去，然后再添加压缩操作。

一、导出 CSS 到独立文件

需要通过 mini-css-extract-plugin 插件来完成。

1.1 安装

npm install --save-dev mini-css-extract-plugin

//

yarn add mini-css-extract-plugin --dev

安装成功

yarn add v1.16.0

[1/4] 🔍 Resolving packages...

[2/4] 🚚 Fetching packages...

[3/4] 🔗 Linking dependencies...

[4/4] 🔨 Building fresh packages...

success Saved lockfile.

success Saved 7 new dependencies.

info Direct dependencies

└─ mini-css-extract-plugin@0.8.0

info All dependencies

├─ is-plain-obj@1.1.0

├─ mini-css-extract-plugin@0.8.0

├─ normalize-url@1.9.1

├─ prepend-http@1.0.4

├─ query-string@4.3.4

├─ sort-keys@1.1.2

└─ strict-uri-encode@1.1.0

✨ Done in 7.18s.

1.2 编辑 webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require("html-webpack-plugin");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {

entry: './src/index.js',

mode:"production",

output: {

filename: '[name].bundle.js',

path: path.resolve(__dirname, 'dist')

},

module:{

rules:[

{

test:/\.css$/,

use:[

//添加loader,用于生产模式，不能有 style-loader

{

loader:MiniCssExtractPlugin.loader,

options:{

publicPath:'../'

}

},

"css-loader"

]

},

]

},

plugins:[

new HtmlWebpackPlugin({

title: "15- webpack 压缩 JavaScript 代码",

minify: {

collapseWhitespace: true,//删除空格、换行

},

}),

//添加插件

new MiniCssExtractPlugin({

filename: "[name].css",

chunkFilename: "[id].css"

})

],

};

This plugin should be used only on production builds without style-loader in the loaders chain, especially if you want to have HMR in development.

1.3 编译代码

此时 dist 目录下会生成 main.css

.hello{

color: red;

}

二、压缩 CSS

压缩 CSS 代码，通过 optimize-css-assets-webpack-plugin 插件完成。

2.1 安装

npm install --save-dev optimize-css-assets-webpack-plugin

//

yarn add optimize-css-assets-webpack-plugin --dev

安装成功

yarn add v1.16.0

[1/4] 🔍 Resolving packages...

[2/4] 🚚 Fetching packages...

[3/4] 🔗 Linking dependencies...

[4/4] 🔨 Building fresh packages...

success Saved lockfile.

success Saved 82 new dependencies.

info Direct dependencies

└─ optimize-css-assets-webpack-plugin@5.0.3

info All dependencies

├─ @types/q@1.5.2

├─ argparse@1.0.10

├─ caller-callsite@2.0.0

├─ caller-path@2.0.0

├─ callsites@2.0.0

├─ caniuse-lite@1.0.30000985

├─ coa@2.0.2

├─ color-string@1.5.3

├─ color@3.1.2

├─ cosmiconfig@5.2.1

├─ css-color-names@0.0.4

├─ css-declaration-sorter@4.0.1

├─ css-select-base-adapter@0.1.1

├─ css-tree@1.0.0-alpha.33

├─ css-unit-converter@1.1.1

├─ cssnano-preset-default@4.0.7

├─ cssnano-util-raw-cache@4.0.1

├─ cssnano-util-same-parent@4.0.1

├─ cssnano@4.1.10

├─ csso@3.5.1

├─ dot-prop@4.2.0

├─ electron-to-chromium@1.3.199

├─ error-ex@1.3.2

├─ esprima@4.0.1

├─ hex-color-regex@1.1.0

├─ hsl-regex@1.0.0

├─ hsla-regex@1.0.0

├─ html-comment-regex@1.1.2

├─ import-fresh@2.0.0

├─ is-absolute-url@2.1.0

├─ is-arrayish@0.2.1

├─ is-color-stop@1.1.0

├─ is-directory@0.3.1

├─ is-obj@1.0.1

├─ is-resolvable@1.1.0

├─ is-svg@3.0.0

├─ last-call-webpack-plugin@3.0.0

├─ lodash.memoize@4.1.2

├─ lodash.uniq@4.5.0

├─ mdn-data@2.0.4

├─ node-releases@1.1.25

├─ object.values@1.1.0

├─ optimize-css-assets-webpack-plugin@5.0.3

├─ parse-json@4.0.0

├─ postcss-calc@7.0.1

├─ postcss-colormin@4.0.3

├─ postcss-convert-values@4.0.1

├─ postcss-discard-comments@4.0.2

├─ postcss-discard-duplicates@4.0.2

├─ postcss-discard-empty@4.0.1

├─ postcss-discard-overridden@4.0.1

├─ postcss-merge-longhand@4.0.11

├─ postcss-merge-rules@4.0.3

├─ postcss-minify-font-values@4.0.2

├─ postcss-minify-gradients@4.0.2

├─ postcss-minify-params@4.0.2

├─ postcss-minify-selectors@4.0.2

├─ postcss-normalize-charset@4.0.1

├─ postcss-normalize-display-values@4.0.2

├─ postcss-normalize-positions@4.0.2

├─ postcss-normalize-repeat-style@4.0.2

├─ postcss-normalize-string@4.0.2

├─ postcss-normalize-timing-functions@4.0.2

├─ postcss-normalize-unicode@4.0.1

├─ postcss-normalize-url@4.0.1

├─ postcss-normalize-whitespace@4.0.2

├─ postcss-ordered-values@4.1.2

├─ postcss-reduce-initial@4.0.3

├─ postcss-reduce-transforms@4.0.2

├─ postcss-svgo@4.0.2

├─ postcss-unique-selectors@4.0.1

├─ q@1.5.1

├─ rgb-regex@1.0.1

├─ rgba-regex@1.0.0

├─ simple-swizzle@0.2.2

├─ sprintf-js@1.0.3

├─ stable@0.1.8

├─ stylehacks@4.0.3

├─ svgo@1.3.0

├─ timsort@0.3.0

├─ unquote@1.1.1

└─ vendors@1.0.3

✨ Done in 16.58s.

2.2 编辑 webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require("html-webpack-plugin");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {

entry: './src/index.js',

mode:"production",

output: {

filename: '[name].bundle.js',

path: path.resolve(__dirname, 'dist')

},

module:{

rules:[

{

test:/\.css$/,

use:[

"style-loader",

]

},

//添加loader

{

test:/\.css$/,

use:[

{

loader:MiniCssExtractPlugin.loader,

options:{

publicPath:'../'

}

},

"css-loader"

]

},

]

},

plugins:[

new HtmlWebpackPlugin({

title: "15- webpack 压缩 JavaScript 代码",

minify: {

collapseWhitespace: true,//删除空格、换行

},

}),

//添加插件

new MiniCssExtractPlugin({

filename: "[name].css",

chunkFilename: "[id].css"

}),

//添加插件

new OptimizeCSSAssetsPlugin({})

],

};

2.3 重新编译

编译成功后，main.css

.hello{color:red}

到此 webpack 压缩 CSS 代码任务完成。

参考链接