資訊專欄INFORMATION COLUMN
摘要：這兩天一直在練習這個發現有好多問題和坑，做開發嘛，一定要有喜歡出問題并喜歡解決問題，堅決踩個坑填個坑的不怕死小強精神在配置上其實是可以是想和的，會根據進行對打包，壓縮，下面自動壓縮，親測沒有問題但是從里面分離出來的怎么打包呢我找了一天的相關
這兩天一直在練習這個webpack4, 發現有好多問題和坑，做開發嘛，一定要有喜歡出問題并喜歡解決問題，堅決踩個坑填個坑的不怕死小強精神！
webpack4 在配置上其實是可以是想production和development的，
// webpack.config.js
module.exports = {
// webpack會根據mode進行對Js打包，development壓縮，production下面自動壓縮，親測沒有問題
mode: "development" // production
}
但是從js里面分離出來的css怎么打包呢？
我找了一天的相關文章，好多都是說webpack自動支持css壓縮，有的是說需要插件，對，就是用插件
optimize-css-assets-webpack-plugin
不過一定要看Npm官方網站
?? For webpack v3 or below please use optimize-css-assets-webpack-plugin@3.2.0. The optimize-css-assets-webpack-plugin@4.0.0 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
}),
],
// 這個還待研究，看字面意思是優化的意思
optimization: {
// minimize: true,
minimizer: [new optimizeCss({})],
}
}
以上里面的代碼我也是看別人寫的，所以還需要安裝一個"cssnano"的包
之后運行生產環境打包命令，哦也，css果然壓縮了，但是看js，居然沒有被壓縮，不加上述代碼的話js確實是默認壓縮的，于是網上又找解決方案，都說webpack4只要設置mode production即可，但是現在有個問題，壓縮了css之后js就不會壓縮，于是帶著試試看的心里繼續安裝之前壓縮Js的插件 uglify-webpack-plugin
最后發現問題解決了，只是我的心得，也是誤打誤撞，但如果有好的解決方案請大家積極留言，共同進步，把webpack吃透！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113295.html
摘要：的生產環境優化完整配置的可以參考本文主要介紹了生產環境我都做了哪些優化文章的結構如下靜態資源路徑。分配不同的關于穩定性的坑注意區分整個項目有變動時，變化。而生產環境可以這一項，因為我們不需要在生產環境調試代碼。 webpack4 的生產環境優化 webpack4完整配置的可以參考： https://github.com/ziwei3749/... 本文主要介紹了 webpack4 生產...
摘要：然后運行會發現文件夾中生成了和，文件內容如下測試哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈內容如下說明已經打包成功，此時運行，即可看到原文件中的內容 webpack4.16壓縮打包 本文所用插件版本如下： nodejs:v8.11.3; npm:5.6.0 webpack:4.16 webpack的更新速度很快，差不多幾個月就會出一版，最新的4系列對webpack2和webpack3進行...
摘要：然后運行會發現文件夾中生成了和，文件內容如下測試哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈內容如下說明已經打包成功，此時運行，即可看到原文件中的內容 webpack4.16壓縮打包 本文所用插件版本如下： nodejs:v8.11.3; npm:5.6.0 webpack:4.16 webpack的更新速度很快，差不多幾個月就會出一版，最新的4系列對webpack2和webpack3進行...
摘要：然后運行會發現文件夾中生成了和，文件內容如下測試哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈內容如下說明已經打包成功，此時運行，即可看到原文件中的內容 webpack4.16壓縮打包 本文所用插件版本如下： nodejs:v8.11.3; npm:5.6.0 webpack:4.16 webpack的更新速度很快，差不多幾個月就會出一版，最新的4系列對webpack2和webpack3進行...
摘要：特性比較熱門的兩大特性，零配置和速度快號稱提速上限一般情況下，相比于低版本，場景下第三方依賴打包速度和場景下本地服務首次啟動速度都得到顯著提升零配置通過指定當前場景為開發模式還是生產模式，自動設置好當前場景的默認配置，用戶即可馬上使用，不需 webpack4特性 webpack4比較熱門的兩大特性，零配置和速度快（號稱提速上限98%） 一般情況下，webpack4相比于低版本，prod...
閱讀 3725·2021-10-11 10:59
閱讀 1307·2019-08-30 15:44
閱讀 3484·2019-08-29 16:39
閱讀 2891·2019-08-29 16:29
閱讀 1805·2019-08-29 15:24
閱讀 812·2019-08-29 15:05
閱讀 1268·2019-08-29 12:34
閱讀 2323·2019-08-29 12:19
