webpack處理樣式

2021-10-03 07:39:50 字數 2319 閱讀 1121

首先安裝模組，一般不需要都安裝，看個人專案需要

yarn add style-loader css-loader less-loader sass-loader -d

webpack.config.js

let path =


require


('path');


let htmlwebpackplugin =


require


('html-webpack-plugin');


module.exports =


,    mode:


'development'


,// 模式 模式有兩種  production development


entry:


'./src/index.js'


,// 入口


output:


,    plugins:


[// 放著所有的webpack外掛程式


newhtmlwebpackplugin(,


hash:


true})


],module:},


'css-loader'


,"less-loader"],


}]}}


;
當使用優化壓縮css時，需要再壓縮js檔案，而此時會存在問題，後續再做處理（可能是使用babel）

yarn add mini-css-extract-pligin

yarn add optimize-css-assets-webpack-plugin

yarn add uglifyjs-webpack-plugin -d

給css**加上相容性字首

yarn add postcss-loader autoprefixer -d

webpack.config.js

let path =


require


('path');


let htmlwebpackplugin =


require


('html-webpack-plugin');


let minics***tractplugin =


require


('mini-css-extract-plugin');


let optimizecss =


require


('optimize-css-assets-webpack-plugin');


let uglifyjsplugin =


require


('uglifyjs-webpack-plugin');


module.exports =),


newoptimizecss()


,]},


devserver:


,    mode:


'production'


,// 模式 模式有兩種  production development


entry:


'./src/index.js'


,// 入口


output:


,    plugins:


[// 放著所有的webpack外掛程式


newhtmlwebpackplugin(,


hash:


true})


,new


minics***tractplugin()


],module:,}


],}]


}};
現在的方式，是在package.json檔案中新增browserslist

報錯資訊：

replace autoprefixer browsers option to browserslist config.


use browserslist key in package.json or .browserslistrc file.


using browsers option can cause errors. browserslist config 


can be used for babel, autoprefixer, postcss-normalize and other tools.


if you really need to use option, rename it to overridebrowserslist.


learn more at:
處理方式

package.json

webpack 基礎配置 樣式處理

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

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

1.在配置中新增module module css loader css loader import 解析路徑 less loader less css 2.將樣式抽離成乙個單獨的檔案 抽離css外掛程式 mini css extract plugin let path require path 自...

學習webpack4 樣式處理

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