建站
咨詢
售后
建站咨詢
新聞中心
隨著前端功能不斷豐富，前端代碼也越來越復(fù)雜難以管理。為了簡化開發(fā)的復(fù)雜度，出現(xiàn)了眾多新的處理技術(shù)：模塊化、組件化、css預(yù)處理器（less,scss）等，它們提高了我們開發(fā)效率，但眾多模塊文件的處理打包還是會非常繁瑣的。
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計、成都做網(wǎng)站、樂山網(wǎng)絡(luò)推廣、重慶小程序開發(fā)、樂山網(wǎng)絡(luò)營銷、樂山企業(yè)策劃、樂山品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供樂山建站搭建服務(wù)，24小時服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com
Webpack是一個nodejs工具，它的工作方式是：把你的項目當(dāng)做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，***打包為一個瀏覽器可識別的JavaScript文件。
- webpack {entry file/入口文件}
- {destination for bundled file/存放bundle.js的地方}
編寫它的默認(rèn)配置文件webpack.config.js，加入簡單配置就可以簡化上面的命令為webpack(非全局安裝需使用node_modules/.bin/webpack)：
- module.exports = {
- entry: __dirname + "/development/main.js",//已多次提及的唯一入口文件
- output: {
- path: __dirname + "/build",//打包后的文件存放的地方
- filename: "bundle.js"http://打包后輸出文件的文件名
- }
接上一步，繼續(xù)修改該node的配置文件package.json，加入如下配置就可以使用更簡單的命令npm start：
- "scripts": {
- "start": "webpack"
- ......
- },
這就是webpack的簡單用法了，下面開始詳細(xì)介紹webpack的配置文件。
一、.webpack的配置文件其實就是一個node的module，用commonJS風(fēng)格編寫。默認(rèn)名為webpack.config.js，要自定義配置文件名可以在webpack命令中指定（顯然不能寫到配置文件中）：
webpack --config ./webpackConfig/dev.config.js 默認(rèn)會以當(dāng)前目錄為基本目錄（可以通過--content-base來更換基本目錄）,webpack-dev-server生成的包并沒有放在你的真實目錄中,而是放在了內(nèi)存中?？梢粤硗忾_一個cmd，使用監(jiān)控命令來輸出到磁盤：
webpack --watch二、entry段
可以是字符串（單入口），可以是數(shù)組（多入口），但為了后續(xù)發(fā)展，建議【使用object】。entry.value是入口文件或者內(nèi)置模塊名，entry.key就是output.filename中的[name]變量的值。
- entry值是字符串或者數(shù)組時時，output中沒有變量[name]，entry值是對象時，output中才有變量[name]。
- entry值是數(shù)組，表示把數(shù)組中的所有js文件內(nèi)容都打包到一個js文件內(nèi)作為入口js文件。
- entry的值是對象，表示這是一個多頁面應(yīng)用，對象里每一個屬性代表一個入口js文件配置。屬性的值還可以是數(shù)組，表示數(shù)組中的文件都會被打包到同一個文件中，一般用來打包合并第三方插件代碼到同一個js文件，減少網(wǎng)絡(luò)請求次數(shù)。
三、output段
相當(dāng)于【一套規(guī)則】，所有的入口都必須使用這一套規(guī)則，不能針對某一個特定的入口來制定output規(guī)則。
- output中的常用參數(shù)包括：path/publicPath/filename/chunkFilename。
- path參數(shù)（只是給webpack用的）表示生成文件的根目錄，需要傳入一個【文件系統(tǒng)絕對路徑】。path參數(shù)和后面的filename參數(shù)共同組成入口文件的完整路徑。
- publicPath（是給webpack-dev-server用的）參數(shù)表示的是一個【URL路徑】（指向生成文件的根目錄），用于生成css/js/圖片/字體文件等資源的起始路徑，會自動加到資源文件的url前面。
- path參數(shù)其實是針對本地文件系統(tǒng)的，而publicPath則針對的是瀏覽器；因此，publicPath既可以是一個相對路徑（相對當(dāng)前代碼所在文件路徑），如示例中的'../../../../build/'，也可以是一個絕對路徑如http://www.xxxxx.com/。一般來說，我還是更推薦相對路徑的寫法，這樣的話整體遷移起來非常方便。那什么時候用絕對路徑呢？其實也很簡單，當(dāng)你的html文件跟其它資源放在不同的域名下的時候，就應(yīng)該用絕對路徑了，這種情況非常多見于后端渲染模板的場景。
- filename參數(shù)是生成出來的入口文件的【命名規(guī)則】：[name]指代entry配置的key，[hash]與版本有關(guān)，每次編譯都不一樣，但在同一次編譯過程中生成的文件它都是一樣的，[chunkhash]對每個文件生成hash，與文件內(nèi)容有關(guān)，而與版本無關(guān)。
- chunkFilename參數(shù)也是用來定義生成文件的命名方式，針對除入口文件外的chunk命名。
- library參數(shù)中的變量[name]就是webpack.DllPlugin中name參數(shù)的變量[name]
四、用CommonsChunkPlugin【智能】判斷提取并打包、出現(xiàn)在入口js文件中的公共代碼
- var commonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin({
- name: 'commons', // 放共有代碼的chunck的唯一標(biāo)識符（可以在后面filename中用[name]引用）
- filename: '[name].bundle.js', // 放共有代碼的文件名的模板（[name]=CommonsChunkPlugin.name），它的省略值就是[name].js
- minChunks: 4, // 設(shè)定要有4個chunk（即4個入口）都有的代碼才會被納入公共代碼，默認(rèn)在所有入口文件中都出現(xiàn)的代碼才會提取。
- chunks：[],//表示需要在哪些chunk里尋找公共代碼進(jìn)行打包。則默認(rèn)提取范圍為所有的chunk。
- });//最終生成文件的url是ouput.path + CommonsChunkPlugin.filename
它的作用在于：在以入口文件為單位打包js的前提下，再進(jìn)一步去提取入口文件間的共有代碼：
1.如果name的值是不存在的chunk，則filename的值不能與現(xiàn)有的入口文件打包后的名字重復(fù)：
- 如果只給了name、filename，就是在<所有入口js>中提取<全部都有>的代碼單獨打包
- 如果給minChunks:2，針對<全部都有>，表示限定了在<所有入口js>中找，只有同時在任意2個入口文件中都出現(xiàn)的代碼才會被提取單獨打包
- 如果給chunks:['a','b']，針對<所有入口js>，表示只從a、b這兩個入口文件中提取<全部都有>的代碼單獨打包
2.如果name的值是現(xiàn)有chunk（entry.key），就會提取共有代碼放到同名的入口文件中（還可以通過filename改變對它打包后的文件名，通過minChunks規(guī)定在多少個入口文件中都出現(xiàn)了的代碼才算共有代碼，通過chunks需要提取共有代碼的入口文件范圍）。
五、兼容老式的jQuery插件的方式
解決使用老的jquery插件時報$/jQuery未定義錯誤。原因是我們在require jquery的時候，實際上并不會把jQuery對象設(shè)置為全局變量。jquery插件們找不到j(luò)Query對象了，因為在它們各自的上下文環(huán)境里，既沒有局部變量jQuery（因為沒有適配AMD/CMD，所以代碼內(nèi)部就沒有寫相應(yīng)的require語句引入依賴），也沒有全局變量jQuery。(切記【三種方法不要混用】):
方法一、ProvidePlugin + expose-loader【用ProvidePlugin向插件中引入局部變量jQuery、用expose-loader引入全局變量jQuery】。
- var providePlugin = new webpack.ProvidePlugin({
- $: 'jquery',
- jQuery: 'jquery',
- 'window.jQuery': 'jquery',
- 'window.$': 'jquery',
- });
ProvidePlugin的機(jī)制是：【當(dāng)webpack加載到某個js模塊里，出現(xiàn)了未定義且名稱符合（字符串完全匹配）配置中key的變量時】，會自動require配置中value所指定的js模塊。使用ProvidePlugin還有個好處，就是，你自己寫的代碼里，再！也！不！用require jquery啦!。
expose-loader【將指定js模塊export的變量聲明為全局變量】。如果你所有的jQuery插件都是用webpack來加載的話，的確用ProvidePlugin就足夠了；但總有那么些需求是只能用