extract-text-webpack-plugin---webpack插件

　　var ExtractTextPlugin=require('extract-text-webpack-plugin');//build使用
      {
        test:/\.css$/,
        use:ExtractTextPlugin.extract({
          fallback:'style-loader',
          use:'css-loader'
        })
      },
      {
        test:/\.scss$/,
        loader:ExtractTextPlugin.extract({
          fallback:'style-loader',
          use:'css-loader!sass-loader'
        })
      },

    new ExtractTextPlugin({
      filename:'[name].css',
      disable:false,
      allChunks:true
    }),

　　

　　注：在css抽離的過程webpack-dev-server -d --inline --hot --env.dev ，scss寫的文件不會熱更新。因此build中再使用，開發過程當中不適用，效果更佳~

 

 

在webpack4中改爲了mini-css-extract-plugin，依然是build中使用

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

 rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader' },
          { loader: 'postcss-loader', options: { sourceMap: true } }
        ]
      },
      {
        test: /\.s(c|a)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader' },
          { loader: 'postcss-loader', options: { sourceMap: true } },
          { loader: 'sass-loader', options: { sourceMap: true } }
        ]
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader' },
          { loader: 'postcss-loader', options: { sourceMap: true } },
          { loader: 'less-loader', options: { sourceMap: true } }
        ]
      }
    ]

 new MiniCssExtractPlugin({
      filename: 'style/[name]-[contenthash].css'
    }),