css打包-webpack打包CSS文件

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

webpack打包CSS文件

浏览了CSDN，没有一篇博文可以让我打包成功css打包，然后了解了一波网上的解释css打包，就成功了！

第一步

创建入口文件并导入样式资源

创建一个index.js和index.css文件。 其实你可以自己给文件命名

在index.js文件中引入css

import './index.css'

复制

第二步

配置 webpack.config.js 文件

注：该文件是您自己创建的

配置内容

以下是一些需要注意的事项

Entry是入口文件的路径，必须填写自己的路径，不能直接复制我的

输出是输出文件的文件名以及输出到的位置。 __dirname用于动态获取当前文件所属目录的绝对路径。 以下构建是我的文件夹之一。 自己填写就可以了。

const { resolve } = require('path');
module.exports = {
    entry: './src/index.js', //这是入口文件的相对路径，按照你自己的写
    output : {
        filename: 'ind.js',//这个是打包好之后的文件名
        path: resolve(__dirname,'build')//打包好后输出到哪个文件
    },
    module: {
        rules :[
            {
                test:/.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },//这个是相关的配置 直接复制就好
    plugins:[
        
    ],//注意要加s
    mode: 'development',//这里选择的是开发模式，选生产模式也可以
}

复制

第三步

包装下

先初始化文件，建议安装在文件目录最内层

npm init

复制

然后这里需要填写一些信息，按回车即可

2.先下载webpack

npm i webpack webpack-cli -D

复制

3.下载css-loader样式加载器

npm i css-loader style-loader -D

复制

包装完成

第四步

盒

直接在终端输入webpack即可，进入第二步填写的输出文件夹，就可以看到输出文件

至此，你就完成了！ ！ ！

这是我的文件目录，你可以参考一下

有什么疑问可以私信或者评论区讨论！ ！ ！