技術標籤：前端node.js

什麼是Webpack

Webpack 是一個前端資源載入/打包工具。它將根據模組的依賴關係進行靜態分析，然後將這些模組按
照指定的規則生成對應的靜態資源。
Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態檔案，減少了頁面的
請求。

使用前提

安裝node.js

開始使用

1. 建立webpackdemo資料夾，全域性安裝：

npm install -g webpack webpack-cli

2.安裝後檢視版本

webpack -v

3.在工程下建立src 資料夾，在src下建立common.js，程式碼如下：

exports.info=function(str){
    document.write(str);
}
 

4：在src下建立檔案utils.js

exports.add=function(a,b){
    return a+b;
}

5: 可以將以上倆個js檔案看成方法類，建立main.js 檔案，引入倆個js檔案，並進行呼叫

const common = require('./common.js')
const utils = require('./utils.js')

common.info('hello common'+utils.add(1,3));

在webpackdemo目錄下建立配置檔案 webpack.config.js，並在webpackdemo目錄下建立資料夾dist，打包後的檔案將會放在該目錄下。

const path = require("path");//Node.js內建模組
module.exports={
    entry: './src/main.js',//配置入口檔案
    output: {
        path: path.resolve(__dirname, './dist'),//輸出路徑，__dirname：當前檔案所在路徑
        filename: 'bundle.js' //輸出檔案
    }
} 

執行命令：

webpack  		或者
webpack --mode=development

enter執行 出現打包檔案：

打包成功