webpack5 學習筆記(8)
阿新 • • 發佈：2021-01-15
webpack單獨提取css檔案
檔案目錄：
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> <body> <div id="box1"></div> <div id="box2"></div> </body> </html>
index.js:
import '../css/a.css'
import '../css/b.css'a.css:
#box1{
width: 100px;
height: 100px;
background: red;
}b.css:
#box2{
width: 200px;
height: 200px;
background: yellow;
}webpack.config.js:
const HtmlWebpackPlugin = require('html-webpack-plugin') const {resolve} = require('path') const MiniCssExtractPlugin = require('mini-css-extract-plugin') module.exports= { entry:'./src/js/index.js', output:{ filename:'js/built.js', path:resolve(__dirname,'build') }, module:{ rules:[ { test:/\.css$/, use:[ //建立style標籤，降樣式放入 // 'style-loader', //這個loader去掉style-loader。 作用：提取js中的css成單獨檔案 MiniCssExtractPlugin.loader, // 將css檔案整合到js檔案中 'css-loader' ] } ] }, plugins:[ new HtmlWebpackPlugin({ template:'./src/index.html' }), new MiniCssExtractPlugin({ // 對輸出的css進行重新命名 filename:'css/built.css' }) ], mode:'development' }
輸出webpakc