關(guān)于模塊化的好處什么缺脉、其他的如：AMD悦穿、CMD攻礼、CommonJS等模塊化的介紹、規(guī)范這里就不多說了栗柒，直接就說現(xiàn)在流行的ES6模塊化及webpack打包的基本使用礁扮。
ES6模塊化規(guī)范：
1、每個js文件都是一個獨立的模塊瞬沦；
2太伊、導入模塊成員使用import關(guān)鍵字；
3偿乖、暴露模塊成員使用export關(guān)鍵字芽淡；
ES模塊化的基本語法：
默認導入和默認導出：
a宇弛、默認導出語法：export default 默認導出的成員
b、默認導入語法：import 接收名稱 from '模塊標識符'
//定義私有成員a和c
let a = 10;
let c = 20;
//外界訪問不到變量d 因為它沒有暴露出來
let d = 30;
function show() {
}
//將本模塊中的私有成員暴露出去芳悲，供其他模塊使用
//注意：在每個模塊中，只允許使用唯一的一次export default边坤，否則會報錯
export default {
a,
c,
show,
}
在js文件中默認導出：
//導入模塊成員
import m1 from './js/m1.js'
console.log(m1);
注意：每個模塊中芭概，只允許使用唯一的一次export default，否則會報錯惩嘉。
按需導入和按需導出
a罢洲、按需導出語法：export let s1=10;
b、按需導入語法：import {s1} from '模塊標識符'；
//每個模塊中惹苗，可以使用多次按需導出
//向外按需導出變量
export let s1='aaaa';
export let s2='bbbbb';
//向外導出方法
export function say() {
}
在js文件中按需導入：
//如果想修改導入是的名稱可以使用as
import {s1,s2 as ss2,say} from './js/m2.js'
console.log(s1);
//通過as修改了導入的名稱 s2就不能使用 需要使用ss2
console.log(ss2);
如果在同一個js文件中有默認和按需導出殿较，使用時也存在默認和按需導入可以使用以下方式：
//m1 是按照默認導入的 {}是按照需要導入的
import m1,{} from './src/js/m1.js'
直接導入并執(zhí)行模塊代碼
如果只想單純執(zhí)行某個模塊中的代碼，并不需要得到模塊中向外暴露的成員桩蓉，可以使用直接導入并執(zhí)行模塊代碼淋纲。
直接導入并執(zhí)行模塊代碼語法：import '模塊標識符'
for (let i = 0; i < 10; i++) {
console.log(i);
}
在js文件中直接導入并執(zhí)行模塊代碼：
import './js/m3.js'
下面是一個通過jQuery實現(xiàn)的隔行變色的簡單案例：
a、新建項目空白目錄院究，并運行npm init -y命令洽瞬，初始化包管理配置文件package.json
b、新建src源代碼目錄
c业汰、新建scr->index.html首頁
d伙窃、初始化首頁基本的結(jié)構(gòu)
f、運行npm install jquery -S 命令样漆，安裝jQuery
g为障、通過模塊化的形式，實現(xiàn)列表隔行變色效果
index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>這是第1個li</li>
<li>這是第2個li</li>
<li>這是第3個li</li>
<li>這是第4個li</li>
<li>這是第5個li</li>
<li>這是第6個li</li>
<li>這是第7個li</li>
<li>這是第8個li</li>
<li>這是第9個li</li>
</ul>
</body>
</html>
index.js文件：
import $ from 'jquery'
$(function () {
$("li:odd").css('backgroundColor','red');
$("li:even").css('backgroundColor','blue');
})
在瀏覽器中打開index.html文件放祟，發(fā)現(xiàn)并沒得到想要的效果鳍怨，在瀏覽器控制臺看到了錯誤信息，這是因為使用了ES6模塊化跪妥，瀏覽器不兼容導致的鞋喇，這時就需要通過webpack對代碼進行重新打包了。
webpack是一個流行的前端項目構(gòu)建工具(打包工具)眉撵，可以很好的解決上面遇到的問題确徙，它提供了友好的模塊化支持，以及代碼壓縮混淆执桌、處理js兼容問題鄙皇、性能優(yōu)化等強大功能，從而讓程序員把工作的重心放到具體的功能實現(xiàn)上仰挣，提高了開發(fā)效率和項目的可維護性伴逸。
webpack官網(wǎng)地址
在項目中安裝和配置webpack
a、運行npm install webpack webpack-cli -D命令膘壶，安裝webpack相關(guān)的包错蝴；
b、在項目根目錄中颓芭，創(chuàng)建名為webpack.config.js的webpack配置文件顷锰；
c、在webpack的配置文件webpack.config.js中亡问，初始化如下基本配置：
module.exports={
//mode指定構(gòu)建模式
//development 開發(fā)模式 不會對代碼進行壓縮 混淆等官紫，編譯速度快
//production生成 對代碼進行壓縮 混淆等肛宋，編譯速度慢
mode:'development'
}
d、在package.json配置文件中的scripts節(jié)點下束世，新增dev腳本如下:
"scripts":{
//初始化時就存在的
"test": "echo \"Error: no test specified\" && exit 1",
//新增webpack打包運行配置 通過npm run 執(zhí)行
"dev":"webpack"
}
e酝陈、在終端運行npm run dev命令，啟動webpack進行項目打包
d毁涉、將index.htmljs文件的引入進行修改沉帮，修改為webpack打包輸出的js文件路徑
<script src="../dist/bundle.js"></script>
注意：
1、webpack打包默認入口是src/index.js文件贫堰，路徑和文件不對穆壕，打包時會報找不到src/index.js相關(guān)的錯誤；
2其屏、webpack打包默認輸出為dist/main.js喇勋；
配置打包的入口和出口
webpack的4.x版本中默認約定：
a、打包的入口文件為src->index.js
b漫玄、打包的輸出文件為dist->main.js
如果要修改打包的入口和出口，可在webpack.config.js中新增如下配置：
const path=require('path');//導入node.js中專門操作路徑的模塊
module.exports={
entry:path.join(__dirname,'./src/js/index.js'),//配置打包入口文件的路徑
output:{
path:path.join(__dirname,'./dist'),//配置輸出文件的存放路徑
filename:'bundle.js'//輸出文件的名稱
}
}
配置webpack自動打包
通過上面的步驟压彭，已經(jīng)實現(xiàn)了webpack打包了睦优，但是每次代碼改動，都需要運行npm run dev命令進行打包壮不，影響開發(fā)效率汗盘，通過下面可以配置webpack的自動打包，代碼變動后就不用每次都運行npm run dev命令了询一。
a隐孽、運行npm install webpack-dev-server -D命令，安裝支持項目自動打包的工具
b健蕊、修改package.json->scripts中的dev命令菱阵，如下：
"scripts":{
"dev":"webpack serve"
}
c、將src->index.html中缩功，script腳本的引用路徑晴及，修改為'/buldle.js'
<script src="/bundle.js"></script>
d、運行npm run dev命令嫡锌，重新進行打包
e虑稼、在瀏覽器中訪問http://localhost:8080地址，查看自動打包效果
注意：
1势木、webpack-dev-server會啟動一個實時打包的http服務器蛛倦；
2、webpack-dev-server打包生成的輸出文件啦桌，默認放到了項目根目錄中溯壶，是放在內(nèi)存中，是虛擬的，看不見的茸塞；
3躲庄、webpack4.x版本配置的是"dev":"webpack serve"，之前的配置是:"dev":"webpack-dev-server"钾虐；
這樣就實現(xiàn)了webpack自動打包了噪窘，代碼變動保存后，瀏覽器會時時更新效扫，不過會發(fā)現(xiàn)使用瀏覽器打開http://localhost:8080地址時倔监，還需要進入到src文件中的入口文件index.html才可打開看到效果，通過下面配置菌仁，可以在訪問http://localhost:8080后浩习，直接打開index.html入口文件。
配置html-webpack-plugin生成預覽頁面
a济丘、運行npm install html-webpack-plugin -D命令谱秽，安裝生成預覽頁面的插件；
b摹迷、修改webpack.config.js文件頭部區(qū)域疟赊，添加如下配置信息：
//導入生成預覽頁面的插件 得到一個構(gòu)造函數(shù)
const HtmlWebpackPlugin=require('html-webpack-plugin');
//創(chuàng)建插件的實例對象
const htmlPlugin=new HtmlWebpackPlugin({
template:'./src/index.html',//指定要用到的模塊文件
filename:'index.html'//指定生成的文件名稱，該文件存在于內(nèi)存中峡碉，在項目的根目錄
});
c近哟、修改webpack.config.js文件中向外暴露的配置對象，新增如下配置節(jié)點
module.exports={
//plugins數(shù)組是webpack打包期間會用到的一些插件列表
plugins:[htmlPlugin]
}
通過上面配置就可以在訪問http://localhost:8080時鲫寄，直接訪問index.html入口文件吉执，看到效果了，但是如果想在執(zhí)行完npm run dev命令后自動打開瀏覽器展示效果地来，可以按照下面的配置進行配置戳玫。
配置自動打包相關(guān)參數(shù)
package.json中的配置
--open 打包完成后自動打開瀏覽器頁面
--host配置id地址
--port配置端口
修改package.json文件中的srcipts中的dev配置：
"scripts":{
"dev":"webpack serve --open --host 127.0.0.1 --port 8888"
}
webpack中的加載器
在實際開發(fā)過程中，webpack默認只能打包處理.js后綴結(jié)尾的模塊未斑，其他非.js后綴結(jié)尾的模塊量九，webpack默認處理不了，需要調(diào)用loader加載器才可以正常打包颂碧，否則會報錯荠列。
loader加載器可以協(xié)助webpack打包處理特定文件模塊，比如：
less-loader可以打包處理.less相關(guān)的文件载城；
sass-loader可以打包處理.scss相關(guān)的文件肌似；
url-loader可以打包處理css中與url路徑相關(guān)的文件;
打包處理css文件
a、運行npm install style-loader css-loader -D命令诉瓦，安裝處理css文件的loader
b川队、在webpack.config.js的module->rules數(shù)組中力细，添加loader規(guī)則如下：
//所有第三方文件規(guī)模的匹配規(guī)則
module:{
rules:[
//其中test表示匹配的文件類型(正則表達式)
//use 表示對應要調(diào)用的loader
{test:/\.css$/,use:['style-loader','css-loader']}
]
}
注意：
1、use數(shù)組中所指定的loader順序是固定的固额，順序錯亂會導致報錯眠蚂；
2、多個loader的調(diào)用順序是：從后往前調(diào)用
打包流程是：
先將css的文件交給css-loader進行處理斗躏，處理完后逝慧，再交給style-loader進行處理，處理好后啄糙，如果前面沒有對應的loader了笛臣，這時就會交給webpack進行打包css文件。
打包處理less文件
a隧饼、運行npm install less-loader less -D命令
b沈堡、在webpack.config.js的module->rules數(shù)組中，添加loader規(guī)則如下：
module:{
rules:[
{test:/\.less$/,user:['style-loader','css-loader','less-loader']}
]
}
注意：
安裝less-loader必須要安裝less燕雁，less-loader依賴于css-loader和style-loader
打包處理scss文件
a诞丽、運行npm install sass-loader node-sass -D命令
b、在webpack.config.js的module->rules數(shù)組中拐格，添加loader規(guī)則如下：
module:{
rules:[
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
]
}
c僧免、在webpack.config.js的module-rules數(shù)組中，修改css的loader規(guī)則如下：
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
]
}
配置postCSS自動添加css的兼容前綴
a禁荒、運行npm install postcss-loader autoprefixer -D命令
b猬膨、在項目根目錄中創(chuàng)建postcss的配置文件postcss.config.js角撞，并初始化如下配置：
const autoprefixer=require('autoprefixer')//導入自動添加前綴的插件
module.exports={
plugins:[autoprefixer]//掛載插件
}
c呛伴、在webpack.config.js的module->rules數(shù)組中，修改css的loader規(guī)則如下：
module:{
rules:[
{test:'/\.css$/',use:['style-loader','css-loader','postcss-loader']}
]
}
打包樣式表中的圖片和字體文件
a谒所、運行npm install url-loader file-loader -D命令热康，file-loader是url-loader的內(nèi)置依賴項
b、在webpack.config.js的module->rules數(shù)組中劣领，添加loader規(guī)則如下：
module:{
rules:[
//前面的是圖片 后面的是字體
{test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=16940'}
]
}
其中?之后的是loader的參數(shù)項姐军，limit用來指定圖片的大小，單位是字節(jié)(byte)尖淘，只有小于limit大小的圖片奕锌，才會被轉(zhuǎn)成base64圖片，將圖片文件轉(zhuǎn)換為base64編碼并載入瀏覽器能夠減少http請求數(shù)村生，提高加載效率惊暴，但是會增大了js或html文件的體積。
打包處理js文件中的高級語法
a趁桃、安裝babel轉(zhuǎn)換器相關(guān)的包：npm install babel-loader @babel/core @babel/runtime -D
b辽话、安裝babel語法插件相關(guān)的包：npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
c肄鸽、在項目根目錄中，創(chuàng)建babel配置文件babel.config.js油啤，并初始化配置如下：
module.exports={
presets:['@babel/preset-env'],
plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}
d典徘、在webpack.config.js的module->rules數(shù)組中，添加loader規(guī)則如下：
module:{
rules:[
//exclude為排除項益咬，表示babel-loader不需要處理node_modules中的js文件
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
]
}
Vue單文件組件
vue單文件的組成結(jié)構(gòu)：
template:組件的模塊區(qū)域
script:業(yè)務邏輯區(qū)域
style:樣式區(qū)域
<template>
<!--這里用于定義vue組件的模板內(nèi)容-->
<div>
<h1>這是App根組件</h1>
</div>
</template>
<script>
// 這里用于定義vue組件的業(yè)務邏輯
export default {
data(){
//返回私有數(shù)據(jù)
return {};
},
methods:{
}
}
</script>
<style scoped>
/*這里用于定義組件的樣式 添加scoped 防止組件之間的樣式?jīng)_突*/
h1{
color: red;
}
</style>
webpack中配置vue組件的加載器
a逮诲、運行npm install vue-loader vue-template-compiler -D命令，vue-template-compiler是vue-loader的內(nèi)置依賴項
b础废、在webpack.config.js配置文件中汛骂，添加vue-loader的配置如下：
const VueLoaderPlugin=require('vue-loader/lib/plugin');
module.exports={
module:{
rules:[
{test:/\.vue$/,ues:'vue-loader'}
]
},
plugins:[
//創(chuàng)建插件實例
new VueLoaderPlugin()
]
}
在webpack項目中使用vue
a、運行npm install vue -S 安裝vue
b评腺、在src-index.js入口文件中帘瞭，通過import Vue from 'vue'來導入vue構(gòu)造函數(shù)
c、創(chuàng)建vue實例對象蒿讥，并指定要空的el區(qū)域
d蝶念、通過render函數(shù)渲染App根組件
//1、導入vue構(gòu)造函數(shù)
import Vue from 'vue'
//2芋绸、導入app根組件
import App from '../components/App.vue'
const vm=new Vue({
//3媒殉、指定vm實例要控制的頁面區(qū)域
el:'#app',
//4、通過render函數(shù)摔敛，把指定的組件渲染到el區(qū)域中
render:h->h(App)
});
