zoukankan      html  css  js  c++  java
  • 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'
        }),
    

      

     
  • 相关阅读:
    hdu5002 Tree
    hdu6858(杭电多校第八场) Discovery of Cycles
    杭电多校第八场总结
    ubuntu刷新swap
    python 如何关闭warning的输出
    python 如何获取整数,浮点数的最大值
    补码
    LaTeX 公式集锦
    Codeforces 581D Three Logos
    Codeforces 582 A. GCD Table
  • 原文地址:https://www.cnblogs.com/yiyi17/p/7592800.html
Copyright © 2011-2022 走看看