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

第三步 下包 先初始化文件,建议在文件目录最外层安装

npm init

然后这里要填写一些信息,回车就好 先下载webpack

npm i webpack webpack-cli -D

下载css-loader style-loader

npm i css-loader stye-loader -D

下包完成 第四步 打包 直接在终端输入webpack就可以了,到你在第二步填写的输出文件夹,就可以看到输出的文件了 至此,大功告成!!! 这是我的文件目录,可以参考一下

image.png

相关文章
|
7天前
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
3月前
|
JavaScript
webpack打包TS
webpack打包TS
134 60
|
2月前
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】
|
2月前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
61 1
|
2月前
|
前端开发 JavaScript
ES6模块化和webpack打包
【10月更文挑战第5天】
|
2月前
|
缓存 前端开发 JavaScript
深入了解Webpack:模块打包的革命
【10月更文挑战第11天】深入了解Webpack:模块打包的革命
|
3月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
117 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
2月前
|
JSON 前端开发 JavaScript
webpack如何支持多种类型的文件和转换需求
【10月更文挑战第13天】webpack如何支持多种类型的文件和转换需求
|
2月前
|
缓存 前端开发 JavaScript
Webpack技术深度解析:模块打包与性能优化
【10月更文挑战第13天】Webpack技术深度解析:模块打包与性能优化
|
2月前
|
前端开发 JavaScript 开发者
深入了解Webpack:现代JavaScript应用的打包利器
【10月更文挑战第11天】 深入了解Webpack:现代JavaScript应用的打包利器