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'
        }),
    

      

     
  • 相关阅读:
    CORS实践
    xunsearch使用记录
    apk的php解析
    MYSQLI_USE_RESULT or MYSQLI_STORE_RESULT
    企业图谱
    《软件需求工程》阅读笔记03
    2020年下半年学习进度12
    《软件需求工程》阅读笔记02
    2020年下半年学习进度11
    《软件需求工程》阅读笔记01
  • 原文地址:https://www.cnblogs.com/yiyi17/p/7592800.html
Copyright © 2011-2022 走看看