模塊化

一、模塊化演變過程

當即執行函數

二、commonjs規範

一個文件就是一個模塊
每一個模塊都有點單獨的做用域
經過module.exports處處
經過require導入

commonjs是以同步模式加載模塊

node沒問題可是瀏覽器段有問題

因此就要使用amd規範，require.js

// 由於 jQuery 中定義的是一個名爲 jquery 的 AMD 模塊
// 因此使用時必須經過 'jquery' 這個名稱獲取這個模塊
// 可是 jQuery.js 並不在同級目錄下，因此須要指定路徑
define('module1', ['jquery', './module2'], function ($, module2) {
  return {
    start: function () {
      $('body').animate({ margin: '200px' })
      module2()
    }
  }
})

require(['./modules/module1'], function (module1) {
  module1.start()
})

使用起來較爲複雜，可是生態比較好，模塊劃分過於細緻的話js文件請求頻繁

三、模塊化標準規範

瀏覽器：ES Modules

node：CommonJS

四、ES Modules 基本特性

<!-- 經過給 script 添加 type = module 的屬性，就能夠以 ES Module 的標準執行其中的 JS 代碼了 -->
  <script type="module">
    console.log('this is es module')
  </script>


  <!-- 1. ESM 自動採用嚴格模式，忽略 'use strict' -->
  <script type="module">
    console.log(this)
  </script>


  <!-- 2. 每一個 ES Module 都是運行在單獨的私有做用域中 -->
  <script type="module">
    var foo = 100
    console.log(foo)
  </script>
  <script type="module">
    console.log(foo)
  </script>


  <!-- 3. ESM 是經過 CORS 的方式請求外部 JS 模塊的 -->
  <!-- <script type="module" src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script> -->


  <!-- 4. ESM 的 script 標籤會延遲執行腳本 -->
  <script defer src="demo.js"></script>
  <p>須要顯示的內容</p>

五、ESmodule導出

var obj = { name, age }


export default { name, age }
//導出一個對象，屬性爲name，age

export { name, age }


// export name // 錯誤的用法


// export 'foo' // 一樣錯誤的用法


setTimeout(function () {
  name = 'ben'
}, 1000)
//引用方也會在一秒鐘以後更改

六、import

// import { name } from 'module.js'
// import { name } from './module.js'
// import { name } from '/04-import/module.js'
// import { name } from 'http://localhost:3000/04-import/module.js'


// var modulePath = './module.js'
// import { name } from modulePath
// console.log(name)


// if (true) {
//   import { name } from './module.js'
// }

動態導入，直接引用地址
// import('./module.js').then(function (module) {
//   console.log(module)
// })



//命名成員和默認成員都要導入出來
// import { name, age, default as title } from './module.js'
import abc, { name, age } from './module.js'
console.log(name, age, abc)

七、

<script nomodule src="https://unpkg.com/promise-polyfill@8.1.3/dist/polyfill.min.js"></script>
  <script nomodule src="https://unpkg.com/browser-es-module-loader@0.4.1/dist/babel-browser-build.js"></script>
  <script nomodule src="https://unpkg.com/browser-es-module-loader@0.4.1/dist/browser-es-module-loader.js"></script>

加上nomodule 就能夠實現不支持esmodule的瀏覽器動態加載這個腳本

八、

ES Modules能夠導入Common JS模塊
CommonJs不能導入ES Modules模塊
CommonJS始終導出一個默認成員
注意import不是解構導出對象

九、打包的由來

ES Modules的弊端：

模塊化須要處理兼容

模塊化的網絡請求太頻繁，由於每個文件都要從服務端

全部前端資源除了JS以外都是須要模塊化的

打包工具的功能：

編譯JS新特性

生產階段須要打包爲一個js文件

支持不一樣種類的資源類型

十、模塊打包工具

webpack：

模塊打包器

兼容性處理：loader

代碼拆分

資源模塊：容許使用js引入其餘資源

十一、webpack快速上手

十二、webpack運行原理

bundle這個文件是一個當即執行函數

傳入參數就是代碼裏的每個模塊

有一個對象來儲存加載過的模塊，

會按照進入順序加載模塊，

1三、資源模塊加載

不一樣的資源文件須要配置不一樣的loader加載器

在rules裏面配置

rules:[
{
  test:/.css$/,
  use:[
    'style-loader',
    ‘css-loader'
  ]
}]

1四、webpack導入資源模塊

通常仍是以js文件爲入口

那麼其餘資源的文件

例如在js文件引入css文件

將整個項目變成了js驅動的項目

1五、webpack文件資源加載器

安裝file-loader加載器

rules:[
{
  test:/.png$/,
  use:[
    ‘file-loader',
    ‘css-loader'
  ]
}]

output:{
   puclicPath:’dist/‘ 根目錄文件，這樣圖片才能找到那個地址
}

1六、URL加載器

use:{
  Loader:url-loader,
  options:{
    Limit: 10 * 1024//低於這個大小才用url-loader
  }
}]

小文件用url-loader

1七、 js轉換

{
        test: /.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },

1八、模塊加載方式

遵循ES

遵循Common

遵循AMD的define函數和require函數

Loader加載的時候也會觸發

樣式代碼中的@import指令和url函數
@import url(reset.css);

HTML中的src屬性和href屬性

{
    test: /.html$/,
    use: {
      loader: 'html-loader',
      options: {
        attrs: ['img:src', 'a:href']
      }
    }
  }

1九、loader工做原理

markdown-loader

const marked = require('marked')


module.exports = source => {
  // console.log(source)
  // return 'console.log("hello ~")'這裏是由於必須返回js語句

  const html = marked(source)
  // return html
  // return `module.exports = "${html}"` 這樣子會致使換行符等被忽略
  // return `export default ${JSON.stringify(html)}` 轉成json就能夠避免這個問題


  // 返回 html 字符串交給下一個 loader 處理
  return html
}

    rules: [
      {
        test: /.md$/,
        use: [ //順序是從後往前
          'html-loader',
          './markdown-loader'
        ]
      }

20、插件機制

加強自動化能力，例如壓縮代碼

loader是用來加強資源加載能力的

2一、經常使用插件

自動清理輸出目錄的插件

plugins: [
    new webpack.ProgressPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin()
  ]

根據模板動態生成，動態輸出

plugins: [
    new CleanWebpackPlugin(),
    // 用於生成 index.html
    new HtmlWebpackPlugin({
      title: 'Webpack Plugin Sample',
      meta: {
        viewport: 'width=device-width'
      },
      template: './src/index.html' //模板文件地址
    }),
    // 用於生成 about.html
    new HtmlWebpackPlugin({
      filename: 'about.html'
    })
  ]

2二、開發一個插件

插件比起loader有着更寬泛的能力

本質是鉤子機制，webpack打包全流程中會提供鉤子

class MyPlugin {
  apply (compiler) {
    console.log('MyPlugin 啓動')


    compiler.hooks.emit.tap('MyPlugin', compilation => {
      // compilation => 能夠理解爲這次打包的上下文
      for (const name in compilation.assets) {
        // console.log(name) 每一個文件的名稱
        // console.log(compilation.assets[name].source())
        if (name.endsWith('.js')) {
          const contents = compilation.assets[name].source()
          const withoutComments = contents.replace(/\/\*\*+\*\//g, '')
          compilation.assets[name] = { //
            source: () => withoutComments, //覆蓋對應內容
            size: () => withoutComments.length
          }
        }
      }
    })
  }
}

2三、dev server

devServer: {

contentBase: './public’, 額外資源路徑

    proxy: {
      '/api': {//api開頭的地址端口以前的部分都會被代理
        // http://localhost:8080/api/users -> https://api.github.com/api/users
        target: 'https://api.github.com',
        // http://localhost:8080/api/users -> https://api.github.com/users
        
        pathRewrite: {
          '^/api': '' //正則表達式替換掉api字符
        },
        // 不能使用 localhost:8080 做爲請求 GitHub 的主機名
        changeOrigin: true
      }
    }

}
},

2四、source map

調試和報錯的基礎，源代碼的地圖

//# sourceMappingURL=jquery-3.4.1.min.map

這個註釋能夠在瀏覽器當中映射出源代碼

2五、webpack配置

devtool: 'source-map',//這個設置能夠實現source map

2六、webpack eval模式的source map

devtool: 'eval',

經過eval函數執行，而且在結尾附上那段註釋

構建速度是最快的

可是很難定位行列信息，只能定位到文件

2七、不一樣devtool模式對比

module.exports = allModes.map(item => {
    return {
        devtool: item,
        mode: 'none',
        entry: './src/main.js',
        output: {
            filename: `js/${item}.js`
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                filename: `${item}.html`
            })
        ]
    }
})

'eval',
'cheap-eval-source-map', //閹割版的source map，定位時定位在了源代碼
'cheap-module-eval-source-map',
'eval-source-map',
'cheap-source-map',
'cheap-module-source-map',//閹割版的source map，定位時定位在了
'inline-cheap-source-map',
'inline-cheap-module-source-map',
'source-map',
'inline-source-map',
'hidden-source-map',
'nosources-source-map'

eval-是否使用eval執行模塊代碼
cheap-是否包含行信息
module-是否可以獲得loader處理以前的源代碼

inline-把sourcemap嵌入到代碼當中
hidden - 沒有source map的效果
nosources-能看到錯誤信息，可是瀏覽器上面看不到

如何選擇呢？

選擇合適的source map

開發模式中：cheap-module-eval-source-map

緣由：

代碼每行不超過80個字符
通過loader轉換後變化較大
首次打包速度慢無所謂，從新打包較快

生產模式中：none

source map會暴露源代碼

2八、自動刷新

自動刷新會致使頁面狀態丟失

頁面不刷新

2九、HMR（模塊熱更新）

在運行過程的即時替換，應用運行狀態不受影響

plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
  devServer: {
    hot: true
    // hotOnly: true // 只使用 HMR，不會 fallback 到 live reloading
  },



// ============ 如下用於處理 HMR，與業務代碼無關 ============
// main.js

if (module.hot) {先判斷是否存在這個模塊
  let lastEditor = editor
  module.hot.accept('./editor', () => {
    // console.log('editor 模塊更新了，須要這裏手動處理熱替換邏輯')
    // console.log(createEditor)


    const value = lastEditor.innerHTML
    document.body.removeChild(lastEditor)
    const newEditor = createEditor()
    newEditor.innerHTML = value
    document.body.appendChild(newEditor)
    lastEditor = newEditor
  })


  module.hot.accept('./better.png', () => {
    img.src = background
    console.log(background)
  })
}

HMR的特殊邏輯會在編譯以後被清掉

30、生產環境優化

mode的用法

不一樣環境下的配置

①、配置文件根據環境不一樣導出不一樣配置

module.exports = (env, argv) => {
  const config = {
    mode: 'development',
    entry: './src/main.js',
    output: {
      filename: 'js/bundle.js'
    },
    devtool: 'cheap-eval-module-source-map',
    devServer: {
      hot: true,
      contentBase: 'public'
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.(png|jpe?g|gif)$/,
          use: {
            loader: 'file-loader',
            options: {
              outputPath: 'img',
              name: '[name].[ext]'
            }
          }
        }
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: 'Webpack Tutorial',
        template: './src/index.html'
      }),
      new webpack.HotModuleReplacementPlugin()
    ]
  }


  if (env === 'production') {
    config.mode = 'production'
    config.devtool = false
    config.plugins = [
      ...config.plugins,
      new CleanWebpackPlugin(),
      new CopyWebpackPlugin(['public'])
    ]
  }


  return config
}

②、一個環境對應一個配置文件

const webpack = require('webpack')
const merge = require('webpack-merge') //能夠知足合併配置的功能，不會替換掉公有裏面的同名屬性
const common = require('./webpack.common')


module.exports = merge(common, {
  mode: 'development',
  devtool: 'cheap-eval-module-source-map',
  devServer: {
    hot: true,
    contentBase: 'public'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
})

3一、DefinePlugin

爲代碼注入

plugins: [

new webpack.DefinePlugin({

// 值要求的是一個代碼片斷
API_BASE_URL: JSON.stringify('https://api.example.com')

})
]

3二、treeShaking

optimization: {

// 模塊只導出被使用的成員，標記枯樹枝
usedExports: true,

// 儘量合併每個模塊到一個函數中，做用域提高
concatenateModules: true,

// 壓縮輸出結果，把樹枝要下來
// minimize: true
}

生產環境中會自動開啓

3三、Tree-shaking & Babel

必須使用ES Modules

babel-loader

module: {

rules: [

{
test: /\.js$/,

use: {

loader: 'babel-loader',

options: {

    presets: [

      // 若是 Babel 加載模塊時已經轉換了 ESM，則會致使 Tree Shaking 失效
      // ['@babel/preset-env', { modules: 'commonjs' }]
      // ['@babel/preset-env', { modules: false }]
      // 也可使用默認配置，也就是 auto，這樣 babel-loader 會自動關閉 ESM 轉換
      // 設置爲commonjs會強制轉換
          ['@babel/preset-env', { modules: 'auto' }]

       ]
     }
}
}
]
},
optimization: {

// 模塊只導出被使用的成員
usedExports: true,

// 儘量合併每個模塊到一個函數中
// concatenateModules: true,
// 壓縮輸出結果
// minimize: true
}

3四、sideEffects

optimization: {

sideEffects: true,

}

若是一個模塊裏被引用進來可是隻用裏面的一個模塊，那麼其它模塊就不會被引入

import { Button } from './components'
//components當中除了Button以外的模塊都不會被引入

要確保你的代碼沒有反作用

// 反作用模塊
import './extend'

在extend當中爲number原型添加了一個方法，這樣就會致使這個方法是沒有被引入的

解決辦法

"sideEffects": [
"./src/extend.js",
"*.css"
]

在package.json文件中

3五、代碼分割

並非每一個模塊都是在啓動時須要的

因此須要實現按需加載

可是也不能分的太細

同域並行請求

請求頭佔資源

兩種解決方法

①多入口打包

entry: {

index: './src/index.js',

album: './src/album.js'

},注意這裏是對象，數組的話就是多個文件打包到一個文件

output: {

filename: '[name].bundle.js’//編譯結束後會替換[name]

},







plugins: [

new CleanWebpackPlugin(),

new HtmlWebpackPlugin({

title: 'Multi Entry',

template: './src/index.html',

filename: 'index.html',

chunks: ['index']

}),
new HtmlWebpackPlugin({

title: 'Multi Entry',

template: './src/album.html',

filename: 'album.html',

chunks: ['album’] //指定加載那個打包文件

})
]

提取公共模塊


  optimization: {
    splitChunks: {
      // 自動提取全部公共模塊到單獨 bundle
      chunks: 'all'
    }
  },

②動態導入

按需加載

const render = () => {
  const hash = window.location.hash || '#posts'


  const mainElement = document.querySelector('.main')


  mainElement.innerHTML = ''


  if (hash === '#posts') {
    // mainElement.appendChild(posts())
    import(/* webpackChunkName: 'components' */'./posts/posts').then(({ default: posts }) => {
      mainElement.appendChild(posts())
    })
  } else if (hash === '#album') {
    // mainElement.appendChild(album())
    import(/* webpackChunkName: 'components' */'./album/album').then(({ default: album }) => {
      mainElement.appendChild(album())
    })
  }
}


render()


window.addEventListener('hashchange', render)

3六、minicss

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 'style-loader', // 將樣式經過 style 標籤注入
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },

3七、OptimizeCssAssetsWebpackPlugin

optimization: {
    //配置在這裏能夠保證只有壓縮功能開啓時纔會執行下面插件
    //因此須要本身手動保證一下js的壓縮
    minimizer: [
      new TerserWebpackPlugin(),
      new OptimizeCssAssetsWebpackPlugin() 壓縮樣式文件
    ]
  },

3八、輸出文件名hash

output: {
    filename: '[name]-[contenthash:8].bundle.js'
  },

經過hash值控制緩存