webpack 配置之入門一

webpack 是一個現代 Javascript 應用程序的模塊打包器（module bundler )，它裏面的功能比較多，核心模塊可分爲模塊打包、代碼分割與按需加載。這裏只簡單講解下 webpack 的入門配置。

一：本地安裝 webpack

　　一、全局安裝

　　　　在全局安裝以前首先須要下載 node （去node官網下載便可） 使用 node -v 和 npm -v 來查看下載的版本。這裏不做詳細介紹。

　　　　管理員模式打開cmd 或 git 命令行工具：npm install webpack -g 或使用指定版本 npm install webpack@3.3.0 -g 建議使用後者，由於 webpack 更新太快，最新版本修改會出現報錯現象。在實際開發中仍是使用固定版本，後期會介紹版本更新。

　　2、項目配置

　　　　接下來，就要在項目中使用 webpack 了， 首先經過 npm init 來新建 package.json 文件 ，這時候會讓你輸入name、version等基本信息，可默認回車便可。

　　　　接下來在 package.json 中安裝 webpack，經過命令：npm install webpack@3.3.0 --sava-dev （和全局安裝的版本保持一致，否則會出現版本衝突，可能會在項目中報錯）以下圖：

 

　　　　這時候可在 package.json 文件中查看安裝的 webpack 版本，也可以使用命令行 webpack -v 來查看。這樣就配置成功一個簡單的 webpack 了，使用 webpack -h 能夠查看 webpack 的主要命令了。

　　　　其實在每一個項目中都必須配置有一個 webpack.config.js ，它的做用如同常規的 gulpfile.js/Gruntfile.js ，其實它就是一個配置項，來告訴 webpack 它須要作什麼。在項目根目錄下新建 webpack.config.js 文件，接下來就是配置 webpack.config.js 了。

 

 二：配置 webpack.config.js

　　1.配置最簡單的打包 Js 文件

　　　在項目建立一些 js 文件，在 js 文件中寫上簡單的 js，以下圖所示，這時咱們有二種方法來編譯打包 app.js 文件，

　　　第一種直接在命令行中使用 webpack app.js bundle.js 這時會生產 bundle.js ,

　　   第二種是配置簡單的 webpack.config.js 文件，在根目錄下新建 webpack.config.js 使用ComonJs 模型 module.exports = {   entry: { app: './app.js'}, output: { filename:  '[name].[hash:5].js' }}  這是使用簡單的哈希算法來生產 js 文件，

　　   在編寫好 config.js 以後，在 命令行中使用 webpack 直接編譯打包就行。在這裏若是新建的配置文件命名不是 webpack.config.js，如新建的配置文件爲 webpack.conf.js 在編譯時使用命令 webpack --config webpack.conf.js 來編譯打包。

 

 　　2.ES6 語法的解析

　　　在項目咱們編寫 js 代碼時經常使用到 ES6 語法，可是在一些低版本瀏覽器上對 ES6 的支持性不是很好，這是咱們就引用 babel 來編譯 ES6 語法，使用 babel 是可根據本身的狀況來安裝不一樣的版本，如新版本：npm install babel-loader@8.0.0-beta.0 @babel/core  

　　　或普通版本 npm install --save-dev babel-loader babel-core  安裝完成以後咱們須要配置 config.js 文件以下，另外除了引用 babel-loader 以外，咱們還須要安裝 babel-preset，它的做用是將你的 js 按什麼標準來解析的，常見爲 es-2015 es-2017 ... env　　等，其中 env 包含上面的版本。安裝 babel-preset :  新版本-- npm install @babel/preset-env --save-dev    普通版本-- npm install babel-preset-env --save-dev    

　　　在 preset 可有針對瀏覽器解析的 broswers 可制定解析的標準：如 ' > 1%'  ' last 2 versions '  或 制定瀏覽器版本。這樣咱們就能夠解析 ES6 語法了。可是這樣解析對許多函數與方法不能處理，如： Generator Set Map Array.form Array.prototype.includes等,這時候咱們須要藉助插件來完成。經常使用的有 babel Polyfill  與 babel runtime transform。

　　　　

 

 　　　babel polyfill 簡單來說是爲應用開發準備的，是會影響全局的，安裝-- npm install babel-polyfill --save 。使用也很是簡單，只要在公共 js 中引用就行。如： import  "babel-polyfill"。而 babel runtime transform 是爲開發框架準備的，它只會局部使用，不會影響全局。 新版本安裝-- npm install @babel/plugin-transform-runtime --save-dev     npm install @babel/runtime --save         普通安裝-- npm install babel-plugin-transform-runtime --save-dev      npm install babel-runtime --save 。使用方法是在根目錄下新建  .babelrc 文件，該文件是一個 json 對象， 將 config.js 中的 presets 拷貝到 .babelrc 下改爲 json 格式，可是要注意的是若是使用如 chrome 版本 56 的可能也不會轉換爲這些函數。以下，而後 webpack 運行。

 　　　　　

　　3.typescript 的編譯

　　　typescript 是有微軟開發開源的 js 超集，咱們在項目中可能會使用到 typescript，因此咱們須要在 webpack 裏配置解析 typescript，

　　　未完待續........

　　4.打包公共代碼

 　　  在實際開發中，咱們一般須要提取公共部分，減小資源的請求，這時咱們就要提取公共的代碼了，在 webpack 中咱們是使用 webpack 內置組件 webpack.optimize.CommonsChunkPlugin 來實現。

　　  配置：{    plugins: [  new webpack.optimize.CommonsChunkPlugin( option ) ]  }  option 有許多參數，如 options.name Or options.names 是指提取的選定名稱， options.filename  打包的名稱 

　　 options.minChunks 打包的規則，但是數字、Infinity、函數等。options.chunks [] 提取代碼的範圍  options.children......等。

　     如：在 pageA 頁面 引用 subPageA 與 subPageB ，在 PageB 頁面也和 PageA 同樣，在 subPageA 與 subPageB 中都引用了 moduleA。且在頁面中還有可能引用了第三方插件 （lodash），具體配置說明以下：

 

　　5.代碼切割與懶加載

 　　  在實際開發中，咱們會遇到許多問題，在 webpack 中有一個代碼分割能力，它的主要做用是：一、分離業務代碼與第三方依賴 ，二、分離業務代碼、業務公共代碼與第三方依賴，三、分離首次加載與訪問後加載。

　　　實現的方法可經過 webpack 內置方法 webpack methods 來實現，也能夠經過 ES 2015 Loader Spec 動態加載方式。

　　　如：在單頁面應用中，PageA 頁面引用了子頁面 subPageA 與 subPageB，同時引用了第三方插件 lodash，在 subPageA 與 subPageB 頁面中引用了 moduleA，在咱們不使用 內置插件 webpack.optimize.CommonsChunkPlugin 的狀況下，咱們直接改變頁面請求加載的資源，以下：在這裏咱們使用 require.include 來加載 moduleA，由於是單頁面應用，提早加載 moduleA，使之 moduleA 成爲公共部分， subPageA 與 subPageB 中只有本身，不會再加載 moduleA。並且經過第三方插件加載的 lodash 會被單獨加載成 vendor.chunk.js，使之分離。　　

　　   

　　   在項目中，咱們可結合 plugin 來實現代碼的打包與分割，如：在 PageA 和 PageB 頁面引用了子頁面 subPageA 與 subPageB，同時引用了第三方插件 lodash，在 subPageA 與 subPageB 頁面中引用了 moduleA，這是但是配合 plugin 來提取公共代碼。

          未完待續........