css文件如何实现分离的插件-创新互联

这篇文章主要介绍了css文件如何实现分离的插件,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

目前成都创新互联公司已为1000多家的企业提供了网站建设、域名、雅安服务器托管网站托管运营、企业网站设计、西工网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。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文件如何实现分离的插件-创新互联
标题URL:http://scyanting.com/article/dddpgg.html