css文件完成分离的插件（extract-text-webpack-plugin）的用法

css文件完成分离的插件（extract-text-webpack-plugin）的用法 时间：2024/3/14作者：未知来源：争怎路由网人气：

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地址就可以运行成功了，哈哈