1.在 src?文件夾下面新建 css?文件夾，創建 common.css

body{background-color: #f2f2f2; } a{color: #188eee;text-decoration: none }

整個文件目錄如下圖：

?

2.css建立好后，需要引入到入口文件，這里我們引入到base.js中?

import css from './css/common.css'; var open=true; export {open};

如下圖：

?

3.終端安裝??style-loader 和 css-loader

cnpm install --save-dev style-loader css-loader

?

4.在 webpack.config.js?中?通過配置 module 引入這2個模塊

const path = require('path'); //引入path module.exports = {mode: 'development',entry: {index: path.join(__dirname, 'src/index.js'),signup:path.join(__dirname, 'src/signup.js'),},output: {//webpack4中的path默認值即為'./dist'，可不用設置path:path.join(__dirname, 'dist'), filename: '[name].bundle.js',},devServer: {contentBase: path.join(__dirname, 'page'),compress: true,port: 8084},module:{rules: [{test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}]}, }

?

5.終端執行 cnpm run start?

成功的話，如下圖：

?

6.執行 cnpm run server

成功的話，如下圖：

?

上面執行完畢后，瀏覽器會自動打開http://localhost:8084/，可以看到樣式已經打包到html文件里去了，如下圖：

?

感謝閱讀~~

?

總結

以上是生活随笔為你收集整理的webpack5--css 打包的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。