Webpack打包CSS文件

Webpack打包CSS文件

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

第一步

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

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

在index.js文件中引入css

import './index.css'

第二步

配置webpack.config.js文件

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

配置内容

这里有些要注意的地方

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

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

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

第三步

下包

1. 先初始化文件,建议在文件目录最外层安装

npm init

然后这里要填写一些信息，回车就好

2. 先下载webpack

npm i webpack webpack-cli -D

3. 下载css-loader style-loader

npm i css-loader style-loader -D

下包完成

第四步

打包

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

至此，大功告成！！！

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

有什么问题可以私信或评论区讨论吧！！！