webpack4 高手之路 第四天

栏目: CSS · 发布时间: 5年前

内容简介:之前讲过在引用css文件的时候可以引入style-loader和css=loader,诸如这样:现在提供一种更常用和更便捷的方法。## 引用其他js文件和css文件 ##

配置文件中设置引入css文件

之前讲过在引用css文件的时候可以引入style-loader和css=loader,诸如这样:

require("style-loader!css-loader!./src/css/style.css")

现在提供一种更常用和更便捷的方法。

  • 同样先在项目文件夹下安装style-loader和css=loader模块
    npm install style-loader css-loader --save-dev
  • 配置文件webpack.config.js如下:

    webpack4 高手之路 第四天

    module: { //module选项用来处理对应的模块
        rules: [
            {
                test: /\.css$/,  //用正则匹配所有的css文件
                use: ['style-loader','css-loader']   //使用style-loader,css-loader模块
            }
        ]
    }
  • 这样就已经可以正常打包css文件了。

## 引用其他js文件和css文件 ##

  • 创建基本目录如下:
    webpack4 高手之路 第四天
  • 在a.js和b.js文件中编写测试代码,如下:
    webpack4 高手之路 第四天
  • 编写css文件测试代码,如下:
    webpack4 高手之路 第四天
  • 在main.js中引用a.js、b.js和style.css文件
    webpack4 高手之路 第四天
  • 最后,npm run dev开始打包文件
    webpack4 高手之路 第四天
  • index.html中引入main.js文件,在浏览器中打开调试台
    <script src="dist/js/bundle.js" type="text/javascript" charset="utf-8"></script>
    webpack4 高手之路 第四天

这样,一个小demo就成功啦!


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Google

Google

托马斯·舒尔茨(Thomas·Schulz) / 严孟然、陈琴 / 当代中国出版社 / 2016-11-1 / CNY 49.80

想要掌握未来,必须了解谷歌 1998年从车库起家,短短数年研发上千项专利,2016年力压苹果、亚马逊,成为“世界最具价值品牌”“最佳雇主”,谷歌无疑是互联网时代的最大赢家,这家公司有能力通过巨额广告利润收获现在,更有意愿在人工智能层面创造未来。 据说谷歌势不可挡,永不餍足。从互联网搜索到智能翻译再到地图导航,谷歌是我们通向世界的门户。不仅如此,就像管理全世界的数据流一样,谷歌还要在不久......一起来看看 《Google》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具