提取Vue项目的中单个的CSS/LESS/SASS并压缩的配置方法

责编:menVScode 2018-05-31 9:42 阅读(1520)

可提取单个 CSS 的插件有两个,分别为 extract-text-webpack-plugin 和 mini-css-extract-plugin, 前者再配置一个 minimize 即可实现压缩功能,后者配置另一个插件 optimize-css-assets-webpack-plugin  即可实现压缩功能。

extract-text-webpack-plugin 实现方法:

1、安装插件 extract-text-webpack-plugin

npm install extract-text-webpack-plugin -D

2、引用插件

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

3、在webpack中的配置如下:

这是压缩 sass 的配置方法,css 和 less 的压缩方法和 sass 一样

module: {
        loaders: [
            { 
              test: /\.scss$/, 
              loader: ExtractTextPlugin.extract({ 
                 use: 'css-loader?minimize!sass-loader' // 压缩css
                 fallback: 'style-loader',
              }) 
            }
        ]
    },
plugins: [
        new ExtractTextPlugin('./css/[name].min.css') //根据压缩前的文件名称命名
    ]

配置完成!

mini-css-extract-plugin 的实现方法:

1、安装插件 mini-css-exreact-plugin

npm install mini-css-extract-plugin -D

2、引用插件

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

3、在webpack中的配置如下:

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  }
}

4、安装压缩插件

npm n install optimize-css-assets-webpack-plugin -D

5、引用插件

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

6、在 webpack 中配置如下:

module.exports = {
  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  }
}

mini-css-extract-plugin  插件详情地址: https://webpack.js.org/plugins/mini-css-extract-plugin/

标签: less css sass vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码