精华内容
下载资源
问答
  • css提取 (mini-css-extract-plugin)1、安装npm i mini-css-extract-plugin -D// 或npm i extract-text-webpack-plugin@next -D2、webpack配置文件引入及配置:const MiniCssExtractPlugin=require('mini-css-extract...

    css提取 (mini-css-extract-plugin)

    1、安装

    npm i mini-css-extract-plugin -D

    // 或

    npm i extract-text-webpack-plugin@next -D

    2、webpack配置文件引入及配置:

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

    // const ExtractTextWebpackPlugin=require('extract-text-webpack-plugin')

    // css,scss,sass,less

    {

    test:/\.(sa|sc|c)ss$/,

    use: [

    process.env.NODE_ENV === 'development' ? 'style-loader': MiniCssExtractPlugin.loader,

    'css-loader',

    'sass-loader'

    ]

    }

    //最后对应环境下的plugins中

    new MiniCssExtractPlugin({

    filename: "[name].css"

    })

    📢注意: MiniCssExtractPlugin 推荐只用于生产环境,因为该插件在开发环境下会导致HMR功能缺失,所以日常开发中,还是用style-loader。

    公共部分提取: optimization

    多入口文件的项目,难免在不同的入口存在相同的部分(使用了相同组建、公共样式等),将多个css chunk合并成一个css文件

    optimization: {

    splitchunks: {

    cacheGroups: {

    commons: {

    name: 'commons' , // 提取出来的文件命名

    // name: ‘common/common’ // 即先生成common文件夹

    chunks: 'initial', // initial表示提取入口文件的公共css及

    js部分

    // chunks: 'all' // 提取所有文件的公共部分

    // test: '/\.css$/' // 只提取公共css ,命名可改styles

    minChunks:2, // 表示提取公共部分最少的文件数

    minSize: 0 // 表示提取公共部分最小的大小

    // 如果发现页面中未引用公共文件,加上enforce: true

    }

    }

    }

    }

    css 压缩: optimize-css-assets-webpack-plugin

    1、安装

    npm i optimize-css-assets-webpack-plugin -D

    2、引入及配置

    // webpack.pord.config.js

    const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

    // 普通压缩

    plugins: [

    new OptimizeCSSAssetsPlugin ()

    ]

    // 使用cssnano配置规则

    // 先 npm i cssnano -D

    plugins: [

    new OptimizeCSSAssetsPlugin ({

    // 默认是全部的CSS都压缩,该字段可以指定某些要处理的文件

    assetNameRegExp: /\.(sa|sc|c)ss$/g,

    // 指定一个优化css的处理器,默认cssnano

    cssProcessor: require('cssnano'),

    cssProcessorPluginOptions: {

    preset: [ 'default', {

    discardComments: { removeAll: true}, //对注释的处理

    normalizeUnicode: false // 建议false,否则在使用unicode-range的时候会产生乱码

    }]

    },

    canPrint: true // 是否打印编译过程中的日志

    })

    ]

    📢注意,这样配置会存在只有css压缩的问题,这时webpack4原本自己配置好的js压缩会无效 ,需要重新配置UglifyJsPlugin(用于压缩js,webpack4内置了)一下

    optimization: {

    minimizer: [

    new UglifyJsPlugin({

    cache: true, // Boolean/String,字符串即是缓存文件存放的路径

    parallel: true, // 启用多线程并行运行提高编译速度

    sourceMap: true

    /*

    uglifyOptions: {

    output: {

    comments: false // 删掉所有注释

    },

    compress: {

    warning: false, // 插件在进行删除一些无用的代码时不提示警告

    drop_console: true // 过滤console,即使写了console,线上也不显示

    }

    } */

    }),

    new OptimizeCSSAssetsPlugin({})

    ]

    }

    配置方式:

    optimization的minimizer

    plugins中配置

    消除未使用的CSS

    1、安装

    npm i purify-webpack purify-css -D

    2、引入及配置

    const glob = require('glob')

    const PurifyCssPlugin = require('purifycss-webpack')

    plugins: [

    new PurifyCssPlugin ({

    paths: glob.sync(path.join(__dirname, '/*.html'))

    })

    ]

    展开全文
  • 建一个文件common,里面添加一个common.css .u-f,.u-f-ac,.u-f-ajc{ display: flex; } .u-f-ac{ align-items: center; } .u-f-ajc{ justify-content: center; } .u-f-jsp{ justify-content: space-between; } ...

    一.建一个文件common,里面添加一个common.css

       .u-f,.u-f-ac,.u-f-ajc{
    	display: flex;
    }
    .u-f-ac{
    	align-items: center;
    }
    .u-f-ajc{
    	justify-content: center;
    }
    .u-f-jsp{
    	justify-content: space-between;
    }
    

    二.在全局app引入,即为全局样式

    三.然后在组件里面,需要这些样式的时候,就不用在style里面写了

     <div class="u-f-ac" ></div>
     直接这样用就行了
    
    展开全文
  • 提取:mini-css-extract-plugin what? 在过去,如何将 CSS 提取到一个文件中这是 extract-text-webpack-plugin 的工作。不幸的是这个插件与 webpack 4 不太兼容。根据 Michael Ciniawsky 的说法:extract-text-...

    提取:mini-css-extract-plugin

    what?

    在过去,如何将 CSS 提取到一个文件中这是 extract-text-webpack-plugin 的工作。不幸的是这个插件与 webpack 4 不太兼容。根据 Michael Ciniawsky 的说法:extract-text-webpack-plugin 的维护已经成为了一个很大的负担,这已经不是第一次因为它的问题,而使升级 webpack 主版本变的而复杂和繁琐。
    而在webpack 4+版本我们可以使用mini-css-extract-plugin 插件来解决这些问题。

    use?

    首先通过运行npm命令进行安装

    npm install mini-css-extract-plugin --save-dev
    

    接下来,我们需要在webpack的配置文件中引入

    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    

    然后在scss等样式相关的rules中使用它:

    {
       //解析.scss文件
        test: /\.(sa|sc|c)ss$/,
        use: [
            'css-hot-loader',
            MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"
        ]
    }
    

    最后,我们需要在plugins中使用

        new MiniCssExtractPlugin({
          filename: "./css/[name].css"                     // 提取出来的css文件路径以及命名
        }),
    

    值得一提的是,最好将mini-css-extract-plugin用于生产模式,因为该插件使用目前会导致HMR功能缺失。因此在平常的开发模式中,我们还是使用style-loader。
    保存之后运行npm run build,会发现打包后文件夹已经帮我们把css提取出来:
    在这里插入图片描述

    到这里我们发现一个问题,结合之前的devtool和devServer以及现在的提取插件,我们会发现在开发模式和生产模式下,我们的webpack配置会有所不同,因此,我们大可将开发模式和生产模式的webpack配置分成两个文件来使用,例如:
    在这里插入图片描述

    当然,如果对配置文件命名进行修改,我们需要对package.json文件中的build和dev命令进行修改,通过–config引导命令读取相应的配置文件:

      "build": "webpack --progress --config ./config/webpack.prod.js",
       "dev": "webpack-dev-server --open --hot --progress --config ./config/webpack.dev.js"
    

    压缩:optimize-css-assets-webpack-plugin

    what?

    optimize-css-assets-webpack-plugin用于压缩css文件,它将在webpack构建期间搜索css资源,并将优化/最小化css(默认情况下,它使用cssnano,但可以指定自定义CSS处理器)
    它解决了extract-text-webpack-plugin css重复问题:由于extract-text-webpack-plugin仅捆绑(合并)文本块,如果它用于捆绑css,则捆绑包可能具有重复的条目

    use?

    同上述插件一样,该插件也是需要安装和引入,不再累赘叙述。完成后,我们进行如下使用:

        new OptimizeCssAssetsPlugin({
             assetNameRegExp: /\.css$/g,       //一个正则表达式,指示应优化/最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行,而不是源CSS文件的文件名。默认为/\.css$/g
             cssProcessor: require('cssnano'), //用于优化\最小化CSS的CSS处理器,默认为cssnano
             cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, //传递给cssProcessor的选项,默认为{}
             canPrint: true                    //一个布尔值,指示插件是否可以将消息打印到控制台,默认为true
        }),
    

    保存,运行build命令,会发现打包后的css文件已被压缩

    提取公共部分:optimization

    what?

    当我们在编写多入口文件的项目时,难免在不同的入口文件会有相同的部分(比如说存在部分相同的样式,使用了相同的组件,使用了公共样式等等),因此我们需要在打包过程中提取公共的部分并独立开来。
    在之前版本的webpack中,我们可以使用CommonsChunkPlugin 进行提取,而在webpack4+版本,CommonsChunkPlugin 已经从 webpack v4 legato 中移除,webpack 4+ 版本使用内置的 SplitChunksPlugin 插件来进行公共部分的提取

    use?

    因为 SplitChunksPlugin 是 webpack 4+ 版本内置的插件, 所以无需安装, 只需在 webpack.config.js 中配置:

        plugins: [
        	// ...
        ],
        optimization: {
            splitChunks: {
                cacheGroups: {
                    commons: {
                        name: 'commons',    //提取出来的文件命名
                        chunks: 'initial',  //initial表示提取入口文件的公共部分
                        minChunks: 2,       //表示提取公共部分最少的文件数
                        minSize: 0          //表示提取公共部分最小的大小
                  }
              }
          }
      }
    

    保存,使用插件之后运行build命令打包结果如下:
    在这里插入图片描述

    可以看到,webpack帮我们把js和css中公共的部分提取出来并放置命名为commons的文件中(如图中的commons.js和commons.css)。本次学习和练习到这里告一段落~~~~

    展开全文
  • npm -d install mini-css-extract-plugin 配置 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, ...

    安装

    npm -d install mini-css-extract-plugin
    

    配置

    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
     	{
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              'css-loader',
            ]
          }
     	 new MiniCssExtractPlugin({
          	filename: './css/[name].css'
       	 })
    

    可以看到把css文件都打包到dist/css/entry.css的目录下边了

    filename:’./css/[name].css’中的name就是入口声明的文件名字
    比如
    entry: {
    app: ‘./src/index.js’,
    },
    那么输出的文件名字就是./css/app.css

    展开全文
  • 异步组件,如何提取VUE组件中的CSS成独立的.css文件
  • 我有一个问题,webpack没有从 vendor VUE组件中提取CSS .所有这些样式标签仅来自 vendor Vue组件 . 从Javascript加载页面后插入我的vue组件中的其他样式,我的LESS文件, non-vue 供应商包中的样式被正确拆分为 main...
  • nuxt.js 关于页面中css 提取到 link的方法 说明: 关于nuxt.js的资料并不是很多,有时候遇到个很简单的问题,百度或者谷歌都不是很容易找到。 其实这个问题就很简单,但是也让我浪费了很多时间,所以在此共勉。 ...
  • damsel -通过CSS选择器和公共模板功能提取html大纲
  • [html] 开发静态页面时,不依赖node相关的工具,如何提取公共部分并引入? gulp-file-include 的代码复用 链接:https://segmentfault.com/a/1190000003043326 ...
  • $fontSize: 100px; h1 { font-size: $fontSize; }
  • 详解webpack打包vue时提取csswebpack打包vue项目的时候默认会把vue里的css打包到页面上。webpack.config.js里的plugins加上以下配置new webpack.LoaderOptionsPlugin({test:/\.vue$/,options: {vue: {loaders: {css:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,956
精华内容 5,182
关键字:

css提取公共