資訊專欄INFORMATION COLUMN
摘要：這兩天一直在練習(xí)這個(gè)發(fā)現(xiàn)有好多問題和坑，做開發(fā)嘛，一定要有喜歡出問題并喜歡解決問題，堅(jiān)決踩個(gè)坑填個(gè)坑的不怕死小強(qiáng)精神在配置上其實(shí)是可以是想和的，會(huì)根據(jù)進(jìn)行對(duì)打包，壓縮，下面自動(dòng)壓縮，親測(cè)沒有問題但是從里面分離出來(lái)的怎么打包呢我找了一天的相關(guān)
這兩天一直在練習(xí)這個(gè)webpack4, 發(fā)現(xiàn)有好多問題和坑，做開發(fā)嘛，一定要有喜歡出問題并喜歡解決問題，堅(jiān)決踩個(gè)坑填個(gè)坑的不怕死小強(qiáng)精神！
webpack4 在配置上其實(shí)是可以是想production和development的，
// webpack.config.js
module.exports = {
// webpack會(huì)根據(jù)mode進(jìn)行對(duì)Js打包，development壓縮，production下面自動(dòng)壓縮，親測(cè)沒有問題
mode: "development" // production
}
但是從js里面分離出來(lái)的css怎么打包呢？
我找了一天的相關(guān)文章，好多都是說(shuō)webpack自動(dòng)支持css壓縮，有的是說(shuō)需要插件，對(duì)，就是用插件
optimize-css-assets-webpack-plugin
不過一定要看Npm官方網(wǎng)站
?? For webpack v3 or below please use [email protected]. The [email protected] version and above supports webpack v4.
做法是先安裝 optimize-css-assets-webpack-plugin
const optimizeCss = require("optimize-css-assets-webpack-plugin");
module.exports = {
.....,
//
plugins: [
new optimizeCss({
assetNameRegExp: /.style.css$/g,
cssProcessor: require("cssnano"),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
}),
],
// 這個(gè)還待研究，看字面意思是優(yōu)化的意思
optimization: {
// minimize: true,
minimizer: [new optimizeCss({})],
}
}
以上里面的代碼我也是看別人寫的，所以還需要安裝一個(gè)"cssnano"的包
之后運(yùn)行生產(chǎn)環(huán)境打包命令，哦也，css果然壓縮了，但是看js，居然沒有被壓縮，不加上述代碼的話js確實(shí)是默認(rèn)壓縮的，于是網(wǎng)上又找解決方案，都說(shuō)webpack4只要設(shè)置mode production即可，但是現(xiàn)在有個(gè)問題，壓縮了css之后js就不會(huì)壓縮，于是帶著試試看的心里繼續(xù)安裝之前壓縮Js的插件 uglify-webpack-plugin
最后發(fā)現(xiàn)問題解決了，只是我的心得，也是誤打誤撞，但如果有好的解決方案請(qǐng)大家積極留言，共同進(jìn)步，把webpack吃透！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113295.html
摘要：的生產(chǎn)環(huán)境優(yōu)化完整配置的可以參考本文主要介紹了生產(chǎn)環(huán)境我都做了哪些優(yōu)化文章的結(jié)構(gòu)如下靜態(tài)資源路徑。分配不同的關(guān)于穩(wěn)定性的坑注意區(qū)分整個(gè)項(xiàng)目有變動(dòng)時(shí)，變化。而生產(chǎn)環(huán)境可以這一項(xiàng)，因?yàn)槲覀儾恍枰谏a(chǎn)環(huán)境調(diào)試代碼。 webpack4 的生產(chǎn)環(huán)境優(yōu)化 webpack4完整配置的可以參考： https://github.com/ziwei3749/... 本文主要介紹了 webpack4 生產(chǎn)...
摘要：然后運(yùn)行會(huì)發(fā)現(xiàn)文件夾中生成了和，文件內(nèi)容如下測(cè)試哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈內(nèi)容如下說(shuō)明已經(jīng)打包成功，此時(shí)運(yùn)行，即可看到原文件中的內(nèi)容 webpack4.16壓縮打包 本文所用插件版本如下： nodejs:v8.11.3; npm:5.6.0 webpack:4.16 webpack的更新速度很快，差不多幾個(gè)月就會(huì)出一版，最新的4系列對(duì)webpack2和webpack3進(jìn)行...
摘要：然后運(yùn)行會(huì)發(fā)現(xiàn)文件夾中生成了和，文件內(nèi)容如下測(cè)試哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈內(nèi)容如下說(shuō)明已經(jīng)打包成功，此時(shí)運(yùn)行，即可看到原文件中的內(nèi)容 webpack4.16壓縮打包 本文所用插件版本如下： nodejs:v8.11.3; npm:5.6.0 webpack:4.16 webpack的更新速度很快，差不多幾個(gè)月就會(huì)出一版，最新的4系列對(duì)webpack2和webpack3進(jìn)行...
摘要：然后運(yùn)行會(huì)發(fā)現(xiàn)文件夾中生成了和，文件內(nèi)容如下測(cè)試哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈內(nèi)容如下說(shuō)明已經(jīng)打包成功，此時(shí)運(yùn)行，即可看到原文件中的內(nèi)容 webpack4.16壓縮打包 本文所用插件版本如下： nodejs:v8.11.3; npm:5.6.0 webpack:4.16 webpack的更新速度很快，差不多幾個(gè)月就會(huì)出一版，最新的4系列對(duì)webpack2和webpack3進(jìn)行...
摘要：特性比較熱門的兩大特性，零配置和速度快號(hào)稱提速上限一般情況下，相比于低版本，場(chǎng)景下第三方依賴打包速度和場(chǎng)景下本地服務(wù)首次啟動(dòng)速度都得到顯著提升零配置通過指定當(dāng)前場(chǎng)景為開發(fā)模式還是生產(chǎn)模式，自動(dòng)設(shè)置好當(dāng)前場(chǎng)景的默認(rèn)配置，用戶即可馬上使用，不需 webpack4特性 webpack4比較熱門的兩大特性，零配置和速度快（號(hào)稱提速上限98%） 一般情況下，webpack4相比于低版本，prod...
閱讀 3727·2021-10-11 10:59
閱讀 1317·2019-08-30 15:44
閱讀 3489·2019-08-29 16:39
閱讀 2896·2019-08-29 16:29
閱讀 1812·2019-08-29 15:24
閱讀 816·2019-08-29 15:05
閱讀 1270·2019-08-29 12:34
閱讀 2349·2019-08-29 12:19
