前端工程化工具webpack

gulp（2016 2018-4.0）

broserify（webpack的前身 只能解決js檔案）

webpack（主流 3.0之後能解決除了js檔案之外的檔案 目前4.30.0）

前端的環境（有預設埠，每個環境的埠都不同）

webpack概念

webpack配置檔案：

entry: './src/index.js', //單檔案

//出口檔案

// output:path是出口目錄的磁碟路徑，filename指的是出口目錄中檔案的檔名
output: ,

版本迭代的時候，不進行檔案的覆蓋（防止新版本出bug時無法追回之前版本）

//裝換器 loader

module: ]
},

module.exports(,

//出口配置
output:
})

js檔案module.exports 後在別的檔案中 引入 require（「xx」）後就能使用了，無需其他操作

執行時額外加**

devserver:

「script」:

終端執行命令

npm run dev

html-webpack-plugin

安裝：cnpm i html-webpack-plugin -d

使用：在webpack.config.js配置檔案中引入

const htmlwebpackplugin = require('html-webpack-plugin')

plugins:[
new htmlwebpackplugin()
]  //這樣的話index.html中的檔案引入就不用寫了，**打包後的所有檔案都會引入到index.html中**

resolve:

前端工程化（三）之webpack構建

構建，或者叫做編譯，在前端工程體系中的角色是將源 轉化為宿主瀏覽器可執行的 其核心是資源的管理。前端的產出資源包括js，css，html，分別對應的源 是 1.領先於瀏覽器實現的ecmascript規範編寫的js 2.less sass預編譯語法編寫的css 3.jade eje mustache等...

前端模組化，元件化，工程化

1.前端模組化 2.前端元件化 指對具體的某個功能的封裝，比如所有的分頁可以封裝為分頁元件來統一使用，以此來達到元件復用，提高開發效率。3.前段工程化 概念 指使用軟體工程的技術和方法來進行前端專案的開發 維護和管理。前端工程化包含如下 1.規範 保證團隊所有成員以同樣的規範開發 2.分支管理 不同...

webpack 與 前端工程化的使用步驟

一 webpack 的基本使用 webpack預設只能打包處理以 js 結尾的模組，其他的檔案是打包不了的，想要全部到，需要呼叫 loader 載入器才能進行打包，否則就會報錯！匯入 node.js 中專門操作路徑的模組 const path require path module.exports ...