webpack5--css 打包

本文详细介绍了如何在项目中创建并引入CSS文件,通过Webpack进行加载和打包的过程。从创建CSS文件、引入到JS文件,到安装并配置相关loader,最后通过Webpack配置实现样式打包,步骤清晰,适合初学者学习。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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文件里去了,如下图:

 

感谢阅读~~

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值