使用webpack管理多頁應用技巧總結
隨著前端功能不斷豐富，前端代碼也越來越復雜難以管理。為了簡化開發的復雜度，出現了眾多新的處理技術：模塊化、組件化、css預處理器（less,scss）等，它們提高了我們開發效率，但眾多模塊文件的處理打包還是會非常繁瑣的。
Webpack是一個nodejs工具，它的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，***打包為一個瀏覽器可識別的JavaScript文件。
- webpack {entry file/入口文件}
- {destination for bundled file/存放bundle.js的地方}
編寫它的默認配置文件webpack.config.js，加入簡單配置就可以簡化上面的命令為webpack(非全局安裝需使用node_modules/.bin/webpack)：
- module.exports = {
- entry: __dirname + "/development/main.js",//已多次提及的唯一入口文件
- output: {
- path: __dirname + "/build",//打包后的文件存放的地方
- filename: "bundle.js"//打包后輸出文件的文件名
- }
接上一步，繼續修改該node的配置文件package.json，加入如下配置就可以使用更簡單的命令npm start：
- "scripts": {
- "start": "webpack"
- ......
- },
這就是webpack的簡單用法了，下面開始詳細介紹webpack的配置文件。
一、.webpack的配置文件其實就是一個node的module，用commonJS風格編寫。默認名為webpack.config.js，要自定義配置文件名可以在webpack命令中指定（顯然不能寫到配置文件中）：
webpack --config ./webpackConfig/dev.config.js 默認會以當前目錄為基本目錄（可以通過--content-base來更換基本目錄）,webpack-dev-server生成的包并沒有放在你的真實目錄中,而是放在了內存中。可以另外開一個cmd，使用監控命令來輸出到磁盤：
webpack --watch二、entry段
可以是字符串（單入口），可以是數組（多入口），但為了后續發展，建議【使用object】。entry.value是入口文件或者內置模塊名，entry.key就是output.filename中的[name]變量的值。
- entry值是字符串或者數組時時，output中沒有變量[name]，entry值是對象時，output中才有變量[name]。
- entry值是數組，表示把數組中的所有js文件內容都打包到一個js文件內作為入口js文件。
- entry的值是對象，表示這是一個多頁面應用，對象里每一個屬性代表一個入口js文件配置。屬性的值還可以是數組，表示數組中的文件都會被打包到同一個文件中，一般用來打包合并第三方插件代碼到同一個js文件，減少網絡請求次數。
三、output段
相當于【一套規則】，所有的入口都必須使用這一套規則，不能針對某一個特定的入口來制定output規則。
- output中的常用參數包括：path/publicPath/filename/chunkFilename。
- path參數（只是給webpack用的）表示生成文件的根目錄，需要傳入一個【文件系統絕對路徑】。path參數和后面的filename參數共同組成入口文件的完整路徑。
- publicPath（是給webpack-dev-server用的）參數表示的是一個【URL路徑】（指向生成文件的根目錄），用于生成css/js/圖片/字體文件等資源的起始路徑，會自動加到資源文件的url前面。
- path參數其實是針對本地文件系統的，而publicPath則針對的是瀏覽器；因此，publicPath既可以是一個相對路徑（相對當前代碼所在文件路徑），如示例中的'../../../../build/'，也可以是一個絕對路徑如http://www.xxxxx.com/。一般來說，我還是更推薦相對路徑的寫法，這樣的話整體遷移起來非常方便。那什么時候用絕對路徑呢？其實也很簡單，當你的html文件跟其它資源放在不同的域名下的時候，就應該用絕對路徑了，這種情況非常多見于后端渲染模板的場景。
- filename參數是生成出來的入口文件的【命名規則】：[name]指代entry配置的key，[hash]與版本有關，每次編譯都不一樣，但在同一次編譯過程中生成的文件它都是一樣的，[chunkhash]對每個文件生成hash，與文件內容有關，而與版本無關。
- chunkFilename參數也是用來定義生成文件的命名方式，針對除入口文件外的chunk命名。
- library參數中的變量[name]就是webpack.DllPlugin中name參數的變量[name]
四、用CommonsChunkPlugin【智能】判斷提取并打包、出現在入口js文件中的公共代碼
- var commonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin({
- name: 'commons', // 放共有代碼的chunck的唯一標識符（可以在后面filename中用[name]引用）
- filename: '[name].bundle.js', // 放共有代碼的文件名的模板（[name]=CommonsChunkPlugin.name），它的省略值就是[name].js
- minChunks: 4, // 設定要有4個chunk（即4個入口）都有的代碼才會被納入公共代碼，默認在所有入口文件中都出現的代碼才會提取。
- chunks：[],//表示需要在哪些chunk里尋找公共代碼進行打包。則默認提取范圍為所有的chunk。
- });//最終生成文件的url是ouput.path + CommonsChunkPlugin.filename
它的作用在于：在以入口文件為單位打包js的前提下，再進一步去提取入口文件間的共有代碼：
1.如果name的值是不存在的chunk，則filename的值不能與現有的入口文件打包后的名字重復：
- 如果只給了name、filename，就是在<所有入口js>中提取<全部都有>的代碼單獨打包
- 如果給minChunks:2，針對<全部都有>，表示限定了在<所有入口js>中找，只有同時在任意2個入口文件中都出現的代碼才會被提取單獨打包
- 如果給chunks:['a','b']，針對<所有入口js>，表示只從a、b這兩個入口文件中提取<全部都有>的代碼單獨打包
2.如果name的值是現有chunk（entry.key），就會提取共有代碼放到同名的入口文件中（還可以通過filename改變對它打包后的文件名，通過minChunks規定在多少個入口文件中都出現了的代碼才算共有代碼，通過chunks需要提取共有代碼的入口文件范圍）。
五、兼容老式的jQuery插件的方式
解決使用老的jquery插件時報$/jQuery未定義錯誤。原因是我們在require jquery的時候，實際上并不會把jQuery對象設置為全局變量。jquery插件們找不到jQuery對象了，因為在它們各自的上下文環境里，既沒有局部變量jQuery（因為沒有適配AMD/CMD，所以代碼內部就沒有寫相應的require語句引入依賴），也沒有全局變量jQuery。(切記【三種方法不要混用】):
方法一、ProvidePlugin + expose-loader【用ProvidePlugin向插件中引入局部變量jQuery、用expose-loader引入全局變量jQuery】。
- var providePlugin = new webpack.ProvidePlugin({
- $: 'jquery',
- jQuery: 'jquery',
- 'window.jQuery': 'jquery',
- 'window.$': 'jquery',
- });
ProvidePlugin的機制是：【當webpack加載到某個js模塊里，出現了未定義且名稱符合（字符串完全匹配）配置中key的變量時】，會自動require配置中value所指定的js模塊。使用ProvidePlugin還有個好處，就是，你自己寫的代碼里，再！也！不！用require jquery啦!。
expose-loader【將指定js模塊export的變量聲明為全局變量】。如果你所有的jQuery插件都是用webpack來加載的話，的確用ProvidePlugin就足夠了；但總有那么些需求是只能用<script>來加載的:
- {
- test: require.resolve('jquery'), // 此loader配置項的目標是NPM中的jquery的資源路徑
- loader: 'expose?$!expose?jQuery', // 先把jQuery對象聲明成為全局變量`jQuery`，再通過管道進一步又聲明成為全局變量`$`
- },
方法二、使用externals配置項，用來【將某個全局變量“偽裝”成某個js模塊的exports】，當某個js模塊顯式地調用var $ = require('jquery')的時候，就會把window.jQuery返回給它，但是要先在頁面中寫<script>標簽手動加載 jquery.min.js（意味著如果某個庫沒有提供生產環境的文件XXX.min.js就不能用這個方法）：
- externals: {
- 'jquery': 'window.jQuery',
- }
方法三、imports-loader，相當于【手動版的ProvidePlugin】，不建議使用
- {
- test: require.resolve("some-module"),
- loader: "imports?$=jquery&jQuery=jquery", // 相當于`var $ = require("jquery");var jQuery = require("jquery");`
- }
六、其它資源的打包處理方式
loader【擴展了require()方法的能力】，使它可以以模塊的形式導入非js文件，處理***導出的都是javascrit。loader有兩種使用方式，一種是寫在require的參數里： require("!style!css!./style.css");還有一種是些到配置文件中，通過擴展名自動綁定loader。
1.對css的處理方式
less-loader模塊對less文件進行編譯，但并不會針對url()語法做特別的轉換。如果想把url()語句里涉及到的文件（比如圖片、字體文件等）也一并用webpack打包的話，就必須利用管道交給css-loader做進一步的處理。在css-loader會把它轉成require()語句，從而觸發在webpack配置文件里定義好可以處理這類資源的其它loader（比如url-loader,file-loader）。一般我在url()語句里都會以相對路徑的方式（相對于此語句所在的less/css文件）來指定資源路徑。
方法一、可以使用style-loader直接把css代碼段跟js打包在一起，并自動用<style>標簽插入到頁面。
方法二、也可以用ExtractTextPlugin生成并加載CSS文件（結果是每個入口js都只對應一個css文件）的形式。extractTextPlugin會對每一個entry執行操作：查找entry中所有通過require()語句導入的css代碼，把它們打包到特定路徑（由插件的唯一參數指定）的一個css文件中：
- var precss = require('precss');
- var autoprefixer = require('autoprefixer');
- var ExtractTextPlugin = require('extract-text-webpack-plugin');
- ......
- module.exports = {
- ......
- module: {
- loaders: [
- {
- test: /\.css$/,
- exclude: /node_modules|bootstrap/,
- //關閉autoprefixer以避免你的廢棄CSS代碼被css-loader刪除了
- //***步：loader里加入ExtractTextPlugin.extract()，這樣才會提取css到獨立的文件
- loader: ExtractTextPlugin.extract('css-loader?minimize&-autoprefixer!postcss-loader'),
- }
- ]
- },
- //PostCSS 是ExtractTextPlugin的插件，主要功能只有兩個：***個就是前面提到的把 CSS 解析成 JavaScript 可以操作的抽象語法樹結構（AST），第二個就是調用插件來處理 AST 并得到結果。
- postcss: function () {
- return [precss, autoprefixer({
- remove: false,
- browsers: ['ie >= 8', '> 1% in CN'],
- })];
- },
- ......
- plugins: [
- //第二步：指定打包css文件的文件名和路徑（相對于output.path)
- new ExtractTextPlugin('[name]/styles.css'), // [name]=entry.key，表示每一個入口js文件可以對應打包一個css文件,不用這個[name]變量就會把所有入口文件中的require("XXX.css")語句引入的css文件內容都打包到同一個文件中。
- ]
- }
2.對圖片和字體文件的處理方式
圖片可以直接在js文件中通過require導入，也可以在css中通過url()引入，所以對應有兩種打包方式：
方法一、require('!url-loader?limit=8192&name=static/images/[hash].[ext]!./imgs/login-bg.jpg')//只對單個圖片文件，用于在js文件中導入圖片
方法二、loader: 'url?limit=8192&name=./static/img/[hash].[ext]'//可以匹配文件后綴，從而批量處理，用于在css文件中的url()語句處理
表示圖片小于8k就轉成url(dataURL)直接替換原url()語句，否則打包到output.publicPath + /static/img/[hash].[ext](只是簡單的字符串拼接，沒有路徑解析操作)，然后用這個路徑替換掉原url()中的路徑。
file-loader的主要功能是：把源文件遷移到指定的目錄（可以簡單理解為從源文件目錄遷移到build目錄），并返回新文件的路徑（只是簡單的字符串拼接，沒有路徑解析操作），與url-loader的使用方式相同（沒有limit參數）
七、用DllPlugin&DllReferencePlugin把第三方庫預打包成dll
但與CommonsChunkPlugin不一樣的是，它不僅僅是把公用代碼提取出來，還進一步把公用代碼和它的使用者（業務代碼）從編譯這一步就分離出來，以做到分別編譯公用代碼和業務代碼。因為業務代碼常改，而公用代碼不常改，開發過程中就可以做到只編譯一次公用代碼，在以后的修改重編譯過程中就會把公用代碼排除在外。
1.編寫配置文件ddl.config.js：
- const webpack = require('webpack');
- module.exports = {
- output: {
- path: 'build',
- filename: '[name].js',
- library: '[name]',//與webpack.DllPlugin.name保持一樣
- },
- entry: {
- "lib": ['react','react-dom','react-router',]//需要打包成dll的公共模塊
- },
- plugins: [
- new webpack.DllPlugin({
- path: 'manifest.json',
- name: '[name]',//與output.library保持一樣
- context: __dirname,//與DllReferencePlugin.context保持一樣，建議統一設置為項目根目錄
- }),
- ],
- };
2.編譯一次公共代碼：
webpack --progress --colors --config ./ddl.config.js，結果會輸出兩個文件一個是打包好的 lib.js，一個就是 manifest.json
3.在打包業務代碼的配置文件webpack.config.js中引用：
- plugins: [
- new webpack.DllReferencePlugin({
- context: __dirname,//DllPlugin.context保持一樣，建議統一設置為項目根目錄
- manifest: require('./manifest.json'),
- }),
- ]
4.以后業務代碼修改只需要運行：
webpack --progress --colors --config ./webpack.config.js，而不用再執行編譯公共代碼的命令了。
八、自動生成html頁面
每一個html-webpack-plugin的對象實例都只針對/生成一個頁面（會自動向模板文件里插入依賴的js、css標簽，***生成html文件），因此，我們做多頁應用的話，就要配置多個html-webpack-plugin的對象實例：
- new HtmlWebpackPlugin({
- filename: `${page}/page.html`,//生成html頁面的命名，最終位置：output.path + HtmlWebpackPlugin.filename
- template: path.resolve(dirVars.pagesDir, `./${page}/html.js`),//生成html需要引入的模板路徑
- chunks: [page, 'commons/commons'],//指定生成的html文件中需要引入的、打包好的入口js文件，
- //如果使用了CommonsChunkPlugin，則這里必須填寫存放公共js代碼的chunk的name
- hash: true, // 為靜態資源生成hash值
- minify: true,
- xhtml: true,
- });
另外，webpack默認支持的ejs模板，還需要在webpack配置文件中配置好相應的loader。
九、用resolve為require做請求重定向
可以提高打包效率節省時間。這里的請求是對模塊的依賴，也就是一個 require 語句，而不是一個 HTTP 請求：
- resolve: {
- alias: {
- myModule: "app/my.min.js"//require('myModule')就相當于require('app/my.min.js')
- }
- }
參考資料：https://segmentfault.com/a/1190000006843916
