預設匯出
語法： export default （每個模組中只允許使用唯一的一次
export default
）預設匯入
語法： import ... from ...
按需匯出： export let s1 = 10
按需匯入： import from 『模組識別符號』
匯入語法：import 'aa.js'
① 新建空白目錄，並執行 npm init -y 命令，初始化包管理配置工具 package.json
② 新建 src 源**目錄
③ 新建 src -> index.html首頁
④ 初始化首頁基本結構
① 執行 npm install webpack webpack-cli -d 命令，安裝 webpack 相關的包
② 在專案根目錄中，建立名為 webpack.config.js 的 webpack 配置檔案
③ 在 webpack 的配置檔案中，初始化如下基本配置:
module.exports =
④ 在 package.json 配置檔案中的 scripts 節點下，新增 dev 指令碼如下:
"scripts": ,
⑤ 在終端執行 npm run build 命令，啟動 webpack 進行專案打包。
① webpack 的
4.x版本中預設約定
:打包的入口檔案
為 src -> index.js
打包的輸出檔案
為 dist -> main.js
② 如果要修改打包的入口與出口，可在 webpack.config.js 中新增如下配置資訊
:
const path = require('path') //
匯入node.js 中專門操作路徑的模組
module.exports =,
① 執行npm install webpack-dev-server -d 命令，安裝支援專案自動打包的工具
② 修改package.json -> scripts 中的
dev
命令如下
:
"scripts":
③ 將src -> index.html 中，
script
指令碼的引用路徑，修改為 「/buldle.js」
④ 執行 npm run dev 命令，重新進行打包
⑤ 在瀏覽器中訪問
位址，檢視自動打包效果
注意:webpack-dev-server 會啟動乙個實時打包的
伺服器webpack-dev-server 打包生成的輸出檔案，預設放到了專案根目錄中，而且是虛擬的
① 執行 npm install html-webpack-plugin -d 命令，安裝生成預覽頁面的外掛程式
② 修改 webpack.config.js 檔案頭部區域，新增如下配置資訊
const htmlwebpackplugin = require('html-webpack-plugin')
const htmlplugin = new htmlwebpackplugin()
③ 修改 webpack.config.js 檔案中向外暴露的配置物件，新增如下配置點
:
module.exports =
// package.json中的配置
// --open 打包完成後自動開啟瀏覽器頁面
// --host 配置 ip 位址
// --port 配置埠
"scripts":
在實際開發過程中，webpack 預設只能打包處理 .js字尾名結尾的模組
，其他非 .js字尾名結尾的模組，
需要呼叫 loader 載入器才可以正常打包，否則會報錯！
loader 載入器可以輔助
webpack
打包處理特定的檔案模組，比如
:1) less-loader可以打包處理
.less
相關檔案
2) sass-loader可以打包處理
.scss
相關檔案
3) url-loader 可以處理
css中與
url路徑相關的檔案
① 執行 npm i style-loader css-loader -d命令，安裝處理css檔案的
loader
② 在webpack.config.js的
module -> rules
陣列中，新增
loader
規則如下
:
module: ,//test 表示匹配的檔案型別， use 表示對應要呼叫的 loader
]
}
注意： uses 陣列中指定的
loader
順序是固定的，多個
loader
的呼叫順序是從後往前呼叫
① 執行npm i postcss-loader autoprefixer -d命令
② 在專案根目錄中建立postcss的配置檔案
postcss.config.js,
並初始化如下配置
:
const autoprefuxer = require('autoprefixer') //
匯入自動新增字首的外掛程式
module.exports =
③ 在webpack.config.js的
module -> rules
陣列中,
修改css
的loader
規則如下
:
module: ,]
}
① 執行npm i url-loader file-loader -d命令
② 在webpack.config.js的
module -> rules
陣列中，新增
loader
規則如下
:
module: ,//其中 ? 之後的是 loader 的引數項
//limit 用來指定的大小，單位是位元組(byte),只有小於limit大小的，才會被轉為 base64 的
]
}
① 安裝babel轉換器相關的包：npm i babel-loader @babel/core @babel/runtime -d
② 安裝babel語法外掛程式相關的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -d
③ 在專案根目錄中，建立babel配置檔案
babel.config.js
並初始化基本配置如下：
module.exports =
④ 在webpack.config.js的
module -> rules
陣列中，新增
loader
規則如下：
module:]
}
① template 元件的模組化區域
② script 業務邏輯區域
③ style 樣式區域
① 執行npm i vue-loader vue-template-compiler -d命令
② 在webpack.config.js配置檔案中，新增
vue-loader
的配置如下：
const vueloaderplugin = require('vue-loader/lib/plugin')
module.exports =
]
}}
① 執行 npm i vue -s 安裝
vue② 在src -> index.js入口檔案中，通過
import vue from 『vue』來匯入vue建構函式
③ 建立vue的例項物件，並指定要控制的區域
④ 通過render函式渲染
根元件
//1.匯入 vue 建構函式
import vue from 'vue'
//vue()
上線前需要通過webpack將應用整體打包，看通過
package.json
檔案配置打包命令：
"scripts": ,
前端模組化
前端模組化解決什麼問題？有了模組，我就可以很方便的使用別人的 想要什麼功能，就用載入什麼模組。但是，這樣做需要有乙個前提，那就是大家必須以同樣的方式編寫模組，否則就亂套了。所以組內需要有一套統一的模組規範。如何實現模組？1 物件字面量的變體 2 js設計模式的模組模式 3 採用成熟的庫檔案。前兩種方...
前端模組化
定義 具有相同屬性和行為的事物的集合 在前端中 將一些屬性比較類似和行為比較類似的內容放在同乙個js檔案裡面，把這個js檔案稱為模組 目的 為了每個js檔案只關注與自身有關的事情，讓每個js檔案各行其職 模組化 指的就是遵守commonjs規範，解決不同js模組之間相互呼叫問題 commonjs a...
前端模組化
當多人開發同一專案時，很容易就會產生命名衝突的問題，尤其是js檔案，任何的js引入順序的打亂都可能導致專案執行失敗，為了解決命名衝突的問題，在es6之前，可以使用函式閉包來解決這個問題。即可能像這樣 function 這樣雖然可以解決命名衝突的問題，但也使得 的復用性變得極差，因為其它的檔案將無法再...