Skip to content

breaking: change to webpack 5 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 9, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,2 @@
dist/**/*
dist
node_modules
example
6 changes: 3 additions & 3 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
extends:
- metalab
rules:
metalab/filenames/match-exported: 0
- standard
env:
mocha: true
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
.idea
node_modules
*.log
dist
Expand Down
6 changes: 2 additions & 4 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,2 @@
node_modules
examples
*.log
coverage
/*
!/lib
21 changes: 12 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,14 @@ npm install --save fast-css-split-webpack-plugin

## Usage

Simply add an instance of `FastCSSSplitWebpackPlugin` to your list of plugins in your webpack configuration file _after_ `ExtractTextPlugin`. That's it!
Simply add an instance of `FastCSSSplitWebpackPlugin` to your list of plugins in your webpack configuration file _after_ `MiniCssExtractPlugin`. That's it!

```javascript
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var FastCSSSplitWebpackPlugin = require('../');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
var FastCSSSplitWebpackPlugin = require('fast-css-split-webpack-plugin');

module.exports = {
mode: 'development',
entry: './index.js',
context: __dirname,
output: {
Expand All @@ -33,13 +34,16 @@ module.exports = {
filename: 'bundle.js',
},
module: {
loaders: [{
rules: [{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
}],
use: [MiniCssExtractPlugin.loader, {
loader: 'css-loader',
options: {sourceMap: true}
}]
}]
},
plugins: [
new ExtractTextPlugin('styles.css'),
new MiniCssExtractPlugin({filename: 'styles.css'}),
new FastCSSSplitWebpackPlugin({size: 4000}),
],
};
Expand All @@ -55,9 +59,8 @@ The following configuration options are available:

**preserve**: `default: false`. Keep the original unsplit file as well. Sometimes this is desirable if you want to target a specific browser (IE) with the split files and then serve the unsplit ones to everyone else.

**defer**: `default: 'false'`. You can pass `true` here to cause this plugin to split the CSS on the `emit` phase. Sometimes this is needed if you have other plugins that operate on the CSS also in the emit phase. Unfortunately by doing this you potentially lose chunk linking and source maps. Use only when necessary.
**defer**: `default: 'false'`. You can pass `true` here to cause this plugin to split the CSS on the `afterProcessAssets` phase. Sometimes this is needed if you have other plugins that operate on the CSS also in the same phase. Unfortunately by doing this you potentially lose chunk linking and source maps. Use only when necessary.

[webpack]: http://webpack.github.io/
[herp]: https://github.com/ONE001/css-file-rules-webpack-separator
[postcss]: https://github.com/postcss/postcss
[postcss-chunk]: https://github.com/mattfysh/postcss-chunk
22 changes: 12 additions & 10 deletions example/basic/webpack.config.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var FastCSSSplitWebpackPlugin = require('../../')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const FastCSSSplitWebpackPlugin = require('../../')

/* eslint object-curly-spacing: [error, never] */
/* eslint node/no-path-concat: off */

module.exports = {
mode: 'development',
entry: './index.js',
context: __dirname,
output: {
Expand All @@ -10,19 +14,17 @@ module.exports = {
filename: 'bundle.js'
},
module: {
loaders: [{
rules: [{
test: /\.css$/,
loader: ExtractTextPlugin.extract.length !== 1
? ExtractTextPlugin.extract('style-loader', 'css-loader')
: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: 'css-loader'
})
use: [MiniCssExtractPlugin.loader, {
loader: 'css-loader',
options: {sourceMap: true}
}]
}]
},
devtool: 'source-map',
plugins: [
new ExtractTextPlugin('styles.css'),
new MiniCssExtractPlugin({filename: 'styles.css'}),
new FastCSSSplitWebpackPlugin({size: 3, imports: true})
]
}
22 changes: 15 additions & 7 deletions example/less/webpack.config.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var FastCSSSplitWebpackPlugin = require('../../')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const FastCSSSplitWebpackPlugin = require('../../')

/* eslint object-curly-spacing: [error, never] */
/* eslint node/no-path-concat: off */

module.exports = {
mode: 'development',
entry: './index.js',
context: __dirname,
output: {
Expand All @@ -10,16 +14,20 @@ module.exports = {
filename: 'bundle.js'
},
module: {
loaders: [{
rules: [{
test: /\.less$/,
loader: ExtractTextPlugin.extract(
'css?-url&-autoprefixer&sourceMap!less?sourceMap'
)
use: [MiniCssExtractPlugin.loader, {
loader: 'css-loader',
options: {sourceMap: true, url: false}
}, {
loader: 'less-loader',
options: {sourceMap: true}
}]
}]
},
devtool: 'source-map',
plugins: [
new ExtractTextPlugin('styles.css'),
new MiniCssExtractPlugin({filename: 'styles.css'}),
new FastCSSSplitWebpackPlugin({size: 3})
]
}
85 changes: 34 additions & 51 deletions lib/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

const path = require('path')
const split = require('css-split')
const { RawSource } = require('webpack-sources')
const { sources: { RawSource }, Compilation } = require('webpack')
const { interpolateName } = require('loader-utils')

/**
Expand Down Expand Up @@ -68,27 +68,32 @@ const normalizeImports = (input, preserve) => {
class FastCSSSplitWebpackPlugin {
/**
* Create new instance of FastCSSSplitWebpackPlugin.
* @param {Number} size Maximum number of rules for a single file.
* @param {Boolean|String} imports Truish to generate an additional import
* @param [options]
* @param {Number} [options.size] Maximum number of rules for a single file.
* @param {Boolean|String} [options.imports] Truish to generate an additional import
* asset. When a boolean use the default name for the asset.
* @param {String} filename Control the generated split file name.
* @param {Boolean} defer Defer splitting until the `emit` phase. Normally
* only needed if something else in your pipeline is mangling things at
* the emit phase too.
* @param {Boolean} preserve True to keep the original unsplit file.
* @param {String} [options.filename] Control the generated split file name.
* @param {Number} [options.stage] only valid while [options.defer] is false
* see <https://webpack.js.org/api/compilation-hooks/#additional-assets>
* @param {Boolean} [options.defer] Defer splitting until the `afterProcessAssets`
* phase. Normally only needed if something else in your pipeline is mangling
* things at the same phase too.
* @param {Boolean} [options.preserve] True to keep the original unsplit file.
*/
constructor ({
size = 4000,
imports = false,
filename = '[name]-[part].[ext]',
preserve,
stage = Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING,
defer = false
}) {
} = {}) {
this.options = {
size,
imports: normalizeImports(imports, preserve),
filename: nameInterpolator(filename),
preserve,
stage,
defer
}
}
Expand All @@ -97,7 +102,6 @@ class FastCSSSplitWebpackPlugin {
* Generate the split chunks for a given CSS file.
* @param {String} key Name of the file.
* @param {Object} asset Valid webpack Source object.
* @returns {Promise} Promise generating array of new files.
*/
file (key, asset) {
const input = {
Expand All @@ -124,12 +128,12 @@ class FastCSSSplitWebpackPlugin {
}
}

chunksMapping (compilation, chunks, done) {
chunksMapping (compilation) {
const assets = compilation.assets
const publicPath = strip(compilation.options.output.publicPath || './')

chunks.map((chunk) => {
const input = chunk.files.filter(isCSS)
for (const chunk of compilation.chunks) {
const input = [...chunk.files].filter(isCSS)
const entries = input.map((name) => this.file(name, assets[name]))

entries.forEach((entry) => {
Expand All @@ -145,7 +149,7 @@ class FastCSSSplitWebpackPlugin {
// - ...
entry.chunks.forEach((file) => {
assets[file.fullname] = file
chunk.files.push(file.fullname)
chunk.files.add(file.fullname)
})

// generate imports file content
Expand All @@ -162,7 +166,7 @@ class FastCSSSplitWebpackPlugin {

// if chunks.length == 1, the original chunk will be always preserved
if (entry.chunks.length > 1 && !this.options.preserve) {
chunk.files.splice(chunk.files.indexOf(entry.file), 1)
chunk.files.delete(entry.file)
delete assets[entry.file]
}

Expand All @@ -176,12 +180,10 @@ class FastCSSSplitWebpackPlugin {
imports = `${entry.dirname}/${imports}`
}
assets[imports] = importsFile
chunk.files.push(imports)
chunk.files.add(imports)
}
})
})

done()
}
}

/**
Expand All @@ -195,44 +197,25 @@ class FastCSSSplitWebpackPlugin {
* @returns {void}
*/
apply (compiler) {
// for webpack 4
if (compiler.hooks) {
const plugin = {
name: 'FastCssSplitPlugin'
}

if (this.options.defer) {
// Run on `emit` when user specifies the compiler phase
const name = 'FastCssSplitPlugin'
const { defer, stage } = this.options

// Only run on `thisCompilation` to avoid injecting the plugin into
// sub-compilers as happens when using the `mini-css-extract-plugin`.
compiler.hooks.thisCompilation.tap(name, compilation => {
if (defer) {
// Run on `afterProcessAssets` when user specifies the compiler phase
// Due to the incorrect css split + optimization behavior
// Expected: css split should happen after optimization
compiler.hooks.emit.tapAsync(plugin, (compilation, done) => {
this.chunksMapping(compilation, compilation.chunks, done)
compilation.hooks.afterProcessAssets.tap(name, () => {
this.chunksMapping(compilation)
})
} else {
// use compilation instead of this-compilation, just like other plugins do
compiler.hooks.compilation.tap(plugin, compilation => {
compilation.hooks.optimizeChunkAssets.tapAsync(plugin, (chunks, done) => {
this.chunksMapping(compilation, chunks, done)
})
compilation.hooks.processAssets.tap({ name, stage }, () => {
this.chunksMapping(compilation)
})
}
} else {
if (this.options.defer) {
// Run on `emit` when user specifies the compiler phase
// Due to the incorrect css split + optimization behavior
// Expected: css split should happen after optimization
compiler.plugin('emit', (compilation, done) => {
return this.chunksMapping(compilation, compilation.chunks, done)
})
} else {
// use compilation instead of this-compilation, just like other plugins do
compiler.plugin('compilation', (compilation) => {
compilation.plugin('optimize-chunk-assets', (chunks, done) => {
return this.chunksMapping(compilation, chunks, done)
})
})
}
}
})
}
}

Expand Down
36 changes: 14 additions & 22 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"name": "fast-css-split-webpack-plugin",
"version": "1.0.4",
"version": "2.0.0",
"author": "yibn2008 <yibn2008@qq.com>",
"license": "CC0-1.0",
"repository": "metalabdesign/css-split-webpack-plugin",
"repository": "yibn2008/fast-css-split-webpack-plugin",
"main": "lib/index.js",
"keywords": [
"webpack-plugin",
Expand All @@ -15,39 +15,31 @@
"spec": "NODE_ENV=test ./node_modules/.bin/_mocha --timeout 5000 -r adana-dump -R spec --recursive test/spec/**/*.spec.js"
},
"standard": {
"global": [
"describe",
"it",
"beforeEach",
"afterEach"
],
"ignore": [
"/test",
"/example"
"env": [
"mocha"
]
},
"devDependencies": {
"adana-cli": "^0.1.1",
"adana-dump": "^0.1.0",
"adana-format-lcov": "^0.1.1",
"chai": "^3.5.0",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"css-loader": "^6.2.0",
"mini-css-extract-plugin": "^2.2.0",
"less": "^4.1.1",
"less-loader": "^10.0.1",
"memory-fs": "^0.3.0",
"mocha": "3.x",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"standard": "^11.0.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.0"
"css-minimizer-webpack-plugin": "^3.0.2",
"standard": "^16.0.3",
"style-loader": "^3.2.1",
"webpack": "^5.50.0"
},
"dependencies": {
"css-split": "^1.1.3",
"loader-utils": "^1.1.0",
"webpack-sources": "^1.0.2"
"loader-utils": "^1.4.0"
},
"peerDependencies": {
"webpack": ">=1"
"webpack": ">=5"
}
}
Loading