技術標籤：前端知識vuejsnodejsjavascriptcss

一、模組化的使用

1. 概念

前端中js檔案與js檔案的相互呼叫稱為模組化

2. ES5實現模組化

(1) 建立01.js檔案(被呼叫)

//1. 建立js方法
const sum = function(a,b){
    return parseInt(a) + parseInt(b)
}
const subtract = function(a,b){
    return parseInt(a) - parseInt(b)
}

//2. 設定哪些方法可以被其他js呼叫
module.exports = {
    sum,
 

    subtract
}

(2) 建立02.js檔案(呼叫者)

//1. 引入01.js檔案
const m = require('./01.js')

//2. 呼叫
console.log(m.sum(1,2))
console.log(m.subtract(10,3))

(3) 執行結果

3. ES6實現模組化方式一

注：ES6的模組化在node.js環境無法執行，需要使用bable先轉換成ES5程式碼

(1) 建立01.js檔案

//定義方法，使用export關鍵字設定方法可以被其他js呼叫
export function getList() {
    console.log('getList............'
 
)
}

(2) 建立02.js檔案

//引入01.js檔案，進行呼叫對應方法
import {getList} from './01.js'

//呼叫方法
getList()

(3) 需要將上述兩個檔案先轉換成ES5格式再執行

4. ES6實現模組化方式二

(1) 建立01.js檔案

//定義哪些方法可以被其他js呼叫
export default {
    getList() {
        console.log('getList.....')
    } //多個使用逗號隔開
}

(2) 建立02.js檔案

//引入01.js檔案，建立物件進行呼叫
import m from './01.js'

//呼叫方法
 

m.getList()

(3) 需要將上述兩個檔案先轉換成ES5格式再執行

二、Webpack的使用

1. 概念

Webpack是一個前端資源的下載、打包工具，可以將多個js、css等靜態資源打包成為一個靜態 資原始檔，減少了頁面的請求數量

2. 使用

(1) 使用指令npm install -g webpack webpack-cli安裝Webpack工具

(2) 使用指令npm install --save-dev style-loader css-loader使得可以打包css檔案

(3) 建立需要的資源，在main.js檔案引入common.js、utils.js、style.css檔案

(4) 建立webpack.config.js檔案，內容如下

const path = require("path"); //Node.js內建模組
module.exports = {
    entry: './src/main.js', //配置入口檔案
    output: {
        //輸出路徑，__dirname：當前檔案所在路徑
        path: path.resolve(__dirname, './dist'), 
        filename: 'bundle.js' //打包後的檔案
    },
    //打包css檔案
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包規則應用到以css結尾的檔案上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

(5) 建立dist資料夾，存放打包後的檔案

(6) 執行指令webpack --mode=development 或 webpack完成打包