webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)
npm install webpack webpack-cli --save -dev
1.webpack-cli 解析webpack運行時傳入的參數(shù)
webpack未全局安裝時
npx是npm5.2之后出的新功能 可幫助執(zhí)行.bin目錄下的可執(zhí)行文件
npx webpack
https://blog.csdn.net/csdn_yudong/article/details/81670477
2.webpack 0配置有默認入口entry 和出口output
npx webpack --mode development
或者
配置package參數(shù)scripts: {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
然后npm run dev 或者npm run build
commonjs規(guī)范 eslint代碼檢測工具
nodejs操作文件的兩個變量 __dirname和 __filename
path.resolve() 方法將路徑或路徑片段的序列解析為絕對路徑躯嫉。
常用插件
- 插件webpack-merge用來合并配置文件
- development在開發(fā)環(huán)境時服務(wù)配置使用webpack devserver 可用端口訪問
- 插件 html-webpack-plugin 生產(chǎn)環(huán)境時使用html模板生成頁面 并引入打包后的js
- 插件 clean-webpack-plugin 生產(chǎn)環(huán)境時打包之前清除目標(biāo)目錄下的文件
解析css
- css-loader解析css style-loader將css生成style標(biāo)簽寫在頁面上
- 使用scss樣式預(yù)處理器時 安裝node-sass和sass-loader
- postcss-loader和autoprefixer為樣式添加瀏覽器前綴
- mini-css-extract-plugin插件可設(shè)置在生產(chǎn)環(huán)境時抽離樣式輸出到指定文件，加載樣式〔菅龋可同時使用optimize-css-assets-webpack-plugin壓縮樣式文件红符，但是這樣會破壞生產(chǎn)環(huán)境下的js自動壓縮猜嘱，需要另外再使用terser-webpack-plugin插件將js壓縮一下店读。
加載文件
- 使用file-loader和url-loader url-loader插件可以設(shè)置將小于一定大小的圖片轉(zhuǎn)為base64格式 以減少圖標(biāo)文件等的http請求
編譯js
- 使用babel-loader 加載babel使js現(xiàn)代語法轉(zhuǎn)為瀏覽器可以執(zhí)行的js
順序 babel-loader --> @babel/core -->@babel/preset-env琼娘。
實際使用中不同的js草案語法可能需要使用不同的插件處理腳本
問題：安裝npm install時候什么時候使用--save什么時候使用--save-dev
問題：.js .jsx .ts .tsx 這幾個后綴文件的區(qū)別
presets：預(yù)設(shè)峭弟，即一組預(yù)先設(shè)定的插件，是babel插件的組合
presets與plugins同時存在的執(zhí)行順序
- plugins運行在presets之前脱拼；
- plugins配置項瞒瘸，按照聲明順序執(zhí)行，從第一個到最后一個熄浓；
- presets配置項挨务，按照聲明逆序執(zhí)行，從最后一個到第一個（主要是為了確保向后兼容）
使用React
安裝react包
npm install react react-dom --save-dev
npm install @babel/preset-react --save-dev
@babel/preset-react預(yù)設(shè)可以將jsx語法轉(zhuǎn)為javascript 再@babel/preset-env轉(zhuǎn)換為es5
React + Typescript + webpack
安裝typescript 安裝@types/react @types/react-dom使用
-
方案1
安裝ts-loader 和typescript集來使用
-
方案2
babel7提供了編譯typescript的包 @babel/preset-typescript 可以使用
@babel/preset-typescript是將typescrip轉(zhuǎn)為javascript
