提取css成單獨文件 · 前端

安裝插件 ``` npm i mini-css-extract-plugin -D ``` webpack.config.js ``` const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); 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' }; ``` src/index.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack</title> </head> <body> <div id="box1"></div> <div id="box2"></div> </body> </html> ``` src/js/index.js ``` import '../css/a.css'; import '../css/b.css'; ``` src/css/a.css ``` #box1 { width: 100px; height: 100px; background-color: pink; } ``` src/css/b.css ``` #box2 { width: 200px; height: 200px; background-color: deeppink; } ```