webpack樣式處理，以及js，css壓縮

1.在配置中新增module

module: 

},"css-loader"]},
,"css-loader", //@import 解析路徑
"less-loader" // less => css]}
]}

抽離css外掛程式 mini-css-extract-plugin  

let path = require("path"); //自帶的路徑外掛程式

let htmlwebpackplugin = require("html-webpack-plugin"); // html外掛程式
let minics***tractplugin = require("mini-css-extract-plugin"); // 將樣式檔案抽離成main.css檔案
module.exports = ,
mode: "development", //模式 預設兩種 production 生產模式 development 開發模式
entry: "./src/index.js", //入口 從那個地方開始打包
output: ,
plugins: [
//陣列，放著所有webpack的外掛程式
new htmlwebpackplugin(,
hash: true //hash戳
}),new minics***tractplugin()
],module: ,
]}};

安裝postcss-loader 處理autoprefixer ,處理要在css-loader之前,並且執行對應的配置檔案postcss.config.js

因版本不同，可能未加字首，可以使用配置2

//1

module.exports = ;
= )]
};

4.壓縮css,需要外掛程式optimize-css-assets-webpack-plugin

執行bulid命令後，會發現css檔案壓縮了，但是js檔案未被壓縮，這時需要安裝terser-webpack-plugin外掛程式

const terserjsplugin = require('terser-webpack-plugin');

const optimizecssassetsplugin = require('optimize-css-assets-webpack-plugin');
module.exports = ), //優化js
new optimizecssassetsplugin({})//優化css
],},
}

注：壓縮需要在production模式下

webpack處理樣式

首先安裝模組，一般不需要都安裝，看個人專案需要 yarn add style loader css loader less loader sass loader d webpack.config.js let path require path let htmlwebpackplugin requi...

webpack 基礎配置 樣式處理

const path require path 新增npm install css loader style loader d css處理檔案 module.exports open true，啟動webpack dev server時自動開啟瀏覽器 hot true 啟用熱更 mode devel...

學習webpack4 樣式處理

學習webpack4 基礎配置 學習webpack4 html處理 學習webpack4 樣式處理 學習webpack4 es6語法轉化 學習webpack4 第三方庫的使用 學習webpack4 抽離公共部分 持續中 注意 開始之前以下內容之前，需要配置一些webpack的基礎配置，傳送門 學習w...