webpack载入css文档及其配备方式

日期:2021-02-28 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

webpack载入css文档及其配备

  • 当大家写了几个css文档以后假如要想引入到html中去的话大家最初的方法便是根据link标识将css文档导入进去,可是假如大家的css文档有许多的话,1个个的导入是不强烈推荐的;而如今大家学了webpack,大家期待的是根据装包bundle.js文档,将全部的依靠文档所有导入进去。
  • 大家要了解的是,假如在通道涵数main.js文档中假如沒有导入css文档,那末装包的bundle.js文档必定不容易有css文档,全部大家必须让main.js文档依靠css文档。
  • 应用编码:require('css文档详细地址')
  • 依靠完以后,大家再装包1下 npm run build 会发现出错了。不正确为:You may need an appropriate loader to handle this file type。意思是说你将会必须1个适合的loader来解决这个文档
  • 因而大家开启webpack的汉语网站地址,在里边寻找了大家必须安裝 css-loader 和 style-loader 这两个loader。而且大家还必须在webpack.config.js文档中配备1下这些loader
  • 因而大家应用npm免费下载这两个依靠,编码以下:npm install css-loader style-loader --save-dev
  • 在webpack.config.js文档中,有1个module的特性,该特性为1个目标,在该目标中有个rules特性,是1个数字能量数组,数字能量数组中的每项全是解决不一样文档loader所必须的目标。编码以下:
const path = require('path');
    module.exports = {
        // 在配备文档中,手动式特定 通道 文档和 出口 文档
        mode:'development',   //  webpack4.x版本号中必须添加这个特性
        entry:'./src/main.js',  //  通道文档
        output:{  //  出口文档
            path:path.resolve(__dirname,'dist'),  //  特定即将装包好的文档应当要輸出到哪一个地区去(留意:相对路径务必是肯定详细地址)
            filename: 'bundle.js' //  特定輸出文档的文档名
        },
        module:{
            rules:[
            {test:/\.css$/ , use:['style-loader' , 'css-loader']}
            ]
        }
    }

在其中test表明大家要解决的是哪样种类的文档,use中的每项则是解决该类文档必须的loader。

留意:css-loader这个loader的功效是用来让main.js文档载入该css文档,而style-loader的功效是将控制模块的导出来做为款式加上到 DOM 中。这里将会有人会有疑惑:按这样的功效来说的话应当先载入文档再做为款式加上到DOM中去才对,那数字能量数组中的次序应当并不是这样的。我在这里很确立的告知你,你的念头是沒有错的,只是webpack他这1点十分的独特,它是从数字能量数组的最终1个元素,从右到左的次序载入loader的。

设定依靠,免费下载好loader并配备完以后,大家再运作以后便发现css文档中的款式就出来了。

总结

以上所述是网编给大伙儿详细介绍的webpack载入css文档及其配备方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!