webpack入門高階（3）

2022-08-19 18:39:09 字數 1694 閱讀 8875

sass這種css預處理器是以.scss結尾，需要用node-sass和sass-loader來處理

安裝loader

npm i node-sass sass-loader -d
webapck.base.js

module: ,


]}
注意： 如果出現css檔案中引入sass檔案的情況，只用css-loader是不能解析的，必須加入sass-loader，並且需要在css-loader中宣告，使用sass-loader才可以

舉個例子： index.css 引入 a.css , a.css引入a.scss，這個時候需要增加配置才行



},// "css-loader",


"postcss-loader",


"sass-loader"


]},
安裝file-loader

npm i [email protected] -d
增加支援配置

webpack.base.js

當比較小的時候，我希望把這個轉成base64格式的字串，這樣的好處是少發http請求，完成這個轉base64字串需求需要用到url-loader， url-loader是在file-loader上做的一層封裝， 我們需要將這個loader先安裝上

npm i [email protected] -d
修改相關配置



}}
如果要支援字型圖示，可以再新建一條匹配規則，使用file-loader來處理即可

相關配置

es的一些比較新的語法瀏覽器是不支援的，因此，我們需要將這些新的語法轉成比較通用的語法，babel就是乙個很好的轉換工具，我們先安裝需要的工具

npm i @babel/[email protected]  [email protected] @babel/[email protected] -d
@babel/core是babel的核心，它轉換語法的時候會用到 @babel/preset-env這個外掛程式包， @babel/preset-env這些外掛程式包裡包含了各種新語法的轉換功能，babel這個工具是可以獨立執行的，如果想要和webpack結合，還需要安裝乙個babel-loader， babel-loader的作用就是把es的一些新語法送到@babel/core，@babel/core再去呼叫@babel/preset-env外掛程式來完成轉換

增加配置

babel-loader 會去調乙個babel的配置檔案，我們需要在專案根目錄下建立.babelrc的配置檔案

如果使用了一些@babel/preset-env不能轉換的語法，你還可以單獨安裝對應的轉換外掛程式來解決，例如：

class person
這種語法需要用 @babel/plugin-proposal-class-properties 這個外掛程式來轉換 安裝外掛程式

npm i @babel/[email protected] -d

webpack入門高階（2）

webpack dev server是我們在開發階段需要用到的乙個伺服器,它會把 打包到記憶體，我們可以通過http的方式訪問到打包到記憶體的 安裝npm i webpack dev server 3.8.1 d修改package.json的啟動命令 dev webpack dev server e...

webpack入門高階（1）

初始化專案 mkdir webpack demo cd webpack demo npm init y安裝webpack npm i webpack 4.41.0 webpack cli 3.3.9 d零配置使用webpack，webpack約束源檔案目錄必須為src，預設配置檔案為 src ind...

webpack入門到高階（七） devtool

此選項控制是否生成，以及如何生成 source map。一，為什麼要控制source map的生成？我們在開發的過程中，難免會遇到專案執行的報錯資訊，我們習慣於經常開啟控制台，找到報錯的檔案，檢視報錯區域內容，方便我們更好的開發專案,因此sourcemap出現了，它就是為了解決不好調式 問題的。二，...