最小知識-webpack加載js/ts的順序

時間 2019-11-16

原文原文鏈接

1. 建立並進入空文件夾，初始化package

npm init
複製代碼

2. 建立項目其餘文件

如下是完整的項目目錄：html

根目錄
- src
  - core
    - a.js
    - b.js
    - c.js
    - d.js
  - index.js
- index.html
- webpack.config.js
- package.json

index.js 項目入口文件java

import * as a from './a'
複製代碼

a.jswebpack

import * as b from './b'
import * as d from './d'

console.log('file: a.js')
複製代碼

b.jsweb

import * as c from './c'

console.log('file: b.js')
複製代碼

c.jstypescript

console.log('file: c.js')
複製代碼

d.jsnpm

console.log('file: d.js')
複製代碼

index.htmljson

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>webapck</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./dist/index.js"></script>
</head>
<body>
</body>
</html>
複製代碼

3. 安裝webpack

修改package.json，以下。執行 npm i 安裝webpackbash

package.jsonapp

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7"
  }
}
複製代碼

4. 配置webpack.config.js

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
    }
}
複製代碼

5. 編譯打包

執行 npm run dev

執行完後，會在根目錄建立一個 dist 的文件夾，裏面含有一個最終打包好的js文件，在html裏直接引用這個js便可。

6. 思考題

core文件夾下每一個js都有個_console，_它們打印的順序是？

7. 打印結果

8. 結論

js引用關係圖

webpack會從 webpack.config.js 配置entry的入口js文件開始讀起，從上到下按順序執行。webpack讀取js會先看有沒有import 。

若是有import，則按import的順序依次讀取導入的js。若是沒有import，則繼續執行當前js代碼。執行完當前js代碼，會回退到上個js繼續執行，直到回退到入口文件index.js 若是已經import過的js，則再也不重複導入

該項目具體執行順序

首先讀取index.js，發現有import a.js
進入a.js ，發現有import ，導入第一個文件 b.js
進入b.js，發現有import，進入 c.js
在c.js裏沒有import，則執行c.js裏面的代碼，此時打印 console.log('file: c.js')
執行完c.js後，回退到上個js，即b.js
執行b.js代碼，此時打印 console.log('file: b.js')
執行完b.js，回退到上個js，即a.js
在a.js，導入第二個文件 d.js
進入d.js，沒有導入的js，則執行當前js代碼，此時打印 console.log('file: d.js')
執行完d.js，回退到a.js，繼續執行a.js代碼，此時打印 console.log('file: a.js')
執行完a.js，回退到index.js，結束！

9. 代碼

webpack.zip

10. 若是是ts，該怎麼配置

安裝 typescript 和 ts-loader

_ 修改 package.json，並執行 npm i 從新安裝

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^6.0.4",
    "typescript": "^3.6.2",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7"
  }
}
複製代碼

修改webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.ts',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
    },
    module:{
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader'
            }
        ]
    },
    resolve: {
        extensions:['.ts','.js']
    }
}
複製代碼

把js文件後綴都改成ts，而後執行 npm run dev 編譯打包

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。