webpack入门（六）：webpack 打包 css文件

朴灿烈づ我的快乐病毒、 2022-05-28 00:39 343阅读 0赞

上一篇，我们说了使用webpack.config.js 来设置webpack，

而且之前我们也了解了如何打包 js 文件，现在我们看看如何打包 .css文件：

老规矩，一步步来：

第一步：全局安装我们的webpack

(有的人可能为什么不局部安装，因为得一步步来，后面会说到相关内容，现在就按我的顺序来就行)

接下来要安装两个东西 css-loader  style-loader :

![70][]

这两个东西就是用来处理css 文件的；

第二步：创建我们的项目 webpack\_temp;

第三步：依旧和上一篇的内容一样，创建 index.html 文件，创建 run1.js文件，创建run2.js 文件，然后创建我们的

webpack.config.js文件；还有现在我们要说的  style.css 文件，一共5个文件；

index.html

<html>
        <head>
            <meta charset="utf-8">
        </head>
        <body>
            <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
        </body>
    </html>

run1.js

document. write( require( "./run2.js"));

run2.js

module. exports = "已经没问题了";

webpack.config.js

module. exports = \{

entry: "./run1.js",

output: \{

path: \_\_dirname,

filename: "bundle.js"

\},

module: \{

loaders: \[

\{ test:  / \\. css $ /, loader: "style-loader!css-loader" \}

\]

\}

\};

style.css

body\{

background-colo:green;

\}

最后我们使用 webpack 命令就可以了：

![70 1][]

我们打开index.html:

![70 2][]

写了这么久，突然发现从开始开始到现在都少了一个文件，虽然对我们现在的内容没什么影响，但是这个文件

还是很重要的 ，那就是 package.json 文件  ,下一次补上，并且具体说明；

[70]: /images/20220528/e5537bb890934ce29f8b6bbfc401767b.png
[70 1]: /images/20220528/23e7ff1afcc540ad8a15d25eb2752650.png
[70 2]: /images/20220528/597d9272e3ef496cbe3278dc55df03ea.png

发表评论取消回复

表情：

评论列表（有 0 条评论，343人围观）

还没有评论，来说两句吧...

相关阅读

相关 Webpack安装及打包js、css文件示例

什么是Webpack > Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack

末蓝、/ 2023年10月04日 09:08/ 0 赞/ 10 阅读

相关 webpack打包优化(webpack打包优化文件大小)

webpack 打包怎么优化的解决webpack打包的文件体积过大的问题：确实，每次打包从入口开始，会parse所有的依赖，多的时候竟然打包一次要2秒多，简直不能忍

喜欢ヅ旅行/ 2023年09月26日 14:37/ 0 赞/ 39 阅读

相关 webpack 打包html文件

webpack 打包html文件 `webpack.config.js`配置文件内容为： / loader: 1. 下载 2. 使用（配置）

一时失言乱红尘/ 2023年01月09日 03:43/ 0 赞/ 263 阅读

相关 webpack入门（六）——html-webpack-plugin

html-webpack-plugin 该插件可以简化创建调用webpack bundles的html文件。在每次编译后，文件名会包含有hash值的bundles 特别有

ゝ一纸荒年。/ 2022年06月16日 20:57/ 0 赞/ 235 阅读

相关 webpack入门（六）：webpack 打包 css文件

上一篇，我们说了使用webpack.config.js 来设置webpack，而且之前我们也了解了如何打包 js 文件，现在我们看看如何打包 .css文件：老规矩，一步

朴灿烈づ我的快乐病毒、/ 2022年05月28日 00:39/ 0 赞/ 344 阅读

相关 webpack入门（四）：webpack打包 js 文件

我们首先知道webpack是处理 js 的工具，那么就不能处理 css 等其它文件了么？不是的，webpack可以通过 loader 处理很多类型的文件；我们

待我称王封你为后i/ 2022年05月28日 00:25/ 0 赞/ 452 阅读

相关 webpack打包

进入工作空间,npm run build,打一下生产的包打包完之后,会生成一个dist目录 ![70][] static是静态文件的存放地址在config目录

╰半夏微凉°/ 2022年05月09日 05:12/ 0 赞/ 369 阅读

相关 webpack打包文件过程

webpack打包 1)安装webpack $ npm install webpack webpack-cli --save-dev 2)添加配置文件 we

快来打我*/ 2022年05月08日 06:14/ 0 赞/ 346 阅读

相关 Webpack打包css

1、编写src/css/main.css ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

太过爱你忘了你带给我的痛/ 2022年04月06日 08:08/ 0 赞/ 381 阅读

相关 WebPack打包

一、用webpack打包新建一个文件夹 webpack-demo 1. 初始化 npm 执行命令 $ npm init （只生成一个package.json文件） !

一时失言乱红尘/ 2021年11月16日 23:40/ 0 赞/ 618 阅读