webpack 4 提取 CSS 等样式文件

时间:2021-1-8 作者:admin

extract-text-webpack-plugin ,只支持 webpack 4 以下提取 CSS 文件,那么 webpack 4 怎么办呢?下面就为大家详细介绍 webpack 4 提取 CSS 文件的配置方法。

yarn add mini-css-extract-plugin

普通项目配置

需要注意的是 MiniCssExtractPlugin.loaderstyle-loader 由于某种原因不能共存。

// webpack.config.js

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

module.exports = {
  // other options...
  module: {
    rules: [
    {
      test: /.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css', 'sass',
      ]
    },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.css'
    })
  ]
}

Vue.js 全家桶的配置

这里只展示关于提取 CSS 的代码。

// build/webpack.prod.conf.js

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

var webpackConfig = merge(baseWebpackConfig, {
  // other options...
  plugins: [
    // 提取
    new MiniCssExtractPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css')
    })
  ]
})
// build/utils.js

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

// other options...
if (options.extract) {
  return [MiniCssExtractPlugin.loader].concat(loaders)
} else {
  return ['vue-style-loader'].concat(loaders)
}

源码

更全的配置,请移步 176f224

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。