webpack 及 模組化總結

通過 npm / yarn 的方式來安裝 webpack 

安裝方式： 

本地安裝 

優勢：管理方便、易於復用

解決：專案開發過程中的衝突、依賴

基於amd的requirejs模組化庫

2.cmd（common module definition），cmd則是依賴就近。 

2：每乙個模組內宣告的變數都是區域性變數，不會汙染全域性作用域；

3：模組內部的變數或者函式可以通過export匯出；

4：乙個模組可以匯入別的模組

語法 2. 用*號的匯入方式，對應的匯出方式可以是任意的。它得到的是乙個object物件 

- 1.js:import * as m1 from './2';，「./2」實際是「./2.js」，可不寫字尾。 

- 2.js:export var a=120;

3. 舉例： 

- 1.js:

/ 匯出一組資料

var a = 100;
var b = 200;
var c = function() {};
export 
- 2.js: ``` import  from './2';```
也就是說如果要用{}的形式匯入，那麼接收的時候就需要注意：匯出的名字和接收的名字是對應的，類似解構賦值。

2.輸出(output)：指定打包後的檔案生成配置

2.生成後的檔名：

3.loader

(4)常用的loader

(3)url-loader：像 file loader 一樣工作，但如果檔案小於限制，可以返回 data url

}]}

(5)style-loader:將模組的匯出作為樣式新增到dom中;

和loader類似，但是他是打包後執行，對打包後的檔案做進一步的處理。

2.配置：webpack.config.js

const path = require('path');

const webpack = require('webpack');
const extracttextplugin = require("extract-text-webpack-plugin");
module.exports = ,
output: ,
module: )}]
},// 外掛程式配置
plugins: [
new webpack.optimize.uglifyjsplugin(),
new extracttextplugin("styles.css")]};

方法二： 

在當前目錄下，執行「.\node_modules.bin\webpack -w」命令。

這個功能主要是用於開發過程中，對生產環境沒有什麼幫助。

過程： 

,

"keywords": ,
"author": "",
"license": "isc",
"devdependencies": 
}

const path = require('path');

const htmlwebpackplugin = require('html-webpack-plugin');
module.exports = ,
entry: ,
output: ,
plugins: [
new htmlwebpackplugin(),
],};

**：

webpack之css模組化

前言 本文演示了 開啟css loader的模組化配置 當前專案目錄和package.json配置 如何使css模組化？需要在我們的webpack.config.js中對css loader進行一些額外設定。編輯main.css 執行 npm run dev 瀏覽器截圖如下 可以看出瀏覽器控制台列印...

webpack初探與模組化

沒有webpack的缺點 量大時，可讀性不好 函式間依賴嚴重，維護性不好 協作開發，容易變數命名衝突我們引入js標籤的問題 如果乙個script不好維護 當script標籤很多會有效能問題 同步載入會阻塞，非同步載入瀏覽器網路請求只能載入6個js檔案 2.作用域問題 可能會導致全域性變數汙染 add...

C模組化程式設計總結

一直以為自己對模組化程式設計徹底明白了，但是偶爾看到有些條件編譯感覺莫名其妙，今天一起做個總結。1 單個功能模組建立原始檔.c,和標頭檔案.h，注意.c字尾對於c語言必須小寫，有些編譯器 如gcc 會認為大寫c字尾是c 檔案。2 對於功能模組內部使用的全域性變數 函式不要放到標頭檔案中，應該用sta...