Webpack打包CSS文件

逛遍CSDN没有能让我打包成功的博文，然后理解了一波网上的讲解成功了！

第一步

创建入口文件，引入样式资源

创建一个index.js，和index.css文件当然这个文件名你可以自己起

在index.js文件中引入css

代码语言：javascript复制

import './index.css'

第二步

配置webpack.config.js文件

注意：这个文件是自己新建的

配置内容

这里有些要注意的地方

entry是入口文件的路径，要按自己的路径填，不能直接复制我的

output是输出文件的文件名，和输出到什么位置，__dirname是用来动态获取当前文件所属目录的绝对路径，后面的build是我的一个文件夹，这个你们填自己的就好

代码语言：javascript复制

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',//这里选择的是开发模式，选生产模式也可以
}