webpack4 x 抽離css檔案和壓縮

2021-09-05 10:20:49 字數 585 閱讀 5878

今天來分享乙個前端自動化構建工具webpack4x 抽離css檔案和壓縮的方法。

const webpack = require('webpack');

const extracttextplugin = require("extract-text-webpack-plugin");//用來抽離單獨抽離css檔案

const optimizecssassetsplugin = require('optimize-css-assets-webpack-plugin');//壓縮css外掛程式

module.exports = ,

output: ,

module: )

}// ]},

plugins: [

new extracttextplugin("styles.css"),//抽離出來以後的css檔名稱

new optimizecssassetsplugin()//執行壓縮抽離出來的css

]};

cnpm install  extract-text-webpack-plugin@next -d

webpack 4 x安裝命令

執行npm i webpack g全域性安裝webpack,這樣就能在全域性使用webpack的命令 在專案根目錄中執行npm i webpack安裝到專案依賴中 執行npm init y初始化專案 建立專案基本的目錄結構src 和 dist,在src裡新建index.html 使用npm i jq...

webpack 4 X 基礎編譯

webpack4.x的打包已經不能用webpack 檔案a 檔案b的方式,而是直接執行webpack mode development或者webpack mode production,這樣便會預設進行打包,入口檔案是 src index.js 輸出路徑是 dist main.js 其中src目錄即...

webpack4 x學習筆記

有輸入必須有輸出,今天就來輸出一下學習webpack的過程。不得不先吐槽一下,比起可愛的grunt和好用的gulp,對webpack真心愛不起來!還有乙個血的教訓 千萬不要偷懶,有問題直接去官網。本文旨在記錄學習webpack的過車和遇到的問題,適合對node和webpack基礎知識有些了解的開發人...