webpack(全局安裝)
//webpack自身只有打包編譯功能+插件可以實(shí)現(xiàn)打包,編譯,測(cè)試等功能.
安裝：
cnpm i -g webpack
編寫需要編譯的文件
//src/1.js代碼
import mod from './mod.js';//引入mod模塊
consloe.log(mod);
//src/mod.js
export default 12;//輸出整體模塊是12;
//export 可以輸出任意東西;export default class{};export default {a :12;b:5,fun(){xxx}}; export 與 import 可以在MDN查看詳細(xì)使用文檔
//若export使用 export let a = 12;export let b = 5;不使用default,即不是輸出模塊,接收的JS就需要使用import {a,b as nb} from './mod.js';來接收屬性;as為取別名
編寫配置文件：
webpack.config.js //若不使用這個(gè)文件名,webpack編譯時(shí)需要使用webpack --config XXX;XXX為任意自定義的文件名
//代碼
module.exports ={
entry:'./src/1.js',//需要編譯的文件路徑,配置文件沿用node規(guī)則,此處路徑要加./,否則會(huì)被當(dāng)做系統(tǒng)模塊去查找
output:{
path:'dest/',//輸出的路徑,此處建議使用path模塊下的絕對(duì)路徑函數(shù)resolve('dest/')
filename: 'bundle.js',//輸出的文件名
}
}
//webpack多入口,即多文件編譯
module.exports ={
entry:{
index:'./src/a',//編譯a文件
b:'./src/b'//編譯b文件
},
output:{
path:'dest/',//輸出的路徑,此處建議使用path模塊下的絕對(duì)路徑函數(shù)resolve('dest/')
filename: '[name].bundle.js',//此處的name為entry中的鍵,會(huì)被編譯為index.bundle.js與b.bundle.js兩個(gè)文件
}
}
使用webpack編譯文件
控制臺(tái)輸入webpack運(yùn)行即可;因?yàn)槿职惭b之后即為安裝cli,可以使用命令行了;
webpack(本地安裝,啟用webpack服務(wù)器webpack-dev-server)
webpack-dev-server(幫助開發(fā)的服務(wù)器,可以再服務(wù)器環(huán)境下測(cè)試頁面等功能) webpack(功能模塊) webpack-cli(命令行模塊)
1. 安裝 cnpm i webpack-dev-server webpack webpack-cli -D
2. 配置文件\ webpack.config.js
const Webpack = require('webpack');
//代碼
module.exports ={
entry:'./src/1.js',//需要編譯的文件路徑,配置文件沿用node規(guī)則,此處路徑要加./,否則會(huì)被當(dāng)做系統(tǒng)模塊去查找
output:{
path:'dest/',//輸出的路徑,此處建議使用path模塊下的絕對(duì)路徑函數(shù)resolve('dest/')
filename: 'bundle.js',//輸出的文件名
},
mode:'development',//測(cè)試版,production為正式版
// webpack-dev-server配置
plugins:[
//開啟webpack的熱加載模塊,配合hot:true
new Webpack.HotModuleReplacementPlugin()
]
devServer:{
contentBase:'static',//靜態(tài)文件建議使用path模塊下的絕對(duì)路徑函數(shù)resolve('static/')
port:8089,//運(yùn)行端口
hot:true,//開啟熱加載,需要配合webpack的HotModuleReplacementPlugin()函數(shù)使用,此時(shí)僅能使用js文件的自動(dòng)刷新,靜態(tài)文件需要在啟動(dòng)腳本命令中添加--watch
historyApiFallback: true,//用來適應(yīng)前臺(tái)路由
}
}
3. 此時(shí)需要控制臺(tái)輸入webpack-dev-server --inline --watch來啟動(dòng)服務(wù)器,編譯后的文件存在內(nèi)存中(或者是dev-server默認(rèn)將文件編譯在根目錄),html文件引用時(shí)直接使用編譯后的文件名即可(bundle.js),--inline為加載刷新時(shí)刷新整個(gè)頁面,--watch為監(jiān)聽靜態(tài)頁面自動(dòng)刷新
webpack使用loader(俗稱:加載器,裝載器)
babel-loader用來編譯es6 安裝 babel-loader(給webpack提供接口) babel-core(真正的功能代碼) babel-preset-env(環(huán)境預(yù)設(shè))
module.exports ={
entry:{
index:'./src/a',//編譯a文件使用loader可以不寫后綴名,
b:'./src/b'//編譯b文件
},
output:{
path:'dest/',//輸出的路徑,此處建議使用path模塊下的絕對(duì)路徑函數(shù)resolve('dest/')
filename: '[name].bundle.js',//此處的name為entry中的鍵,會(huì)被編譯為index.bundle.js與b.bundle.js兩個(gè)文件
},
module:{//所有使用loader的配置都在module中配置
rules:[
{
test:/\.js$/,//以js結(jié)尾的文件
exclude:/node_modules/,//需要排除的js文件凑耻，node_modules文件夾下的js文件
use:{
loader:'babel-loader',//使用babel-loader
options:{
presets:['env']//配置使用環(huán)境預(yù)設(shè)
}
}
}
]
}
}
//此處可以完成編譯,但是無法使用,坐等后續(xù)學(xué)習(xí),
css-loader用來編譯css\less\sass等 安裝 css-loader
//創(chuàng)建css文件,直接在css.js中可以引用該文件 import cs1 from './cs1.css'
//webpack配置文件中售貌，編譯css.js文件即可,文件中cs1即為css文件中的代碼
// module如下
module:{//所有使用loader的配置都在module中配置
rules:[
{
test:/\.css$/,//以css結(jié)尾的文件,如果是less等,需要改成對(duì)應(yīng)的后綴名
use:{
loader:'css-loader',//使用css-loader
options:{
presets:['env']//配置使用環(huán)境預(yù)設(shè)
}
}
}
]
}
擴(kuò)展
爬蟲如果需要傳參的時(shí)候,根據(jù)訪問方法get直接在網(wǎng)址后面?傳參,post直接使用write('{"xxx":"xxx"}');
全棧開發(fā)常用工具
1. 編譯類
babel --> ES6編譯成ES5
grunt\gulp --> 壓縮等功能
2. 打包類
browserify --> 一堆文件打包成單個(gè)文件
3. 開發(fā)輔助
brower-sync --> 多端同步,移動(dòng)端在線測(cè)試使用
4. 測(cè)試類
單元測(cè)試 --> 對(duì)模塊、函數(shù)進(jìn)行測(cè)試
集成測(cè)試 --> 對(duì)項(xiàng)目進(jìn)行測(cè)試
壓力測(cè)試 --> 測(cè)試項(xiàng)目性能奸笤、負(fù)載能力、與隱藏BUG
webpack + 插件 處理以上全部問題;
npm 命令 -g與-D的使用
-g為全局安裝,安裝的是命令行,即 webpack-cli
-D為本地安裝,安裝的是webpack文件包
