广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >css文件怎么实现分离的插件
  • 924
分享到

css文件怎么实现分离的插件

css 2022-10-19 17:10:03 924人浏览 泡泡鱼
摘要

这篇文章主要为大家展示了“CSS文件怎么实现分离的插件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css文件怎么实现分离的插件”这篇文章吧。   1、安装该

这篇文章主要为大家展示了“CSS文件怎么实现分离的插件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css文件怎么实现分离的插件”这篇文章吧。

  1、安装该插件:

  forwebpack1

  npminstall–save-devextract-text-WEBpack-plugin@1.0.1

  forwebpack2

  npminstall–save-devextract-text-webpack-plugin@2.1.2

  forwebpack3

  npminstall–save-devextract-text-webpack-plugin

  forwebpack4

  npmiextract-text-webpack-plugin@next-D

  2、在webpack-config.js中引入插件

  constextractTextPlugin=require(“extract-text-webpack-plugin”);

  3、配置plugins:这里new一下这个对象,与上面那个配置插件用逗号分隔

  newextractTextPlugin(“/css/index,.css”)

  4、这里的/css/index.css是分离后的路径位置。这部配置完成后,包装代码:还要修改原来我们的style-loader和css-loader

  [x]修改代码如下:

  module:{rules:[

  {

  test:/\.css$/,

  use:extractTextPlugin.extract({

  fallback:"style-loader",

  use:"css-loader"

  })

  },{test:/\.(png|jpg|gif)/,

  use:[{

  loader:'url-loader',

  options:{

  limit:500000

  }

  }]

  }

  ]

  },

  5、使用webpack进行打包

  publicPath:是在webpack.config.js文件的output选项中,主要作用就是处理静态文件路径的

  在处理前需要在webpack.config.js上方声明一个website对象

  注意:这里的IP和端口是本机的ip或者是你devServer配置的IP和端口//==publicPath里面的内内容一定要写正确:用ipconfig查看电脑的ip地址,然后冒号后面跟自己设置的端口==

  注意:虽然把css文件分离出来了,但是css路径不对

  用==publishPath==来解决

  varwebsite={

  publicPath:"Http://192.168.1.108:1717"}

  6、在output选项中引用这个对象的publicPath属性

  //出口文件的配置项output:{//输出的路径,用了node语法

  path:path.resolve(__dirname,'dist'),//输出的文件名称

  filename:'[name].js',

  publicPath:website.publicPath

  },

  7、使用webpack进行打包,这时原来的相对路径就会变为绝对路径(绝对路径速度会更快)

  *若出现下列错误,说明ip没写对

  >y@1.0.0serverF:\webLearn\webpackLearn

  >webpack-dev-server

  events.js:183

  thrower;//Unhandled'error'event

  ^

  Error:listenEADDRNOTAVaiL10.212.109.18:8087

  atObject._errnoException(util.js:992:11)at_exceptionWithHostPort(util.js:1014:20)atServer.setupListenHandle[as_listen2](net.js:1338:19)atlistenInCluster(net.js:1396:12)atdoListen(net.js:1505:7)at_combinedTickCallback(internal/process/next_tick.js:141:11)atprocess._tickCallback(internal/process/next_tick.js:180:9)atFunction.Module.runMain(module.js:695:11)atstartup(bootstrap_node.js:191:16)atbootstrap_node.js:612:3npmERR!codeELIFECYCLE

  npmERR!errno1npmERR!y@1.0.0server:`webpack-dev-server`

  npmERR!Exitstatus1npmERR!

  npmERR!Failedatthey@1.0.0serverscript.

  npmERR!Thisisprobablynotaproblemwithnpm.ThereislikelyadditionallogginGoutputabove.

  npmERR!Acompletelogofthisruncanbefoundin:

  npmERR!C:\Users\勾丽娜\AppData\Roaming\npm-cache\_logs\2018-07-11T07_46_12_914Z-debug.logPSF:\webLearn\webpackLearn>

  修改好正确的ip地址就可以运行成功了,哈哈

css文件怎么实现分离的插件



以上是“css文件怎么实现分离的插件”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网node.js频道!

--结束END--

本文标题: css文件怎么实现分离的插件

本文链接: https://www.lsjlt.com/news/91481.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • css文件怎么实现分离的插件
    这篇文章主要为大家展示了“css文件怎么实现分离的插件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css文件怎么实现分离的插件”这篇文章吧。   1、安装该...
    99+
    2022-10-19
    css
  • 使用nodejs怎么分离html文件中的js和css
    使用nodejs怎么分离html文件中的js和css,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。直接上代码:// ...
    99+
    2022-10-19
    nodejs css js
  • java离线文件传输怎么实现
    要实现Java的离线文件传输,可以使用Socket编程来实现。下面是一个简单的离线文件传输的示例代码:服务端代码:```javaim...
    99+
    2023-09-23
    java
  • 怎么使用JQuery实现分页插件
    要使用jQuery实现分页插件,可以按照以下步骤进行操作:1. 首先,引入jQuery库文件和自定义的分页插件文件到HTML页面中。...
    99+
    2023-08-15
    Jquery
  • eclipse的离线svn插件怎么安装
    要在Eclipse中安装离线SVN插件,您可以按照以下步骤进行操作: 下载SVN插件的离线安装包。您可以在SVN插件的官方网站或...
    99+
    2023-10-24
    eclipse svn
  • 如何使用nodejs分离html文件里的js和css
    这篇文章主要介绍如何使用nodejs分离html文件里的js和css,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!摘要: 本文要实现的内容,使用nodejs 对文件的增删改查,演示的...
    99+
    2022-10-19
    nodejs html css
  • 分离vue文件中css、js代码的简单技巧
    目录场景方法index.vue 基础代码index.scss 基础代码index.js 基础代码拓展代码总结场景 1、因为早期是iOS开发,形成的MVC习惯,个人喜欢css、js代码...
    99+
    2022-11-13
    分离vue文件代码 vue实例代码
  • vue.js中怎么实现一个分页插件
    这篇文章将为大家详细讲解有关vue.js中怎么实现一个分页插件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。html代码:<div clas...
    99+
    2022-10-19
    vue.js
  • jQ怎么实现文件无刷新上传插件下载
    本篇内容主要讲解“jQ怎么实现文件无刷新上传插件下载”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jQ怎么实现文件无刷新上传插件下载”吧!全局设置:下面的为下面...
    99+
    2022-10-19
    jquery
  • SpringBoot中怎么实现一个读写分离组件
    这期内容当中小编将会给大家带来有关SpringBoot中怎么实现一个读写分离组件,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。1.pom.xml配置文件<depen...
    99+
    2022-10-19
    springboot
  • php怎么实现txt文件分页
    本文操作环境:Windows7系统,PHP7.4版,Dell G3电脑。php怎么实现txt文件分页php对文本文件进行分页功能简单实现<!DOCTYPE> <html> <head> <m...
    99+
    2020-12-10
    php txt
  • 即插即用的Vue Loading插件怎么实现
    这篇文章主要讲解了“即插即用的Vue Loading插件怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“即插即用的Vue Loading插件怎么实现”吧!无论最终要实现怎样的网站,Lo...
    99+
    2023-07-04
  • 使用JQuery实现的分页插件分享
    JQuery分页插件是一种非常常用的工具,可以帮助开发人员快速实现网页中的分页功能。以下是一个使用JQuery实现的分页插件的示例代...
    99+
    2023-08-14
    JQuery
  • 怎么用PHP+jPaginate插件实现无刷新分页
    本篇内容主要讲解“怎么用PHP+jPaginate插件实现无刷新分页”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用PHP+jPaginate插件实现无刷新...
    99+
    2022-10-19
    制作 刷新
  • wordpress怎么不用插件实现文章阅读数
    这篇文章主要介绍了wordpress怎么不用插件实现文章阅读数,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。wordpress不用插件实现文章阅读数一、想法一开始想到应该有什...
    99+
    2023-06-14
  • php怎么实现插件功能
    本教程操作环境:Windows7系统、PHP8.1版、Dell G3电脑。php怎么实现插件功能?php实现插件插件很多从事互联网行业或者开发的人员来不是很陌生,wordpress之所以为什么那么受欢迎,很大部分是因为他的强大的插件库,还要...
    99+
    2022-11-25
    插件 php
  • 怎么根据分辨率调用css文件
    这篇文章主要介绍“怎么根据分辨率调用css文件”,在日常操作中,相信很多人在怎么根据分辨率调用css文件问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么根据分辨率调用css...
    99+
    2022-10-19
    css
  • CSS和JS合并的WordPress插件怎么用
    小编给大家分享一下CSS和JS合并的WordPress插件怎么用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!css的选择器有哪些css的选择器可以分为三大类,即id选择器、class选择器、标签选择器。它们之间可以有多种...
    99+
    2023-06-14
  • IDEA插件Statistic怎么实现快速分辨烂项目
    这篇“IDEA插件Statistic怎么实现快速分辨烂项目”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“IDEA插件Stat...
    99+
    2023-06-28
  • 怎么使用Jquery插件实现跨域异步上传文件功能
    这篇文章主要介绍“怎么使用Jquery插件实现跨域异步上传文件功能”,在日常操作中,相信很多人在怎么使用Jquery插件实现跨域异步上传文件功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么使用Jquer...
    99+
    2023-07-04
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作