webpack5 學習筆記(2)
阿新 • • 發佈：2021-01-17
webpack.config.jswebpack的配置檔案:
記得安裝css-loader、style-loader、less-loader下面有安裝程式碼
/* webpack.config.js webpack的配置檔案 作用：指示webpack 幹那些活(當執行webpack指令時，會載入裡面的配置 以裡面的配置來幹活) 所有構建工具都是基於nodejs平臺執行的 模組化預設才用commonjs */ // resolve 用來拼接結對路徑的方法 const {resolve} = require('path') module.exports ={ //webpack配置 //入口起點 entry:'./src/index.js', //輸出 output:{ //輸出檔名 filename:'built.js', //輸出路徑 //__dirname nodejs的變數，代表當前檔案的目錄絕對路徑 path:resolve(__dirname,'build') }, module:{ rules:[ //詳細loader配置 //不同檔案必須配置不同loader處理 { // 匹配哪些檔案 test:/\.css$/, //使用哪些loader進行處理 use:[ // npm i css-loader style-loader -D // 建立style標籤，將js中的樣式資源插入進行，新增到頁面中生效 'style-loader', // 將css檔案變成commonjs模組載入到js中，裡面內容是樣式字串 'css-loader' ] }, { test:/\.less$/, use:[ 'style-loader', 'css-loader', //將less檔案編譯成scs檔案 // npm i less-loader -D 'less-loader' ] } ] }, //plugins的配置 plugins:[ //詳細plugins的配置 ], //模式 mode:'development', //開發環境 // mode:'production', //生產環境 }
檔案目錄：
index.html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script src="./built.js"></script> <body> <h1 id="title">Hello less</h1> </body> </html>
index.css:
html,body{
margin: 0;
padding: 0;
height: 100%;
background: red;
}index.js
import './index.css';
import './index.less';
index.less:
#title{
color: yellow;
}使用webpack執行