Webpack理論與實踐
解決什么樣的問題
隨著前端專案越來越復雜，普遍的一個做法是模塊化專案管理，而早期的前端模塊化有以下這么幾種方式
1. 檔案劃分 - 不同的模塊就放到不同的檔案
module1.js
module2.js
// module1.js
function a() {
console.log("module1");
}
// module2.js
var module2Data = "123";
這種方式的缺點也比較明顯：
1） 變數沒有進行私有化，可以從外部訪問
2）很容易命名沖突
3）如果兩個模塊互相依賴，很難看出依賴關系，無法管理模塊間的依賴關系
2 命名空間
// module1.js
window.module1 = {
a: function() {
console.log("module1");
}
}
// module2.js
window.module2 = {
module2Data: "123"
}
這種方式就可以解決1中的 命名沖突問題，但其他問題還是存在的
3 立即執行函式
// module1.js
(function() {
var moduleName = "module1";
function a() {
console.log("module1");
}
window.module1 = {
a: a
}
})();
這種方式繼續解決了2沒有解決的問題，使得變數私有化，不會在模塊外部被訪問，但仍然還是無法管理模塊間的依賴關系
4 帶引數的立即執行函式
(function($) {
var moduleName = "module1";
function a() {
console.log("module1");
}
window.module1 = {
a: a
}
})(jQuery);
這種方式繼續完善了之前的模塊化方式，可以管理模塊間的依賴關系了，
即使上面解決了最初的問題，但是后期維護還是需要很大的成本的，比如上面模塊依賴了jQuery，那么就要先去引入，如果后面又不需要jQuery了，那么還需要手動去掉jQuery庫，同時不同開發人員也可能會有不同的實作方式，所以需要有一個模塊化規范來規定如何實作模塊化，
COMMONJS: Node內置的模塊化規范，不能在瀏覽器運行
AMD define/require[RequireJS為代表]
CMD define/seajs.use[SeaJS為代表]
ESModule ES6中定義的一種模塊化規范，有望成為瀏覽器和服務端共同的模塊化規范，
ESModule已逐漸成為主流的模塊化規范，但因為存在瀏覽器兼容問題；并且可能整個專案里面不僅僅只是把js檔案當作一個模塊，可能還會存在一些其他型別的資源，Webpack、Gulp、RollUp這一類打包工具就應運而生，今天主要來跟大家分享Webpack的一些使用和原理，
這里使用Webpack官網的一句話：
本質上，webpack 是一個用于現代 JavaScript 應用程式的 靜態模塊打包工具，
使用
依賴環境
Node
Webpack
Webpack-cli
如果使用vue腳手架搭建專案的話，已經將這些安裝好了，并且vue-cli3里面，vue.config.js里面可以另外自定義webpack的相關配置，
常用配置
- entry
entry: './src/index.js'
表示從當前目錄的src/index.js開始進行打包，可以是css等其他檔案，一般做專案因為依賴關系，所以會把js檔案作為打包入口，
- output
表示 打包結果放置的名稱于位置，名稱也可以由一些變數進行定義
id ----- chunk的唯一標識，從0開始
name ----- chunk的名稱
hash ----- chunk的唯一標識的Hash值
chunkhash ----- chunk內容的Hash值
- devServer
有很多情況下，開發環境可能與生產有一些不同的需要，所以webpack有一個devServer配置，專門可以用來配置開發環境
- modules
modules主要是用來配置loader的，因為除了js檔案，我們專案里還會有別的型別的檔案，css，file，img，sass等等，所以需要不同的檔案使用不同的loader來加載
常用的loader主要用
css-loader
sass-loader
style-loader
file-loader
url-loader
babel-loader
postcss-loader
eslint-loader
vue-loader......
4.1 手寫loader
配置
rules: [{
test: /\.md$/,
use: ['./markdown-loader']
}]
./markdown-loader.js
const markdown = require("marked");
module.exports = source => {
const html = markdown(source);
const code = `module.exports=${JSON.stringify(html)}`
return code;
}
./index.js
import plan from './plan.md'
console.log(plan);
- plugin
常用的plugin有：
clean-webpack-plugin --清除上一次打包的檔案，重新生成dist檔案夾
html-webpack-plugin – 打包js檔案自動注入html檔案
使用時，引入插件，實體化插件即可，
先寫到這里啦，后續再來分享webpack的一些優化手段和插件以及其作業流程啦～～
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/279822.html
標籤：其他
下一篇：call,apply和bind