webpack加载css文件及其配置方法_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

/引入想要的css文件var style=require('style/useable!css!file.css');激活,也就是在dom中添加style标签style.use();销毁,也就是不想用时,可以从dom中把style标签再删掉style.unuse();style.unref();至于你说“没有提取出来”,那是因为你用的是style-loader,如果真想提取文件,应该用extract-text-webpack-plugin。最后关于javascript部分,script标签从dom中删除这件事,其实意义不大,这么说吧,对你来说,最想把她从dom中移除的原因是什么?因为你的用户会检查你的dom?还是因为你觉得script标签杵在那里影响了你的心情?实际上,当script标签添加之后,脚本内容开始下载/解析,甚至执行,该被运行时记录的变量都已经记录了。如果真有变量需要销毁,这也不是c,js有自己的垃圾回收机制,只要你没写出内存泄漏的代码,内存中的废弃物是会自动销毁的;换句话说,如果你代码写的倒出是问题,就算手动删了那个script标签又如何?照样内存泄漏!补充:如果你想提取.vue文件里的style css内容,那你的loader配置也没配对地方,应该是在vue属性里配置:vue:{loaders:{js:'babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false',css:ExtractTextPlugin.extract(['css-loader'])}},plugins:new ExtractTextPlugin('output.css')www.zgxue.com防采集请勿采集本网。

webpack加载css文件及其配置 当我们写了几个css文件之后如果想要引用到html中去的话我们最开始的方式就是通过link标签将css文件导入进去,但是如果我们的css文件有很多的话,一个个的导入是不推荐的;而现在我们学了webpack,我们希望的是通过打包bundle.js文件,将所有的依赖文件全部导入进去。 我们要知道的是,如果在入口函数main.js文件中如果没有导入css文件,那么打包的bundle.js文件必然不会有css文件,所有我们需要让main.js文件依赖css文件。 使用代码:require('css文件地址') 依赖完之后,我们再打包一下 npm run build 会发现报错了。错误为:You may need an appropriate loader to handle this file type。意思是说你可能需要一个合适的loader来处理这个文件 于是我们打开webpack的中文网址,在里面找到了我们需要安装 css-loader 和 style-loader 这两个loader。并且我们还需要在webpack.config.js文件中配置一下这些loader 于是我们使用npm下载这两个依赖,代码如下:npm install css-loader style-loader --save-dev 在webpack.config.js文件中,有一个module的属性,该属性为一个对象,在该对象中有个rules属性,是一个数组,数组中的每一项都是处理不同文件loader所需要的对象。代码如下:

1.安装extract-text-webpack-plugin npm install extract-text-webpack-plugin-save-dev 2.配置文件添加对应配置 首先require一下 var ExtractTextPlugin=require(\"extract-text-webpack-plugin

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']} ] } }

css单独打包const OpenBrowserPlugin=require('open-browser-webpack-plugin');const PATHS={ app:path.join(_dirname,'src/app'), build:path.join(_dirname,'build'), };module.exports={ devtool:

其中test表示我们要处理的是哪种类型的文件,use中的每一项则是处理该类文件需要的loader。

webpack配置文件中,style-loader和css-loader 中,不要添加 exclude:/(node_modules)/, 添加了就找不到antd的CSS文件了

注意:css-loader这个loader的作用是用来让main.js文件加载该css文件,而style-loader的作用是将模块的导出作为样式添加到 DOM 中。这里可能有人会有疑问:按这样的作用来讲的话应该先加载文件再作为样式添加到DOM中去才对,那数组中的顺序应该不是这样的。我在这里很明确的告诉你,你的想法是没有错的,只是webpack他这一点非常的奇特,它是从数组的最后一个元素,从右到左的顺序加载loader的。

其实有两种方案:第一种是将 css 文件在 js entry 中添加依赖;第二种直接设置 css entry。第一种方案 index.jsimport 'normalize.css';webpack config{ entry:{ index:'./index.js' }, }

设置依赖,下载好loader并配置完之后,我们再运行之后便发现css文件中的样式就出来了。

试下extract-text-webpack-plugin,这个应该就可以将css发布到到指定文件中的哦 var ExtractTextPlugin=require(\"extract-text-webpack-plugin\");module.exports={ entry:{ 'entry1':'./a.js',

总结

以上所述是小编给大家介绍的webpack加载css文件及其配置方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对真格学网网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

webpack需要打包css的话需要配置的,需要用到css-loader和style-loader来打包css文件内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • webpack 中 css import 使用 alias 相对路径的方法
  • webpack为什么加载不了css
  • html-webpack-plugin按需加载的js/css也会被提取出来吗
  • webpack为什么加载不了css
  • webpack能够把CSS也编译到js文件里面,这样真的好吗
  • webpack 打包后的css文件 若有修改 只能重新在打包吗
  • webpack为什么css不能同步刷新了
  • 有人遇到过 antd的css文件在webpack打包的时候报错吗
  • webpack 怎么单独打包第三方css库,比如normalize.css
  • webpack 如何将提取出的css发布到到指定文件中?
  • webpack怎么把各个模块的css打包成一个
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程css加载webpackwebpack 中 css import 使用 alias 相对路径的方法css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字css 实现渐变效果小结( linear-gradient线性渐变 和 r解决type=file 文件修改表单 名称不能正常回显的问题移动端前端适配方案(总结)css 横向进度条和竖向进度条实现代码css运用阿里巴巴矢量库快速在对应位置加上好看的图标详解盒模型大小取决于它的padding,margin,border数css+svg实现b站充电效果的示例代码css动画实现领积分效果的思路详解html/css中的空格处理及如何保留页面中的空格css实现气泡的小尖角效果
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved