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

发布时间:2022-03-05 09:45:11 作者:小新
来源:亿速云 阅读:137

这篇文章主要为大家展示了“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文件怎么实现分离的插件”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. python分离隐藏文件
  2. php配置文件与代码分离的实现思路

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:CSS怎么建立派生选择器

下一篇:CSS中被标注为sidebar的元素实例分析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》