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

最新推荐文章于 2024-03-28 18:29:24 发布

cvper

最新推荐文章于 2024-03-28 18:29:24 发布

阅读量2.9k

点赞数

分类专栏： webpack 文章标签： webpack css-loader css style-loader

本文链接：https://blog.csdn.net/cvper/article/details/79701572

版权

webpack 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

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

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

老规矩，一步步来：

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

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

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

这两个东西就是用来处理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 命令就可以了：

我们打开index.html:

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

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

cvper

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack入门（六）：webpack 打包 css文件

上一篇，我们说了使用webpack.config.js 来设置webpack，而且之前我们也了解了如何打包 js 文件，现在我们看看如何打包 .css文件：老规矩，一步步来：第一步：全局安装我们的webpack (有的人可能为什么不局部安装，因为得一步步来，后面会说到相关内容，现在就按我的顺序来就行) 接下来要安装两...
复制链接

扫一扫