webpack用過哪些插件，使用webpack好處

webpack用過哪些插件，使用webpack好處

html-webpack-plugin //生成html文件

extract-text-webpack-plugin //提取樣式到單獨的css文件

CommonsChunkPlugin //提取公共的JS庫

(經過webpack.optimize.CommonsChunkPlugin使用)

UglifyJsPlugin //壓縮混淆插件

(能夠經過webpack.optimize.UglifyJsPlugin使用)

ProvidePlugin //打包時一次性引入項目中全部依賴庫，例如jquery等

DefinePlugin //決定打成dev包仍是production包會用到它

好處：

1.輕鬆使用es6。

   由於webpack能夠在瀏覽器不支持es6的狀況下讓你使用es6語法，最新的webpack版本已經不須要配置也能過變異es6語法，以前的版本都須要加入babel加載器才能夠打包es6.

2.能夠打包文件

3.代碼改變後，但是在瀏覽器上沒有顯示出改變後的效果。

4.減小界面請求數量。

許多圖片圖表都是放到一張圖片上的，這樣作的緣由是由於能過減小圖片體積，一樣的將js，css文件打包也能夠減小體積使幾面加載的更快

5.頂級應用spa模式即單頁面應用

 

webpack中的babel使用？以及性能優化

兼容低版本的瀏覽器,將ES六、ES7等高版本代碼轉換爲ES5代碼。

安裝babel

npm install --save-dev babel-cli babel-preset-env

babel-preset-env 是Babel新版的preset，它可讓咱們 靈活地設置代碼目標執行環境 ，

好比只支持各個瀏覽器最新的2個版本，支持IE8及其以上的IE瀏覽器

安裝babel-loader

npm install --save-dev babel-loader

babel-loader 是webpack的babel插件，它讓咱們能夠在wepback中運行Babel。

配置babel

新增 .babelrc 文件：

{

  "presets": ["env"]

}

 

配置webpack

新增 webpack.config.js 文件：

module.exports = {

  entry: './test.js',

  output:

  {

    path: __dirname,

    filename: 'bundle.js'

  },

  module:

  {

    rules: [

    {

      test: /\.js$/,

      exclude: /node_modules/,

      loader: 'babel-loader'

    }]

  }

};

咱們在webpack中使用了babel-loader插件來運行Babel，轉換全部的.js代碼(除了node_modules中的代碼)

babel-polifill插件

在上面的babel配置中，babel只是將一些es6，es7-8的語法轉換成符合目標的js代碼，Babel默認只轉換新的JavaScript句法（syntax），而不轉換新的API,可是若是咱們使用一些特性或方法，好比Generator, Set, 或者一些方法。babel並不能轉換爲低版本瀏覽器識別的代碼。這時就須要babel-polifill。

npm install --save babel-polifill

而後在應用入口引入polifill，要確保它在任何其餘代碼/依賴聲明前被調用。

//CommonJS module

require('babel-polyfill');

 

//es module

import 'babel-polifill';

在webpack.config.js中，將babel-polifill加入entry數組中：

entry: ["babel-polifill", "./app.js"]

相比於runtime-transform，polifill用於應用開發中。會添加相應變量到全局，因此會污染全局變量。

runtime transform也是一個插件，它與polifill有些相似，但它不污染全局變量，因此常常用於框架開發。

npm install --save-dev babel-plugin-transform-runtime

npm install --sav

e babel-runtime

將下面內容添加到.bablerc文件中

{

    "plugins": ["transform-runtime"]

}

babel優化

Webpack 和一些 Plugin/Loader 都有 Cache 選項。開啓 Cache 選項，有利用提升構建性能。

使用 babel-loader 的時候開啓 cacheDirectory 選項，會較爲明顯的提高構建速度。

module: {

    rules: [{

        test: /\.js$/,

        use: ['babel-loader?cacheDirectory'],

        include: path.join(__dirname, 'app')

    }]

}

 

在使用 loader 的時候，經過指定 exclude 和 incude 選項，減小 loader 遍歷的目錄範圍，從而加快 Webpack 編譯速度。

指定 babel-loader 只處理業務代碼

{

   test: /\.js$/,

   use: ['babel-loader'],

   include: path.join(__dirname, 'app')

}

 

bable編譯後的代碼看過嗎？如何實現promise，async await

Promise的實現過程，其主要使用了設計模式中的觀察者模式,經過Promise.prototype.then和Promise.prototype.catch方法將觀察者方法註冊到被觀察者Promise對象中，同時返回一個新的Promise對象，以即可以鏈式調用。

被觀察者管理內部pending、fulfilled和rejected的狀態轉變，同時經過構造函數中傳遞的resolve和reject方法以主動觸發狀態轉變和通知觀察者。

把async函數經過高階函數轉爲promise裏嵌入的generator來執行,翻譯後的await替換爲yield

 

Webpack是怎麼配置的？配置文件裏有哪些字段，分別起到什麼做用？

https://blog.csdn.net/mutouafangzi/article/details/79377917#entry%E5%92%8Coutput%E9%85%8D%E7%BD%AE

 

webpack4與3的區別是什麼，具體有哪些改變？

環境支持

在發佈日誌裏的 Big changes 板塊，官方宣佈不在支持Node 4, Node 6 使用的是v8 5.0版本，支持93%的ES6語法。不難看出，這個決定是爲了更好的利用ES6語法的優點，來編寫出更加整潔和健壯的代碼。

備註：當使用webpack4時，確保使用 Node.js的版本 >= 8.9.4。由於webpack4使用了不少JS新的語法，它們在新版本的 v8 裏通過了優化。

mode 屬性

另外一個大的改變是webpack須要設置mode屬性，能夠是 development 或 production。

"scripts": {

  "dev": "webpack --mode development",

  "build": "webpack --mode production"

}

複製代碼

經過mode, 你能夠輕鬆設置打包環境。若是你將 mode 設置成 development，你將得到最好的開發階段體驗。這得益於webpack針對開發模式提供的特性：

瀏覽器調試工具

註釋、開發階段的詳細錯誤日誌和提示

快速和優化的增量構建機制

若是你將mode設置成了 production, webpack將會專一項目的部署，包括如下特性：

開啓全部的優化代碼

更小的bundle大小

去除掉只在開發階段運行的代碼

Scope hoisting和Tree-shaking

插件和優化

webpack4刪除了CommonsChunkPlugin插件，它使用內置API optimiza-tion.splitChunks 和 optimization.runtimeChunk，這意味着webpack會默認爲你生成共享的代碼塊。其它插件變化以下:

NoEmitOnErrorsPlugin 廢棄，使用optimization.noEmitOnErrors替代，在生產環境中默認開啓該插件。

ModuleConcatenationPlugin 廢棄，使用optimization.concatenateModules替代，在生產環境默認開啓該插件。

NamedModulesPlugin 廢棄，使用optimization.namedModules替代，在生產環境默認開啓。

uglifyjs-webpack-plugin升級到了v1.0版本, 默認開啓緩存和並行功能。

開箱即用WebAssembly

WebAssembly(wasm)會帶來運行時性能的大幅度提高，因爲在社區的熱度，webpack4對它作了開箱即用的支持。你能夠直接對本地的wasm模塊進行import或者export操做，也能夠經過編寫loaders來直接import C++、C或者Rust。

支持多種模塊類型

webpack4支持5種模塊類型：

javascript/auto: 在webpack3裏，默認開啓對全部模塊系統的支持，包括CommonJS、AMD、ESM。

javascript/esm: 只支持ESM這種靜態模塊。

javascript/dynamic: 只支持CommonJS和AMD這種動態模塊。

json: 只支持JSON數據，能夠經過require和import來使用。

webassembly/experimental: 只支持wasm模塊，目前處於試驗階段。

0CJS

0CJS的含義是0配置，webpack4受Parcel打包工具啓發，儘量的讓開發者運行項目的成本變低。爲了作到0配置，webpack4再也不強制須要 webpack.config.js 做爲打包的入口配置文件了，它默認的入口爲'./src/'和默認出口'./dist'，這無疑對小項目而言是福音。

你所須要作的是在你的項目裏包含 ./src/index.js 文件。當在命令行裏執行 webpack 命令時，webpack會將該文件做爲項目的入口文件進行打包配置。

新的插件系統

webpack4對插件系統進行了很多修改，提供了針對插件和鉤子的新API。變化以下：

全部的hook由 hooks 對象統一管理，它將全部的hook做爲可擴展的類屬性。

當添加插件時，必須提供一個插件名稱。

開發插件時，能夠選擇sync/callback/promise做爲插件類型。

能夠經過this.hooks = { myHook: new SyncHook(...) } 來註冊hook了。