摘要:中的配置熱加載插件安裝中的配置優化插件為組件分配,通過這個插件可以分析和優先考慮使用最多的模塊,并為它們分配最小的壓縮代碼分離和文件
0 前言
本文是針對TCM項目所做的WebPack配置文件總結,主要概述了一些常用配置選項和插件使用,對以后的項目有指導意義。
TCM的webpack配置文件包括webapck.config.base.js、webapck.config.dev.js、webapck.config.prod.js三個基本文件, webpack.config.base.js是基本配置文件,webpack.config.dev.js是開發配置,webpack.config.prod.js是產品配置文件,webpack.config.base.js包含一些webpack.config.prod.js和webpack.config.base.js共有的基本配置,而webpack.config.prod.js和webpack.config.base.js在webpack.config.base.js的基礎上添加了一些必要配置。為了引入Node的express API,通過dev.js和prod.js對頂層配置進行定義,因此,package.json文件的scripts部分定義了采用不同配置進行開發的npm指令:
以下較多內容是對《入門Webpack,看這篇就夠了》做的總結,加入很多網上收集的資料,目的是為了更深的了解TCM中的WebPack配置。
1 為什么用webpack?Node.js的發展使各種依賴廣泛涌現,這些依賴包含各種插件、加載器,可以簡化開發流程。模塊化是前端發展的一大趨勢,基于React的單頁應用完美詮釋了模塊化的概念,通過組件的方式進行開發,組件之間互相引用,并且引用外部依賴。為了打包外部依賴以及本地JavaScript模塊、SCSS模塊、圖片等,打包工具應運而生,以WebPack最為著名,類似的還有Gulp/Grunt等。webpack的優點之一就是把所有文件,包括CSS、HTML、圖片、JavaScript代碼等都視為模塊處理,只要配置中包含相應的loader就可以進行處理打包。
1.1 WebPack和Grunt以及Gulp相比有什么特性?其實Webpack和另外兩個并沒有太多的可比性,Gulp/Grunt是一種能夠優化前端的開發流程的工具,而WebPack是一種模塊化的解決方案,不過Webpack的優點使得Webpack可以替代Gulp/Grunt類的工具。
Grunt和Gulp的工作方式是:在一個配置文件中,指明對某些文件進行類似編譯,組合,壓縮等任務的具體步驟,這個工具之后可以自動替你完成這些任務。
Webpack的工作方式是:把你的項目當做一個整體,通過一個給定的主文件(如:index.js),Webpack將從這個文件開始找到你的項目的所有依賴文件,使用loaders處理它們,最后打包為一個瀏覽器可識別的JavaScript文件。
webpack有一個默認的配置文件webpack.config.js(官方文檔),位于項目根目錄,也可以根據需要創建多個配置文件,TCMngr配置了三個文件:webpack.base.conf.js/webpack.dev.config.js/webpack.prod.conf.js。在package.json的scripts中添加不同的命令設置不同的配置文件,在TCMngr的package.json中有
"scripts": { "start": "cross-env NODE_ENV=development node build/dev.js", "build": "cross-env NODE_ENV=production node build/prod.js" },
可以看到此處使用了cross-env依賴包,這個包允許以UNIX的方式設置環境變量,并在windows上正常運行。安裝命令:
npm install cross-env --save-dev
webpack配置文件本質就是一個JavaScript module,可以使用JavaScript語言,文件會導出一個配置對象,格式如下:
mudule.exports = {};
所有的配置信息都在這個對象中體現,包括:
entry:打包的入口文件,可以使一個字符串或一個對象,如果只有一個需要打包的模塊,使用這種形式;如果是一個對象,對象對應的所有文件都被打包,該對象可以是包含多個打包模塊的數組,依賴較強的排在前面,也可以是鍵值對,分別對應不同的輸出包,包名就是鍵名;TCM的webpack.base.conf.js指出了需要打包的文件,包含框架、類庫以及入口源碼。
resolve:影響模塊解析的設置,是一個對象,包含以下屬性。
resolve.extensions:自動識別的文件擴展名,如果你想請求一個js文件但是在請求時不帶擴展 (如:require("index")),那么就需要將".js"添加到數組中。并不是必須配置這一選項,不配 置時會使用默認值["", ".webpack.js", ".web.js", ".js"],手動設置會導致默認值被覆 蓋。如果想要每個模塊都能按照自己的擴展名解析,要加上空字符串。 resolve.modulesDirectories:目錄名組成的數組,會在該目錄以及該目錄的頂層目錄尋找依賴 模塊,默認值是Default: ["web_modules", "node_modules"]。 resolve.root:包含依賴模塊的絕對路徑,可能是目錄數組
resolveLoader:設置和resolve設置類似,只不過是針對loaders設置。
output:打包的輸出結果,是一個對象,包含以下屬性:
filename:輸出文件名,filename里面的[name]會由entry中的鍵替換; path:輸出路徑; publicpath:通過瀏覽器訪問時的公共URL地址。
module:定義對模塊的處理邏輯,是一個對象;
loaders:定義一系列自動加載的loader,是一個對象數組;
[ { test:正則表達式,用于匹配處理的文件 loader/loaders:字符串或數組,表示用到的加載器,loader:string表示用!分隔的loader,loaders:[]表示用到的加載器數組。 include:包含的文件夾 exclude:排除的文件夾 } ]
plugins:定義插件,一個數組,定義所有用到的插件。
externals:當我們想在項目中require一些其他的類庫或者API,而又不想讓這些類庫的源碼被打包時,這在實際開發中很有必要。此時我們就可以通過配置externals參數來解決這個問題:
這樣我們就可以放心的在項目中使用這些API了:var jQuery = require(“jquery”);
devtool:選擇調試工具,常用eval-source-map
//實例 { devtool: "#inline-source-map" }3 插件(Plugins)和一些工具包
插件(Plugins)是用來拓展Webpack功能的,它們會在整個構建過程中生效,執行相關的任務。Loaders和Plugins常常被弄混,但是他們其實是完全不同的東西,可以這么來說,loaders是在打包構建過程中用來處理源文件的(JSX,Scss,Less..),一次處理一個,插件并不直接操作單個文件,它直接對整個構建過程其作用。要使用某個插件,我們需要通過npm安裝它,然后要做的就是在webpack配置中的plugins關鍵字部分添加該插件的一個實例(plugins是一個數組)。
3.1 webpack-dev-server一般安裝在devDependency中:
npm install webpack-dev-server --save-dev
安裝后使用webpack-dev-server即可在瀏覽器窗口觀察輸出,瀏覽器會自動打開項目根目錄的index.html文件,默認端口號是8080,完整地址是http://localhost:8080/。使用命令webpack-dev-server --hot --inline完成自動刷新,為了簡寫命令,在package.json的scripts中添加如下語句:
“build” : “webpack-dev-server --hot --inline --config ‘webpack-dev-config.js’”
--config設置默認的webpack配置文件。
devserver作為webpack配置選項中的一項,具有以下配置選項
在webpack.config.js中體現為:
devServer: { contentBase: "./public",//本地服務器所加載的頁面所在的目錄 colors: true,//終端中輸出結果為彩色 historyApiFallback: true,//不跳轉 inline: true//實時刷新 }3.2 Source Maps(使調試更容易)
WebPack生成source maps,可以對應編譯文件和源文件,使得編譯后的代碼可讀性更高,更容易調試。配置source maps,需要配置devtool,它有以下四種不同的配置選項,各具優缺點,描述如下:
上述選項由上到下打包速度越來越快,不過同時也具有越來越多的負面作用,較快的構建速度的后果就是對打包后的文件的的執行有一定影響。
在學習階段以及在小到中性的項目上,eval-source-map是一個很好的選項,不過記得只在開發階段使用它,如下配置
module.exports = { devtool: "eval-source-map",//配置生成Source Maps,選擇合適的選項 entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" } }3.3 Babel:編譯ES6和JSX
Babel工具包括babel-core/babel-loader/babel-preset-es2015/babel-preset-react,如果使用命令行還要安裝babel-cli。
Babel的配置較為復雜,反映在webpack.config.js與.babelrc中,webpack.config.js會自動調用.babelrc中的配置選項。webpack.config.json會包含以下配置
//webpack.config.js { test: /.js$/, exclude: /node_modules/, loader: "babel" } //.babelrc { "presets": ["react", "es2015"] }3.4 CSS-loader
webpack提供兩個工具處理樣式表,css-loader 和 style-loader,二者處理的任務不同,css-loader使你能夠使用類似@import 和 url(...)的方法實現 require()的功能,style-loader將所有的計算后的樣式加入頁面中,二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中。
Sass 和 Less之類的預處理器是對原生CSS的拓展,它們允許你使用類似于variables, nesting, mixins, inheritance等不存在于CSS中的特性來寫CSS,CSS預處理器可以這些特殊類型的語句轉化為瀏覽器可識別的CSS語句,在webpack里使用相關loaders進行配置就可以使用了,常用的CSS 處理loaders包括Less Loader、Sass Loader、Stylus Loader。
// TCM中開發環境下直接內嵌 CSS 以支持熱替換 // autoprefixer自動添加前綴的插件 config.module.loaders.push({ test: /.css$/, loader: "style!css!autoprefixer" }, { test: /.less$/, loader: "style!css!less!autoprefixer" }, { test: /.scss$/, loader: "style!css!sass!autoprefixer" });3.5 瀏覽器實時同步插件
var BrowserSyncPlugin = require("browser-sync-webpack-plugin"); config.plugins.push( new BrowserSyncPlugin({ host: "127.0.0.1", port: 9090,// 瀏覽器監聽地址 proxy: "http://127.0.0.1:9000/", logConnections: false, notify: false }, { reload: false }) );3.6 webpack的進度條插件
使用該插件需要在webpack配置中增加以下聲明:
var NyanProgressPlugin = require("nyan-progress-webpack-plugin"); plugins: [ new NyanProgressPlugin() ]
效果如下:
這個插件的作用是依據一個簡單的模板,幫你生成最終的Html5文件,這個文件中自動引用了你打包后的JS文件。每次編譯都在文件名中插入一個不同的哈希值。
//安裝 npm install --save-dev html-webpack-plugin //webpack.config.js var HtmlWebpackPlugin = require("html-webpack-plugin"); config.plugins.push( new HtmlWebpackPlugin({ filename: "index.html", template: config.commonPath.indexHTML, //載入文件 chunksSortMode: "auto" }) );
該插件的設置參數很多:
title: 設置title的名字
filename: 設置這個html的文件名
template:要使用的模塊的路徑
inject: 把模板注入到哪個標簽后 "body",
favicon: 給html添加一個favicon "./images/favico.ico",
minify:是否壓縮 {...} | false
hash:是否hash化 true false ,
cache:是否緩存,
showErrors:是否顯示錯誤,
chunks:目前沒太明白
xhtml:是否自動畢業標簽 默認false
Hot Module Replacement(HMR)也是webpack里很有用的一個插件,它允許你在修改組件代碼后,自動刷新實時預覽修改后的效果。在webpack中實現HMR也很簡單,只需要做兩項配置:在webpack配置文件中添加HMR插件;在Webpack Dev Server中添加“hot”參數。不過配置完這些后,JS模塊其實還是不能自動熱加載的,還需要在你的JS模塊中執行一個Webpack提供的API才能實現熱加載,雖然這個API不難使用,但是如果是React模塊,使用我們已經熟悉的Babel可以更方便的實現功能熱加載。Babel有一個叫做react-transform-hrm的插件,可以在不對React模塊進行額外的配置的前提下讓HMR正常工作。
//webpack中的配置 var webpack = require("webpack"); var HtmlWebpackPlugin = require("html-webpack-plugin"); config.plugins.push( plugins: [ new webpack.HotModuleReplacementPlugin()//熱加載插件 ] ); //安裝react-transform-hmr npm install --save-dev babel-plugin-react-transform react-transform-hmr //Babel中的配置 { "presets": ["react", "es2015"], "env": { "development": { "plugins": [["react-transform", { "transforms": [{ "transform": "react-transform-hmr", "imports": ["react"], "locals": ["module"] }] }]] } } }3.9 優化插件
OccurenceOrderPlugin :為組件分配ID,通過這個插件webpack可以分析和優先考慮使用最多的模塊,并為它們分配最小的ID
UglifyJsPlugin:壓縮JS代碼;
ExtractTextPlugin:分離CSS和JS文件
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81787.html
摘要:中的配置熱加載插件安裝中的配置優化插件為組件分配,通過這個插件可以分析和優先考慮使用最多的模塊,并為它們分配最小的壓縮代碼分離和文件 0 前言 本文是針對TCM項目所做的WebPack配置文件總結,主要概述了一些常用配置選項和插件使用,對以后的項目有指導意義。TCM的webpack配置文件包括webapck.config.base.js、webapck.config.dev.js、we...
摘要:安裝插件能幫忙每次打包之前先刪除文件夾。安裝插件提供了一種自定義編譯期間如何報告進度的方法。插件能創建環境變量開發與生產時的不同配置時使用選項設置不同的配置文件開發生產能夠為我們提供一個簡單的并且具有實時重新加載功能。 寫在前面,近期有想法整理一下前端工程化相關的知識,就先從打包工具開始吧;今天帶來的是webpack相關的一些常用插件配置,后期有時間話,也會出一些比較輕量級的打包工具的...
一、HtmlWebpackPlugin使用: npm install html-webpack-plugin --save-dev 解釋:這個插件是簡化創建生成html(h5)文件用的,如果你引入的文件帶有hash值的話,這個尤為的有用,不需要手動去更改引入的文件名! 默認生成的是index.html,基本用法為: var HtmlWebpackPlugin = require(html-webp...
摘要:去做想做的事,去愛值得的人去成為自己喜歡的模樣,去讓自己發光渾身充滿力量,充實的日子最美好各位早安,這里是平頭哥聯盟,我是首席填坑官蘇南,用心分享一起成長做有溫度的攻城獅。 showImg(https://segmentfault.com/img/bVbjIcs?w=1008&h=298); 前言 繼上一次webpack的基礎配置分享之后,本次將分享一些工作中項目常用的配置插件、也...
閱讀 2225·2021-09-22 15:25
閱讀 3610·2019-08-30 12:48
閱讀 2197·2019-08-30 11:25
閱讀 2332·2019-08-30 11:05
閱讀 720·2019-08-29 17:28
閱讀 3279·2019-08-26 12:16
閱讀 2602·2019-08-26 11:31
閱讀 1683·2019-08-23 17:08