webpack -- 壓縮css和html構建 · 前端工程化學習筆記

[TOC] >[success] # 壓縮 ~~~ 1.在代碼運行上線的時候我們需要對，js文件和html 以及css 要進行壓縮處理 2.webpack4.x版本已經內置了uglifyjs-webpack-plugin實現'js'壓縮 ~~~ >[info] ## css 和 html 壓縮 ~~~ 1.css 的壓縮使用'optimize-css-assets-webpack-plugin'和預處理器'cssnano' 'npm i optimize-css-assets-webpack-plugin cssnano -D' 2.html 壓縮文件'html-webpack-plugin' -- 'npm i html-webpack-plugin -D ' ~~~ >[danger] ##### css 壓縮案例說明 ~~~ 1.css 壓縮值得是對css文件內容壓縮，因此是要和'MiniCssExtractPlugin' 這個生成css 文件的Plugin一起使用才有實際用處 2.如果 CSS 超過 150KB 才需要考慮是否將它提取到單獨文件中，否則將 CSS 代碼嵌入代碼減少一次請求效果可能更好。 ~~~ ~~~ const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 引入css 壓縮文件plug const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') module.exports = { entry: { index: './src/index.js', sreach: './src/hellowWebpack.js' }, output: { path: path.join(__dirname, 'dist'), filename: '[name][chunkhash:8].js' }, // 注意在這里配置的loader module: { rules: [{ test: /\.js$/, use: 'babel-loader' }, { test: /\.css$/, use: [MiniCssExtractPlugin.loader,'css-loader'] // css 解析配置 }] }, plugins: [ new MiniCssExtractPlugin({ filename: '[name][contenthash:8].css' }), // css 壓縮文件 new OptimizeCssAssetsPlugin({ assetNameRegExp: /\.css$/g, cssProcessor: require('cssnano') }) ] } ~~~ >[danger] ##### html 壓縮 [關于 html-webpack-plugin](https://www.cnblogs.com/wonyun/p/6030090.html) ~~~ 說明如果你是webpack4.x 版本并且運行時候提示'Cannot read property 'tap' of undefined', 將'HtmlWebpackPlugin' 降級到4.x版本就好了 ~~~ ~~~ 1.之前可以利用webpack打包生成css js 等文件，但是打包后的html頁面文件是沒有，每次一出都是需要手動去寫 html 頁面并且將打包好的文件引入 2.'html-webpack-plugin'這個插件會將你配置的模板頁面，在打包的時候一并生成一個html頁面，并且將對應的css和js 自動引入 3.'HtmlWebpackPlugin' 自帶html模板，可以定義模板例如 <head> ... <title>Webpack</title> </head> <body> <div class="container"> <h1><%= htmlWebpackPlugin.options.title %></h1> </div> </body> </html> ~~~ ~~~ const HtmlWebpackPlugin = require('html-webpack-plugin') module.export = { plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname,'src/search.html'), // 使用模板 filename: 'search.html', // 打包后的文件名 chunks: ['search'], // 打包后需要使用的chunk(文件) inject: true, // 默認注入所有靜態資源 title: 'Webpack Plugin Sample', // 設置html標題 meta: { // 設置對象中的元數據標簽 viewport: 'width=device-width' }, minify: { html5:true, collapsableWhitespace: true, preserveLineBreaks: false, minifyCSS: true, minifyJS: true, removeComments: false } }), ] } ~~~ >[danger] ##### 問答 ~~~ 1.為什么已經默認有了JS壓縮和使用了OptimizeCssAssetsPlugin 壓縮 CSS。但在 HtmlWebpackPlugin 中的 minify 中還要加入 minifyCSS 和 minifyJS，會不會過于繁瑣呢？ '答'：HtmlWebpackPlugin 里面的minify 的 minifyCSS 參數和minifyJS參數是用于去壓縮一開始就內聯在 html 里面的 css和js不是打包生成的 css 和 js 2.bundle，chunk和module '答'：bundle：打包最終生成的文件 chunk：每個chunk是由多個module組成，可以通過代碼分割成多個chunk。 module：webpack中的模塊（js、css、圖片等等） 3.chunk 對應的參數 '答'：HtmlWebpackPlugin中參數chunks的值數組對應的是entry中的鍵舉個例子,下面例子中index.html最后注入的sreach對應的 js文件： entry: { index: './src/index.js', sreach: './src/hellowWebpack.js' }, new HtmlWebpackPlugin({ template: path.join(__dirname, 'src/index.html'), // 使用模板 filename: 'index.html', // 打包后的文件名 chunks: ['sreach'], // 打包后需要使用的chunk(文件) }) 4.HtmlWebpackPlugin 的 chunks 配置中引入 chunks 順序會有影響嗎？ '答'：會有影響的，chunks 決定了插入到 html 里面的 js 腳本的引用順序 ~~~