9css分离：extract-text-webpack-plugin

css分离：extract-text-webpack-plugin

1. 安装该插件：
   
   
   

   for webpack 1
   

   npm install –save-dev [email protected]
   

   for webpack 2
   

   npm install –save-dev [email protected]
   

   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进行打包

   • 注意：虽然把css文件分离出来了，但是css路径不对

   • 用==publishPath==来解决

     • publicPath：是在webpack.config.js文件的output选项中，主要作用就是处理静态文件路径的
     • 在处理前需要在webpack.config.js上方声明一个website对象

     var website={
         publicPath:"http://192.168.1.108:1717"
     }

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

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

   //出口文件的配置项
   output:{
       //输出的路径，用了Node语法
       path:path.resolve(__dirname,'dist'),
       //输出的文件名称
       filename:'[name].js',
       publicPath:website.publicPath
   },

7. 使用webpack进行打包，这时原来的相对路径就会变为绝对路径（绝对路径速度会更快）
   
   
   gitub官网
   
   webpack4版本以上css分离

*若出现下列错误，说明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:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! y@1.0.0 server: `webpack-dev-server`
npm ERR! Exit status 1
npm 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.log
PS F:\webLearn\webpackLearn>

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