webpack2正式優化版，簡化操作

0x584a 發布于2019-08-20 14:03 / 670人閱讀

摘要：啟動新技術提供測試框架進行單元測試，代碼覆蓋率報告，可與和快速對接。關于的模塊化，預處理器的編譯。頁面的其他資源文件，通過引入單元測試日后調整，待開發使用手冊流程基本位于創建視圖更多說明主動引入的默認地址為位于配置相關的和文件。

webpack2-Scaffolding

請各位看客老爺不要吝嗇自己的Star，先來Github右上角Star一下唄。

Github右上角Star。

重要的事情說三遍

項目地址

https://github.com/sayll/avalon-webpack-start

介紹

webpack2腳手架正式版，一個多資源統籌的腳手架。
本項目使用avalon2作為演示框架。
為兼容低版本瀏覽器，我也是強烈推薦一下它。市面上應該也算唯一能夠支持到IE8以下的MVVM框架了吧。

關于【Webpack】

服務端使用Koa。需要注意的是，只有一個目的那就是提供了webpack-dev-middleware 和 webpack-hot-middleware（代碼熱替換）。使用自定義的Koa程序替換webpack-dev-server，讓它更容易實現universal 渲染和為了不使這個包過于龐大。

針對不同的loader采用了多線程編譯，極大的加快了編譯速度。

使用webpack.DllReferencePlugin打包框架和庫。加快編譯與打包速度。

啟動新技術tree-shaking

提供測試框架進行單元測試，代碼覆蓋率報告，可與Travis-ci和Coveralls快速對接?！九渲谜f明】

Babel被配置babel-plugin-transform-runtime可以讓代碼更優化。

關于【Css】

css的模塊化，預處理器的編譯。（支持sass,scss,less,postcss）

針對低版本瀏覽器和其他瀏覽器內核的特殊性，啟用autoprefixer自動添加瀏覽器前綴

針對移動開發，有獨特的處理方案。（具體文檔等待補充）

可導入字體和字體圖標，操作非常簡單。（如阿里系icon）【配置文檔】

每次修改都會生成新的文件名，防止舊樣式緩存帶來的影響。（與JS間做了特殊處理，通過JS引入的CSS不會因JS改變而改變它的hash值）

針對開發模式啟用修改自動刷新頁面。（做了特殊處理，發布模式將得到優化）

關于【Js】

支持ES6的最新特性

模塊化，可才用ES6的import，也可用AMD規范的require

每次修改都會生成新的文件名，防止舊腳本緩存帶來的影響。（與CSS間做了特殊處理，通過JS引入的CSS不會因CSS改變而改變它的hash值）

快速編譯，自動刷新。

將常用的框架和庫進行多帶帶打包。(Dll)防止重復引用，導致打包文件臃腫。

提供公共腳本的文件入口，此文件將被所有頁面自動引用。（可設置全局變量，引入公共的庫。如Jquery）

關于【Html】

支持單頁應用和多頁應用的混合開發。

自動引入頁面的CSS和JS文件。無需手動設置URL。(所有文件hash的改變都會導致文件名改變,這里的資源引用全由內部自動完成)

如有使用常用的框架和庫進行多帶帶打包。(Dll),將需要多帶帶引用dll的vendor.js;

開始 環境配置

安裝node.js

安裝git

依賴配置

確認好你的環境配置，然后就可以開始以下步驟。

$ git clone https://github.com/sayll/avalon-webpack-start.git
$ cd avalon-webpack-start
$ npm install                   # Install project dependencies
$ npm start                     # Compile and launch

如果一切順利,就能正常打開端口:http://localhost:1000/

開發過程中，你用得最多的會是npm start，但是這里還有很多其它的處理：

npm run

位于app/view配置html相關的JS和CSS文件。(JS和CSS需與HTML保持一致，可參考現有模版)【更多說明】

高級

引用字體圖標Icon【更多說明】

使用框架(avalon)或庫(jquery)【更多說明】

設置全局變量。雖引入公共庫，但每次調用都需重新聲明。所以就有了公共文件來提前聲明?！靖嗾f明】

使用Css預處理器(更多說明)

使用CDN(更多說明)

修改目錄結構(更多說明)

最后

打包文件為build文件夾，請以此為根目錄。

更新日志

更新詳情

最重要的事情

項目地址: https://github.com/sayll/avalon-webpack-start

親不要吝嗇自己的Star，到Github右上角Star一下唄。

云服務器 GPU云服務器簡化版深度學習簡化版集合類操作優化 webpack2

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81391.html

webpack2正式版

摘要：正式版正式版，簡單方便的構建單頁和多頁用用。下一步是完善單元測試，代碼覆蓋率報告如果大家有更好的想法及建議請提。開啟測試并生成覆蓋率報告。頁面的其他資源文件，通過引入單元測試日后調整，待開發樣式使用可添加替換預處理。 webpack2正式版 webpack2正式版，簡單方便的構建單頁和多頁用用。（啟用tree-shaking新技術）地址：avalon-webpack-start 這個啟...

WilsonLiu95 2019-08-21 15:06 評論0 收藏0
基于 Webpack2、Vue2、iView2 的可視化腳手架 iView Cli 發布 2.0 版

摘要：多語言使用了的版本，并整合了的多語言和使用者自己的多語言配置，而且會根據用戶系統的語言自動切換為中文和英文。谷歌今天發布了一系列性感的軟件，我們也發布了一款大家期待已久的開發者工具，同樣很性感：) iView 2.0 已經發布有兩個月了，在 2.0 發布后，npm 下載量、issues 數量都提升了很多（可以 watch 下項目，感受感受郵件量）。兩個月里，我們平均 1 周發布一個...

MycLambert 2019-08-20 16:40 評論0 收藏0
webpack v2升級踩坑筆記

摘要：從再到目前當紅明星，前端模塊打包技術日新月異，在今年月份和月份左右接連更新了和版本為了減少冗余模塊，縮減文件大小，中也加入了關于的特征，可以查看知乎如何評價新引入的代碼優化技術的討論。從Grunt->gulp->webpack,再到目前當紅明星rollup，前端模塊打包技術日新月異，webpack在今年1月份和6月份左右接連更新了v2和v3版本,為了減少冗余模塊，縮減bundle文件...

JayChen 2019-08-20 17:59 評論0 收藏0
Webpack2 升級指南和特性摘要

摘要：名稱后自動自動補全的功能將被移除在配置時，官方不再允許省略擴展名，的配置寫法上將逐步趨于嚴謹。使用自定義參數作為配置項傳入方式將做調整如果你隨意將自定義參數通過傳入到配置項中，如你會發現這將不會被允許，的執行將會遵循更為嚴格的標準。歷時多日，webpack2.2正式版終于趕在年前發布了，此次更新相對于1.X版本有了諸多的升級優化改進，筆者也在第一時間查閱了官方的文檔，整理和翻譯了由w...

Forelax 2019-08-20 13:54 評論0 收藏0
無痛學會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構渲染

摘要：它會檢測出最大靜態子樹就是不需要動態性的子樹并且從渲染函數中萃取出來。這樣在每次重渲染的時候，它就會直接重用完全相同的同時跳過比對。需要注意的是，中的操作必須是同步的，不可以存在異步操作的情況。新增：哈哈，最近又推出了 vue 的文章，在這里放個鏈接~手把手教你從零寫一個簡單的 VUE 感謝有人看我扯技術，這篇文章主要介紹最近非?；鸬膙ue2前端框架的特點和vue2+vuex2+we...

fish 2019-08-29 11:27 評論0 收藏0