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