extract-text-webpack-plugin
,只支持 webpack 4 以下提取 CSS 文件,那么 webpack 4 怎么办呢?下面就为大家详细介绍 webpack 4 提取 CSS 文件的配置方法。
yarn add mini-css-extract-plugin
普通项目配置
需要注意的是
MiniCssExtractPlugin.loader
和style-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 。