webpack基礎

webpack基礎

網上關於webpack的文章已經不少了，本文只是從我的理解的角度進行總結和整理。

什麼是webpack？

webpack能夠說是一個打包工具，有下面的一些特色

• 能夠進行代碼轉換能夠把TypeScript、less轉化成瀏覽器可執行的JavaScript、css等等；
• 能夠壓縮js、css、html等等，進行文件優化；
• 熱更新，代碼修改後會自動刷新瀏覽器頁面； 還有代碼分割、代碼校驗等等這些，它就是一個把咱們的開發流程變簡單，提升開發效率的工具。

webpack核心概念

• Entry：入口，webpack執行構建的入口，可配置多入口；
• Output：出口，webpack輸出文件存放的地方，默認是./dist；
• Module：模塊，webpack會從配置的Entyr開始遞歸找出全部依賴的模塊；
• Loader：模塊轉化器，把模塊內容按需求轉成新內容；
• Chunk：代碼塊，用於代碼合併與分割；
• Plugin：插件，在webpack構建過程當中的特定時機注入擴展邏輯來改變構建結果；
• context：打包路徑上下文，必須是絕對路徑；

下面分別看看每一個概念的一些用法，要注意的是webpack4咱們不作任何設置都會默認配置，能夠直接打包。

Entry（入口）

咱們在使用vue-cli 2.x初始化出來的項目，配置文件裏設置了單一入口

webpack.base.conf.js

module.exports = {
  ...
  entry: './src/main.js',
  ...
}
複製代碼

怎麼實現多入口呢？以下

module.exports = {
  ...
  entry: ['./src/main.js', './src/vendors.js']
  ...
}

// 或者

module.exports = {
  ...
  entry: {
    main: './src/main.js',
    vendors: './src/vendors.js'
  }
  ...
}
複製代碼

多入口的使用場景：分離應用程序和第三方庫入口和多頁面應用。

Output（出口）

基礎配置

// 單一入口配置
module.exports = {
  ...
  output: {
    filename: 'bundle.[hash:5].js',
    path: path.resolve(__dirname,'dist')
  }
  ...
}

// 多入口配置
module.exports = {
  ...
  output: {
    filename: '[name].[hash:5].js',
    path: path.resolve(__dirname,'dist')
  }
  ...
}
// [name]的值就是多入口中entry的鍵值
複製代碼

Module（模塊）

webpack 模塊可以以各類方式表達它們的依賴關係，webpack的模塊規範能夠是

• CommonJS
• esModule
• AMD
• @import
• 樣式中的圖片連接

Loader（模塊轉化器）

webpack 經過 loader 能夠支持各類語言和預處理器編寫模塊。loader的執行順序是從下往上，從右到左。

module: {
  ...
  rules: [
      {
        test: /\.css/,
        use:['style-loader','css-loader']
      }
  ]
  ...
}
複製代碼

如上代碼，執行轉化css先會用css-loader（負責解析@import引入的css）轉化後，再使用style-loader插入到head標籤中。 在實際項目中，咱們可能會用到less、scss或者stylus等等來編寫css，那咱們就要安裝對應的loader進行預處理了；

• .scss node-sass sass-loader
• .less less less-loader
• .stylus stylus stylus-loader 爲何都要安裝兩個包？能夠這樣理解，sass-loader調用了node-sass把scss轉化成css，若是咱們是用scss，就須要在css-loader後面加上sass-loader。

Plugin（插件）

插件在於解決loader沒法實現的事情，是webpack的支柱功能。插件的使用方法就是new一個實例。webpack的插件不少，咱們能夠根據實際的須要進行安裝使用。在咱們打包過程當中，js，css，html的壓縮就是經過配置插件來完成的。這裏須要提醒注意的一點是，咱們使用vue-cli初始化出來的項目，默認會壓縮js，不壓縮css，若是咱們本身手動加入了壓縮css的插件，須要把壓縮js的插件也手動加入。

Chunk和context瞭解就行這裏不展開去講了。