vue_关于extract-text-webpack-plugin插件

1.extract-text-webpack-plugin插件的作用

extract-text-webpack-plugin插件的主要作用是：

  抽取css样式，防止将样式打包在js中引起页面样式加载错乱的现象。

2.安装extract-text-webpack-plugin插件

     使用npm进行安装，安装命令为：

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

3.在webpack.config.js中引入该插件并做相关配置

//导入插件

 var  ExtractTextPlugin  =  require('extract-text-webpack-plugin');

  //在module的use中指定使用extractTextPlugin做提取处理

module.exports = {

  module: {

    rules: [

      {

        test: /\.css$/,

        use: ExtractTextPlugin.extract({

          fallback: "style-loader",

          use: "css-loader"

        })

      }

    ]

  },

  plugins: [

    new ExtractTextPlugin("styles.css"),

  ]

}

其中：

use选项:         指的是需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader

fallback选项:    指的是指编译失败后用什么loader来提取css文件

publicfile选项:   指的是用来覆盖项目路径,生成该css文件的文件路径