登录  /  注册
首页 > web前端 > css教程 > 正文

css文件实现分离的插件(extract-text-webpack-plugin)的用法

不言
发布: 2018-08-18 15:56:01
原创
3519人浏览过

本篇文章给大家带来的内容是关于css文件实现分离的插件(extract-text-webpack-plugin)的用法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

css分离:extract-text-webpack-plugin

1、安装该插件:

for webpack 1

npm install –save-dev extract-text-webpack-plugin@1.0.1

for webpack 2

npm install –save-dev extract-text-webpack-plugin@2.1.2

for webpack 3

npm install –save-dev extract-text-webpack-plugin

for webpack 4

npm i extract-text-webpack-plugin@next -D

2、在webpack-config.js中引入插件
 const extractTextPlugin=require(“extract-text-webpack-plugin”);

3、配置plugins:这里new一下这个对象,与上面那个配置插件用逗号分隔
 new extractTextPlugin(“/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==来解决

      var website={
          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.0 server F:\webLearn\webpackLearn
    > webpack-dev-server
    
    events.js:183
          throw er; // Unhandled 'error' event
          ^
    
    Error: listen EADDRNOTAVAIL 10.212.109.18:8087
        at Object._errnoException (util.js:992:11)    at _exceptionWithHostPort (util.js:1014:20)    at Server.setupListenHandle [as _listen2] (net.js:1338:19)    at listenInCluster (net.js:1396:12)    at doListen (net.js:1505:7)    at _combinedTickCallback (internal/process/next_tick.js:141:11)    at process._tickCallback (internal/process/next_tick.js:180:9)    at Function.Module.runMain (module.js:695:11)    at startup (bootstrap_node.js:191:16)    at bootstrap_node.js:612:3npm ERR! code ELIFECYCLE
    npm ERR! errno 1npm ERR! y@1.0.0 server: `webpack-dev-server`
    npm ERR! Exit status 1npm ERR!
    npm ERR! Failed at the y@1.0.0 server script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\勾丽娜\AppData\Roaming\npm-cache\_logs\2018-07-11T07_46_12_914Z-debug.logPS F:\webLearn\webpackLearn>
    登录后复制

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

    相关推荐:

    css文件如何进行打包?css文件打包的方法

    html文件如何打包 ?html文件打包的方法介绍

    以上就是css文件实现分离的插件(extract-text-webpack-plugin)的用法的详细内容,更多请关注php中文网其它相关文章!

    智能AI问答
    PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号