webpack-contrib / mini-css-extract-plugin Goto Github PK
View Code? Open in Web Editor NEWLightweight CSS extraction plugin
License: MIT License
Lightweight CSS extraction plugin
License: MIT License
If you do npm i webpack-contrib/mini-css-extract-plugin#2899ed376a290817b03f3280d4f552b9326224ba -D
, the package is missing source making it impossible to use the plugin.
One way to solve this would be to set up a postinstall script.
It appears that when this plugin is used in an app that has Javascript chunks that to do not have an corresponding css chunk it causes the underlying Webpack loading code to throw an exception.
The error does not happen in webpack's development mode, so I'm guessing the js minifier (webpacks) that is run on the runtime code during production build is somehow breaking it..
Below are some screenshots of the erroneous code.
I'm using the latest version of webpack & this plugin.
Not sure if this might be a compatibility issue with HtmlWebpackPlugin or not, but after migrating from ExtractTextWebpackPlugin as part of webpack v4 upgrade, I am seeing the the main CSS file being referenced where a JS file should be referenced in the built index.html.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Providence Geeks</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="index.css" rel="stylesheet"></head>
<body>
<div id="root">Loading ...</div>
<script type="text/javascript" src="0.chunk.js">
</script><script type="text/javascript" src="index.css"></script></body>
</html>
notice a index.css
path within the second <script>
tag
This causes an Syntax error of "unknown token" in the browser, because it doesn't understand the CSS it is getting (in this case an @import
statement)
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'production',
entry: {
index: './index.jsx'
},
output: {
path: path.resolve(__dirname, './build'),
filename: '[name].[chunkhash].bundle.js',
sourceMapFilename: '[name].map',
chunkFilename: '[id].chunk.js'
},
context: path.resolve(__dirname, 'src'),
resolve: {
extensions: ['.jsx', '.js']
},
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendors: {
test: /node_modules/,
enforce: true
}
}
}
},
module: {
rules: [{
test: /\.(js*)x$/,
enforce: 'pre',
loader: 'eslint-loader',
exclude: path.join(__dirname, 'node_modules')
}, {
test: /\.(js*)x$/,
loaders: [
'babel-loader',
'react-hot-loader/webpack'
],
exclude: path.join(__dirname, 'node_modules')
}, {
test: /\.(s*)css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}, {
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
}, {
test: /\.(ttf|eot|svg|jpe?g|png|gif|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
}]
},
plugins: [
new MiniCssExtractPlugin(),
new HtmlWebpackPlugin({
template: './index.html',
chunksSortMode: 'dependency'
}),
new webpack.ProvidePlugin({
jQuery: 'jquery'
})
]
};
The issue can be reproduced with the self contained webpack config by running the following steps
git clone
this repogit checkout test-mini-css-extract-plugin
yarn install
yarn mini-extract
Actual: build/index.html has a CSS file + path inside a <script>
tag
Expected: build/index.html should only reference JS files in <script>
tags
Code:
new MiniCssExtractPlugin(
{
filename: "[contenthash].min.css",
chunkFilename: "[contenthash].chunk.min.css"
}
Output:
Path variable [contenthash] not implemented in this context: [contenthash].min.css
[chunkhash] and [hash] works fine.
macOS: 10.13.3
Node.js: 9.9.0
Webpack: 4.3.0
mini-css-extract-plugin: 0.2.0
I updated from version 0.2.0 to 0.3.0 and I am getting the following error.
I reinstalled node modules but the error only went away when i switched to 0.2.0.
My Webpack configuration
const CopyWebpackPlugin = require("copy-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const Stylish = require("webpack-stylish");const webpack = require("webpack");
const path = require("path");module.exports = {
entry: {
app: ["./src/scripts/app.js"]
},
output: {
filename: "app.js",
path: path.resolve("app")
},
mode: "production",
devServer: {
contentBase: path.join("app"),
compress: true,
port: 2222,
hot: true,
stats: "errors-only"
},
stats: "errors-only",
module: {
rules: [
{
test: /.js$/,
include: path.resolve("./src/scripts/"),
loader: "babel-loader?cacheDirectory=true",
options: {
presets: ["es2015"],
compact: true
}
},
{
test: /.scss$/,
include: path.resolve("./src/scss/"),
use: [MiniCssExtractPlugin.loader, "css-loader"]
},
{
test: /.html$/,
loader: "ng-cache-loader?prefix=../templates/**"
}
]
},plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "css/styles.css"
}),
new CopyWebpackPlugin([{ from: "index.html", to: "index.html" }]),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(["app"]),
new Stylish()
]
};
The Error I get
TypeError: Cannot destructure property
createHash
of 'undefined' or 'null'.
at Object. (/node_modules/mini-css-extract-plugin/dist/index.js:26:44)
at Module._compile (/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object. (/node_modules/mini-css-extract-plugin/dist/cjs.js:3:18)
at Module._compile (/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object. (/webpack.config.js:3:30)
at Module._compile (/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at WEBPACK_OPTIONS (/node_modules/webpack-cli/bin/convert-argv.js:133:13)
at requireConfig (/node_modules/webpack-cli/bin/convert-argv.js:135:6)
at /node_modules/webpack-cli/bin/convert-argv.js:142:17
at Array.forEach ()
at module.exports (/node_modules/webpack-cli/bin/convert-argv.js:140:15)
at yargs.parse (/node_modules/webpack-cli/bin/webpack.js:239:39)
at Object.parse (/node_modules/webpack-cli/node_modules/yargs/yargs.js:543:18)
at /node_modules/webpack-cli/bin/webpack.js:217:8
at Object. (/node_modules/webpack-cli/bin/webpack.js:512:3)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
error An unexpected error occurred: "Command failed.
Exit code: 1
The version of my webpack is 4
is there any plan for supporting hot reload yet?
The stable and development version are two different things with different sets of features. I got burned by this as I tried to use a development feature and there's no easy way to do that due to #61. Maybe it would be better to push development bits to a branch of its own so people don't get confused.
As the title, it seems sometimes one is used, sometimes the other. Could someone explain?
Using [email protected]
Is it possible to support a content hash in the filename, like extract-text-webpack-plugin's [contenthash]
?
Using filename: '[name].[chunkhash:8].css'
the .css
hash is also changing when only the JavaScript in the chunk has changed:
I've got this error:
ERROR in chunk account
[name]-[contenthash].bundle.css
Path variable [contenthash] not implemented in this context: [name]-[contenthash].bundle.css
After adding some debug into TemplatedPathPlugin:replacePathVariables
function:
account
chunk has contentHash: { javascript: 'c3b502d300' }
undefined
, should be javascript ?Not really sure what's going on, but the aforementioned error was thrown on my machine when including the plugin, i.e. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
.
TypeError: Class extends value undefined is not a constructor or null
at Object.<anonymous> (/Users/glenn/github/minimalistic-devserver/node_modules/mini-css-extract-plugin/dist/index.js:30:47)
at Module._compile (/Users/glenn/github/minimalistic-devserver/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:673:10)
at Module.load (module.js:575:32)
at tryModuleLoad (module.js:515:12)
at Function.Module._load (module.js:507:3)
at Module.require (module.js:606:17)
at require (/Users/glenn/github/minimalistic-devserver/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object.<anonymous> (/Users/glenn/github/minimalistic-devserver/node_modules/mini-css-extract-plugin/dist/cjs.js:3:18)
at Module._compile (/Users/glenn/github/minimalistic-devserver/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:673:10)
at Module.load (module.js:575:32)
at tryModuleLoad (module.js:515:12)
at Function.Module._load (module.js:507:3)
at Module.require (module.js:606:17)
at require (/Users/glenn/github/minimalistic-devserver/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object.<anonymous> (/Users/glenn/github/minimalistic-devserver/webpack.config.js:8:30)
at Module._compile (/Users/glenn/github/minimalistic-devserver/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:673:10)
at Module.load (module.js:575:32)
at tryModuleLoad (module.js:515:12)
at Function.Module._load (module.js:507:3)
at Module.require (module.js:606:17)
at require (/Users/glenn/github/minimalistic-devserver/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at WEBPACK_OPTIONS (/Users/glenn/github/minimalistic-devserver/node_modules/webpack-cli/bin/convert-argv.js:133:13)
at requireConfig (/Users/glenn/github/minimalistic-devserver/node_modules/webpack-cli/bin/convert-argv.js:135:6)
at /Users/glenn/github/minimalistic-devserver/node_modules/webpack-cli/bin/convert-argv.js:142:17
at Array.forEach (<anonymous>)
at module.exports (/Users/glenn/github/minimalistic-devserver/node_modules/webpack-cli/bin/convert-argv.js:140:15)
at yargs.parse (/Users/glenn/github/minimalistic-devserver/node_modules/webpack-cli/bin/webpack.js:234:39)
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = env => ({});
Node.js v8.9.0
darwin 15.6.0
npm v5.5.1
webpack 4.0.1
mini-css-extract-plugin 0.1.0
During the build, I receive the following messages. Is it okay and if yes, is there a way to disable them?
Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--5-1!node_modules/postcss-loader/lib/index.js??postcss!src/agent/components/login/login.css:
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/index.js??ref--5-1!./node_modules/postcss-loader/lib/index.js??postcss!./src/agent/components/login/login.css] ./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??postcss!./src/agent/components/login/login.css 1.08 KiB {0} [built]
[./node_modules/css-loader/lib/css-base.js] 2.21 KiB {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--5-1!node_modules/postcss-loader/lib/index.js??postcss!src/agent/containers/profile/flag.css:
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/index.js??ref--5-1!./node_modules/postcss-loader/lib/index.js??postcss!./src/agent/containers/profile/flag.css] ./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??postcss!./src/agent/containers/profile/flag.css 571 bytes {0} [built]
[./node_modules/css-loader/lib/css-base.js] 2.21 KiB {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--5-1!node_modules/postcss-loader/lib/index.js??postcss!src/common/components/noteComponent.css:
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/index.js??ref--5-1!./node_modules/postcss-loader/lib/index.js??postcss!./src/common/components/noteComponent.css] ./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??postcss!./src/common/components/noteComponent.css 6.99 KiB {0} [built]
[./node_modules/css-loader/lib/css-base.js] 2.21 KiB {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--5-1!node_modules/postcss-loader/lib/index.js??postcss!src/common/components/typing.css:
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/index.js??ref--5-1!./node_modules/postcss-loader/lib/index.js??postcss!./src/common/components/typing.css] ./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??postcss!./src/common/components/typing.css 2.01 KiB {0} [built]
[./node_modules/css-loader/lib/css-base.js] 2.21 KiB {0} [built]
I'm getting this error when attempting to compile my project for webpack 4 with mini-css-extract-plugin
ERROR in chunk main [entry]
main.e2e70e8fb55738755967.css
Cannot read property 'chunkFilename' of undefined
I don't see any other error details, so I'm not sure where I would even begin to look for the problem.
I've set up mini-css like this:
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[hash].css',
chunkFilename: 'chunk.[chunkhash].css',
}),
],
module: {
rules: [
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, ...cssLoaders, lessLoader],
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, ...cssLoaders],
},
],
},
The loaders look like this if you want to see those too:
let cssLoaders = [
{
loader: 'css-loader',
options: {
sourceMap: cssSourceMaps,
root: publicDir,
localIdentName: '[name]_[local]--[hash:base64:5]',
importLoaders: 2,
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: cssSourceMaps ? 'inline' : false,
}
}
];
let lessLoader = {
loader: 'less-loader',
options: {
sourceMap: cssSourceMaps, // https://github.com/webpack-contrib/less-loader#sourcemaps
strictMath: true,
strictUnits: true,
}
};
I've tried setting the filenames the same as the README too:
filename: "[name].css",
chunkFilename: "[id].css"
But I get the same error.
I've got dozens of .less
files, so I'm not sure which one, if any, is tripping up the plugin.
I am having issues configuring this plugin on mode: 'production'
. The CSS bundle is not generated. However, for some reason everything works as expected if I switch to mode: 'development'
. Is this expected?
Here is a minimal setup to test this out:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');
module.exports = {
mode: 'production',
entry: [
path.resolve(__dirname, 'src/index.js')
],
output: {
filename: '[name].[chunkhash].js'
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[chunkhash].css'
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
}
};
import './styles.css'
body {
background-color: blue;
}
Here is what I am using:
OS: Arch
webpack: 4.1.1
mini-css-extract-plugin: 0.2.0
css-loader: 0.28.10
node: 8.9.4
yarn: 1.5.1
Note: I tried this in a more complicated configuration using html-webpack-plugin
, babel-loader
, etc. Everything works normally on development
, but it doesn't on production
. Let me know if you would like me to provide that configuration as well!
Node 8.9.4 macOS High Sierra 10.13.3
Thanks for this project! It's been great so far.
As noted in the readme, the output options are meant to be similar to those for the main webpack config. However, one difference currently is that directory specifications are chopped off the front for the css plugin, while they're respected for JavaScript. It would be great if it were possible to specify a subdirectory under the main output path for CSS assets.
return {
entry: {
main: './src/index.js',
},
resolve: { extensions: ['.js', '.jsx'] },
output: {
path: __dirname + '/dist',
filename: 'js/[name].js' // <-- JS files end up at ./dist/js/*.js
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin('css/[name].css') // <-- CSS in ./dist/*.css ๐ฒ
]
};
P.S. While writing this up I realized it's possible to get what I want by doing:
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css',
path: __dirname + '/dist/css'
}) // <-- CSS now in ./dist/css/*.css
]
However I would argue the other behavior is still surprising. CSS assets automatically gets placed relative to the main output path if no special path is specified, but not before stripping off meaningful information.
this is mini-css-extract-plugin config:
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
publicPath: "../../../"
})
]
but extract-text-webpack-plugin works as expect:
use: extractStyle.extract({
fallback: "style-loader",
use: [cssLoader],
publicPath: '../../../'
})
Much thanks for this project!
Here my project is a multi-page project, which means that I need my dist directory to be like this:
dist/
|---a/
| |---js/
| | |---a.js
| |---css/
| | |---a.css
| |---html/
| | |---a.html
|---b/
| |---js/
| | |---b.js
| |---css/
| | |---b.css
| |---html/
| | |---b.html
The entry point is 'xxx/js/xxx.js' so the [filename] in mini-css-extract-plugin is 'xxx/js/xxx'.
After webpack build my css files are in the [xxx/js/] directory, not my expectation [xxx/css/] directory.
In extract-text-webpack-plugin [filename] can be a function type and provide a getPath function as its arguments.
Can mini-css-extract-plugin's [filename] support function type like this ?
Or any other suggestion about the above implementation ?
I've the follow example configuration to use mini-css-extract-plugin with Webpack 4:
entry: {
a: ['./js/a.js', './scss/a.scss'],
b: ['./js/b.js', './scss/b.scss']
},
module: {
rules: [
[...],
{
test: /\.(css|sass|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
plugins: () => [
require('autoprefixer')
],
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},
optimization: {
splitChunks: {
cacheGroups: {
js: {
test: /\.js$/,
name: "commons",
chunks: "all",
minChunks: 7,
},
css: {
test: /\.(css|sass|scss)$/,
name: "commons",
chunks: "all",
minChunks: 2,
}
}
}
},
plugins: [
new MiniCssExtractPlugin({
filename: "dist/[name].css",
}),
]
And the following sass files:
// a.scss
@import 'global.scss';
@import 'vendor.css';
[...]
// b.scss
@import 'global.scss';
@import 'vendor.css';
[...]
When I run webpack vendor.css
is inserted in in commons.css
bundle while global.scss
not.
In general every import of .css
file get processed by splitChunks option (only if extension .css
is specified in the name) while .scss
files not.
I have a project with multiple sass entry point and many @import of sass component and I'd like to create a common bundle with shared sass modules.
The chunk of js files works properly.
Is it possible to have multiple JS chunks but a single css output file?
My current setup is:
optimization: {
minimize: true,
minimizer: [
new UglifyJSPlugin({
uglifyOptions: {
compress: {
passes: 2,
},
output: {
comments: false,
},
},
}),
],
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
filename: 'vendorbundle.js',
test: m => /node_modules/.test(m.context),
},
},
},
},
...
...
new MiniCssExtractPlugin({
filename: 'styles.css',
}),
This generates 2 JS files, and 2 css files (styles.css, and 1.styles.css)
What I would like to have is a single css file, is that doable?
Hi, I'm maintaining webpack-subresource-integrity and I'd like to help make the two plugins work together, to ensure integrity for injected link rel="stylesheet"
tags.
For this there would need to be a way for our plugin to add attributes (integrity
and crossorigin
) somewhere around here.
One approach could be a hook that receives an object with the tag name and all attributes. rel
and href
would be needed by our plugin, but I guess for completeness it should also include onload
and onerror
. It would return an object with the same structure. The code would then look something like this:
let tag = {
tagName: 'link',
attributes: {
rel: '"stylesheet"',
onload: 'resolve',
onerror: 'reject',
href: `${mainTemplate.requireFn}.p + ${linkHrefPath}`,
}
};
// up for debate where this hook would be declared, what name to use,
// how to handle backward compatibility etc.
if (compilation.hooks.mutateInjectedTag) {
tag = compilation.hooks.mutateInjectedTag.call(tag);
}
Template.indent([
`var el = document.createElement(${JSON.stringify(tag.tagName)})`
].concat(Object.entries(tag.attributes).map(([name, value]) => (
`el[${JSON.stringify(name)}] = ${value}`
))).concat([
"...",
]);
This aims to be generic, so that it could be used for other plugins that inject tags or that want to modify injected tags.
It's just a suggestion of course, there are other approaches that would also work. But first, what do you think of the general idea, would you accept a PR for this?
Maybe I'm missing something but I can't get the sourcemaps to generate either as a separate file or inline. I'm using the latest webpack (4.1.1) and mini-css-extract-plugin (0.2.0).
Relevant webpack module rules:
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {sourceMap: true},
},
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {sourceMap: true},
},
{
loader: 'sass-loader',
options: {sourceMap: true},
},
]
},
...and plugin:
new MiniCssExtractPlugin({
filename: 'css/styles.css'
}),
Do I need to specify devtool
property also ?
The following files are generated:
1.styles.css
1.styles.css.map
For this webpack config entry:
new MiniCssExtractPlugin({
filename: 'styles.css',
}),
And this css loader setup:
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
minimize: {
discardComments: {
removeAll: true
},
}
}
}
]
}
The same configuration using the ExtractTextPlugin
was generating files without the 1.
prefix
I want to split css by chunk๏ผbut all build into Entrypoint app๏ผgenerate only one css(app.css). This is my config:
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
page:
and has differance css in differance chunk, but it generate only one css:
this is my code:
https://github.com/yiqianglin/webpack4Demo
This may be an anti-pattern to what mini-css-extract-plugin
is trying to accomplish but I'm migrating from Webpack v2 to Webpack v4 in a large React application with many async routes containing CSS modules and extract-text-plugin
is not working correctly. mini-css-extract-plugin
works well but async chunking causes some page load animations, etc. to break because previously all of the CSS was loaded in a single bundle.
I'm wondering if there is an option for the plugin that I can disable CSS chunking until my team has time to address considerations associated with CSS chunking?
Hi.
Testing 0.3.0
with [contenthash]
support. We use [chunkhash]
(now [contenthash]
) only for Nuxt.js production builds so even by renaming files, page level chunks won't invalidate the cache.
While [contenthash]
works great with js, it seems [id].
will be prepended to the name of .css
chunks.
Using [name].[contenthash]
, [id]
won't be prepended:
test/fixtures/extract-css/nuxt.config.js
to force disable name from chunk names ./bin/nuxt build test/fixtures/extract-css
I try to investigate and also provide better reproductions using pure tests.
when build with [email protected]๏ผthe shell show that info๏ผ
const { Template, util: { createHash } } = _webpack2.default;
^
TypeError: Cannot destructure property `createHash` of 'undefined' or 'null'.
I'm trying to get mini-css-extract-plugin to play nicely with react-loadable on the server. Everything seems relatively easy except that when I run Loadable.preloadAll()
on the server, requireEnsure
gets called for every async chunk. If the async chunk has CSS that hasn't been loaded it tries to insert a new link element, a ReferenceError: document is not defined
gets thrown.
I have two modules:
module: {
rules: [{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
]
}],
rules: [{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
'sass-loader',
]
}],
},
When I try to build the following error appears:
Hash: 59c22bb51c79f33f2b5e
Version: webpack 4.1.0
Time: 516ms
Built at: 2018-3-6 12:23:23
2 assets
Entrypoint main = main.css main.5e025217ef78681389a6.js
[1] ./example.scss 39 bytes {0} [built]
[2] ./example.css 157 bytes {0} [built] [failed] [1 error]
[3] ./example.js 49 bytes {0} [built]
+ 1 hidden module
ERROR in ./example.css
Module parse failed: Unexpected token (1:3)
You may need an appropriate loader to handle this file type.
| h2 {
| color: red;
| }
@ ./example.js 1:0-23
Child mini-css-extract-plugin node_modules/mini-css-extract-plugin/dist node_modules/css-loader/index.js??ref--4-1!node_modules/sass-loader/lib/loader.js!example.scss:
Entrypoint mini-css-extract-plugin = *
[1] ./node_modules/css-loader??ref--4-1!./node_modules/sass-loader/lib/loader.js!./example.scss 183 bytes {0} [built]
+ 1 hidden module
Repo with bug reproduction https://github.com/mike1808/webpack-example-mini-extract-bug
Also tested with the master branch, the result is the same
My apologies if this issue is off-base for GitHub - I've previously posted it to Stack Overflow, but it's a little quiet over there.
I'm using the Mini CSS Extract Plugin to split my CSS into its own file in my dist
folder of my webpack project.
My webpack.config.js
file looks like this:
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new MiniCssExtractPlugin({
filename: "style.css"
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
}
};
When I npm run build
, this builds the file style.css
in my dist
folder, which is identical to my style.css
file in my src
folder. I have to include
<head>
...
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
in the head of index.html
in the dist
folder for this to work. So my question is - what's the point of extracting the CSS like this? If the style.css
file in the src
folder is identical to the style.css
file in the dist
folder, and I have to include
<link rel="stylesheet" type="text/css" href="style.css" />
in the head of my HTML, I don't understand what the advantage is of doing things this way, even though the Webpack Documentation states
Note that you can, and in most cases should, split your CSS for better load times in production.
This issue is related to the issue from extract-text-webpack-plugin
How can ensure core.scss
(global style which is included in the entry file) is before greenContainer.scss
(component style which is included in a component file)?
Test repo: https://github.com/choyongjoon/webpack4-css-modules
import React from 'react'
import { render } from 'react-dom'
import App from 'App'
import 'styles/core.scss'
render(
<App />,
document.getElementById('root')
)
:global {
@import '~normalize.css/normalize';
// override-bootstrap
.bg-primary {
background-color: red;
}
}
import React from 'react'
import GreenContainer from 'components/GreenContainer'
export class App extends React.Component {
render () {
return (
<GreenContainer />
)
}
}
export default App
import React from 'react'
import classes from './GreenContainer.scss'
export default class GreenContainer extends React.Component {
render () {
return (
<div className={`bg-primary ${classes.greenContainer}`} />
)
}
}
.greenContainer {
height: 400px;
// override core.scss
background-color: green;
}
.GreenContainer__greenContainer{background-color:green;height:100%}
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
...
.bg-primary{background-color:red}
file: dist/index.js
error: _webpack2.default.Dependency is undefined.
version: [email protected]
I'm using this plugin to extract and inline my critical CSS.
Since the extracted CSS gets inlined in my HTML, it does not have to be loaded anymore.
Can I tell this plugin to not load the CSS it extracted?
If this is not (yet) possible, can it be implemented easily? (I could try and submit a PR)
Otherwise I'll switch back to extract-text-webpack-plugin
.
I'm not sure if this is a bug or omission in the docs (still wrapping my head around all the webpack 4 changes), but the output is not minimized in production mode using the webpack defaults.
I am using the module with Webpack 4.1.0
We have a ui-lib that has some components along with there scss
files.
e.g.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import TanForm from 'ui-lib/src/components/TanForm';
...
render() {
return (
<TanForm />
)
}
I am using the plugin like
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'obsstyles.css',
}),
...
module: {
rules: loaders.concat([
{
test: [/\.scss$/, /\.css$/],
use: [
MiniCssExtractPlugin.loader,
'css-loader', 'sass-loader',
],
include: [
/src/,
/ui-lib/,
],
},
]),
},
The generated css does not contain the classes from the ui-lib
components
Not sure if my setup is wrong or there is a bug. I see many undefined
classes.
It would be useful to have means to define which chunks are loaded dynamically and which are not. I did a small implementation that allows this:
...
module.exports = {
plugins: [
new CssExtractPlugin({
loadAsync: chunk => chunk.modulesSize() >= 200000, // condition
captureCss: CssExtractPlugin.writeManifest('css-extract.json') // action
}),
]
};
I'm not sure of the naming but basically this does the trick for me. I write a manifest which I use later to inline the CSS but you could easily write a CSS file through webpack here as well. You can find my code here.
Let me know if you want a PR.
Using mini-css-extract-plugin 0.2.0 with webpack 4.1.0 with this config and -watch option:
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { url: false, sourceMap: true } }
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { url: false, sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true } }
]
}
]
}
Initial build works fine and outputs css bundle as expected. Whenever i change my scss file, an incremental rebuild is triggered and this changed scss file is clearly shown in the console output, but somehow the emitted css bundle is not changed from the initial build. If i rerun the build from scratch, the changes are correctly propagated to filesystem. Here is an output after incremental rebuild.
> 0% compiling
> 10% building modules 4/4 modules 0 active
> 10% building modules 5/6 modules 1 active ...s\solo-showcase-columns-widget.scss 0
> 10% building modules 7/7 modules 0 active
> 10% building modules 11/11 modules 0 active
> 10% building modules 12/13 modules 1 active ...ures\content-bank\content-bank.scss 0
> 10% building modules 18/18 modules 0 active
> 10% building modules 19/20 modules 1 active ...nd\vendor\custom\sortable\sortable.js
> 11% building modules 27/28 modules 1 active ...nd\vendor\custom\sortable\sortable.js
> 11% building modules 32/33 modules 1 active ...nd\vendor\custom\sortable\sortable.js
> 11% building modules 33/34 modules 1 active ...nd\vendor\custom\sortable\sortable.js
> 11% building modules 44/46 modules 2 active ...tend\features\balance\invoices.scss 0
> 11% building modules 45/47 modules 2 active ...\features\balance\transactions.scss 0
> 12% building modules 46/47 modules 1 active ...nd\vendor\custom\sortable\sortable.js
> 12% building modules 48/49 modules 1 active ...nd\vendor\custom\sortable\sortable.js
> 12% building modules 49/50 modules 1 active ...nd\vendor\custom\sortable\sortable.js
> 12% building modules 49/51 modules 2 active ...works\wizard\step-goal\goal-step.scss
> 12% building modules 61/63 modules 2 active ...works\wizard\step-goal\goal-step.scss
> 12% building modules 67/69 modules 2 active ...works\wizard\step-goal\goal-step.scss
> 13% building modules 79/82 modules 3 active ...wizard\step-budget\budget-step.scss 0
> 13% building modules 82/85 modules 3 active ...udience-popup\persist-audience.scss 0
> 13% building modules 84/86 modules 2 active ...works\wizard\step-goal\goal-step.scss
> 14% building modules 96/99 modules 3 active ...nents\file-input\sm-file-input.scss 0
> 14% building modules 97/99 modules 2 active ...works\wizard\step-goal\goal-step.scss
> 14% building modules 109/111 modules 2 active ...works\wizard\step-goal\goal-step.scss
> 14% building modules 111/114 modules 3 active ...d\vendor\custom\introjs\introjs.css 0
> 14% building modules 112/114 modules 2 active ...works\wizard\step-goal\goal-step.scss
> 14% building modules 113/114 modules 1 active ...works\wizard\step-goal\goal-step.scss
> 70% finish module graph FlagDependencyExportsPlugin
> 70% sealing WarnCaseSensitiveModulesPlugin
> 72% after dependencies optimization
> 75% basic chunk optimization RemoveParentModulesPlugin
> 76% advanced chunk optimization SplitChunksPlugin
> 75% basic chunk optimization RemoveParentModulesPlugin
> 84% module id optimization
> 86% after chunk id optimization
> 88% hashing
> 90% additional chunk assets processing
> 95% emitting unnamed compat plugin
> Hash: bf05be2f878f02734bcc
> Version: webpack 4.1.0
> Time: 478ms
> Built at: 2018-3-7 18:16:56
> Asset Size Chunks Chunk Names
> en.json 150 KiB [emitted]
> es.json 157 KiB [emitted]
> ru.json 156 KiB [emitted]
> pt-BR.json 158 KiB [emitted]
> + 38 hidden assets
> Entrypoint solomoto [big] = runtime.js vendor.css vendor.js solomoto.css solomoto.js
> Entrypoint showcase [big] = runtime.js vendor.css vendor.js showcase.css showcase.js
> Entrypoint showcase-wysiwyg = runtime.js showcase-wysiwyg.css showcase-wysiwyg.js
> Entrypoint registration [big] = runtime.js vendor.css vendor.js registration.css registration.js
> Entrypoint admin-panel [big] = runtime.js vendor.css vendor.js vendor-admin.js admin-panel.css admin-panel.js
> Entrypoint content-panel [big] = runtime.js vendor.css vendor.js vendor-admin.js content-panel.css content-panel.js
> [./Frontend/features/media/social-networks/wizard/step-goal/goal-step.scss] 39 bytes {solomoto} [built]
> [./Frontend/vendor/custom/sortable/sortable.js] 36 KiB {vendor} [built]
> + 1378 hidden modules
> Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--7-1!node_modules/sass-loader/lib/loader.js??ref--7-2!Frontend/features/media/social-networks/wizard/step-goal/goal-step.scss:
> Entrypoint mini-css-extract-plugin = *
> [./node_modules/css-loader/index.js??ref--7-1!./node_modules/sass-loader/lib/loader.js??ref--7-2!./Frontend/features/media/social-networks/wizard/step-goal/goal-step.scss] ./node_modules/css-loader??ref--7-1!./node_modules/sass-loader/lib/loader.js??ref--7-2!./Frontend/features/media/social-networks/wizard/step-goal/goal-step.scss 23.9 KiB {mini-css-extract-plugin} [built]
> + 1 hidden module
I'm stuck because of public path issue, the fix was merged yesterday, please publish a new version to reflect the same.
Thanks.
Let mini-css-extract-plugin support HMR as soon as possible
The extract-webpack-text-plugin allows you to define multiple instances of the plugin. Does MiniCssExtractPlugin support the same feature? My end goal is to generate multiple bundles for SASS themes.
with sass-loader i was able to do something like this to add a resource file to all my scss files
is that possible with this as well? and im just missing it?
{
loader: 'sass-loader',
options: {
data: '@import "styles/resources";',
includePaths: [path.join(cwd, 'app')],
},
},```
Using an app with a router, which splits code per route and has publicPath: '/'
in its output options, I'm seeing the following inserted into <head>
when visiting a route which imports CSS:
If I log out outputOptions
in loader.js
it looks ok, but don't know what's ultimately responsible for creating the full path in the compilation.createChildCompiler
or NodeTemplatePlugin
it gets passed to:
{ outputOptions: { filename: '*', publicPath: '/' } }
I have reported an issue on css-hot-loader
I added it here too because I cannot understand which one is creating the problem.
What is certain is that css-hot-loader
did work with the ExtractTextPlugin
I saw in the TODO that this is planned, but there is no opened issue related to it, I wouldn't have reported it otherwise!
I have two entry, one for javascript bundling, one for css bundling, I use this plugin for extracting css, everything is OK except generating a unnecessary styles.af6d7e48e7.js
file in my dist/js folder.
Environment
- macOS 10.13.3
- node v9.6.1
- yarn v1.3.2
Webpack entry
PATH.entry = {
bundle: './src/index.js',
styles: './src/styles/main.css',
};
Dist structure
ritchie at MacBook-Air in ~/D/W/w/dist
โช tree
.
โโโ css
โย ย โโโ styles.af6d7e48e7.css
โย ย โโโ styles.af6d7e48e7.css.map
โโโ favicon.ico
โโโ fonts
โย ย โโโ lobster.58a4085516.woff2
โย ย โโโ lobster.e7f8a498bc.woff
โโโ img
โย ย โโโ logo.89088456bc.png
โโโ index.html
โโโ js
โย ย โโโ bundle.32992ee976.js
โย ย โโโ bundle.32992ee976.js.map
โย ย โโโ dll.manifest.json
โย ย โโโ styles.af6d7e48e7.js
โย ย โโโ styles.af6d7e48e7.js.map
โย ย โโโ vendor.decae7f1b9.dll.js
โย ย โโโ vendor.decae7f1b9.dll.js.map
โย ย โโโ vendor.dll.manifest.json
โโโ manifest.json
โโโ robots.txt
I use webpack-manifest-plugin to generat assets manifest.json
for backend reference, the unnecessary styles.af6d7e48e7.js
is in the manifest.json
. I can't use filter
to remove files like styles.af6d7e48e7.js
because the output filename is depending on entry name.
Example repo
Clone the example repo and run yarn install
and yarn start
will get the same dist structure above.
My problem
Any idea for not generating files like styles.af6d7e48e7.js
, or remove these unnecessary files from dist and manifest.json?
Testing with webpack v4.0.1 :
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { modules: true } }
]
}
When requiring css file, it always get empty object:
const styles = require('xxx.css'); // always get {} even it is not.
In Gatsby v2, we'll be using webpack 4 and mini-css-extract-plugin. Gatsby tries to always inline the critical CSS for a page โ which aligns perfectly with mini-css-extract-plugin's goals. Currently, however, if we inline a CSS chunk, it'll still be loaded once the webpack runtime loads in the client. Discussing this with @sokra, he suggested that we'd adopt a convention where if you add a data-href
to the <style>
tag that then webpack wouldn't reload the inlined css.
Plugin supports modules/postcss?
~/D/P/M/frontend ยป yarn build:prod
yarn run v1.3.2
$ NODE_ENV=production webpack
(node:3898) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:3898) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
Unhandled rejection TypeError: Cannot read property 'length' of undefined
at OriginalSource.size (/home/ralvke/.../frontend/node_modules/webpack-sources/lib/Source.js:17:23)
at ConcatSource.size (/home/ralvke/.../frontend/node_modules/webpack-sources/lib/ConcatSource.js:52:61)
at CachedSource.size (/home/ralvke/.../frontend/node_modules/webpack-sources/lib/CachedSource.js:35:42)
at obj.assets.compilationAssets.map.asset (/home/ralvke/.../frontend/node_modules/webpack/lib/Stats.js:347:39)
at Array.map (<anonymous>)
at Stats.toJson (/home/ralvke/.../frontend/node_modules/webpack/lib/Stats.js:344:6)
at Stats.toString (/home/ralvke/.../frontend/node_modules/webpack/lib/Stats.js:621:20)
at compilerCallback (/home/ralvke/.../frontend/node_modules/webpack-cli/bin/webpack.js:477:32)
at hooks.done.callAsync.err (/home/ralvke/.../frontend/node_modules/webpack/lib/Compiler.js:152:13)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/ralvke/.../frontend/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/home/ralvke/.../frontend/node_modules/tapable/lib/Hook.js:35:21)
at onCompiled (/home/ralvke/.../frontend/node_modules/webpack/lib/Compiler.js:150:21)
at hooks.afterCompile.callAsync.err (/home/ralvke/.../frontend/node_modules/webpack/lib/Compiler.js:470:14)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/ralvke/.../frontend/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/home/ralvke/.../frontend/node_modules/tapable/lib/Hook.js:35:21)
at compilation.seal.err (/home/ralvke/.../frontend/node_modules/webpack/lib/Compiler.js:467:30)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/ralvke/.../frontend/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/home/ralvke/.../frontend/node_modules/tapable/lib/Hook.js:35:21)
at hooks.optimizeAssets.callAsync.err (/home/ralvke/.../frontend/node_modules/webpack/lib/Compilation.js:957:35)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/ralvke/.../frontend/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/home/ralvke/.../frontend/node_modules/tapable/lib/Hook.js:35:21)
at hooks.optimizeChunkAssets.callAsync.err (/home/ralvke/.../frontend/node_modules/webpack/lib/Compilation.js:948:32)
at _err1 (eval at create (/home/ralvke/.../frontend/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:16:1)
at /home/ralvke/.../frontend/node_modules/uglifyjs-webpack-plugin/dist/index.js:262:11
at step (/home/ralvke/.../frontend/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:90:11)
at done (/home/ralvke/.../frontend/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:99:22)
at tryCatcher (/home/ralvke/.../frontend/node_modules/bluebird/js/release/util.js:16:23)
at Promise._settlePromiseFromHandler (/home/ralvke/.../frontend/node_modules/bluebird/js/release/promise.js:512:31)
at Promise._settlePromise (/home/ralvke/.../frontend/node_modules/bluebird/js/release/promise.js:569:18)
at Promise._settlePromise0 (/home/ralvke/.../frontend/node_modules/bluebird/js/release/promise.js:614:10)
at Promise._settlePromises (/home/ralvke/.../frontend/node_modules/bluebird/js/release/promise.js:693:18)
at Promise._fulfill (/home/ralvke/.../frontend/node_modules/bluebird/js/release/promise.js:638:18)
at Promise._resolveCallback (/home/ralvke/.../frontend/node_modules/bluebird/js/release/promise.js:432:57)
at Promise._settlePromiseFromHandler (/home/ralvke/.../frontend/node_modules/bluebird/js/release/promise.js:524:17)
at Promise._settlePromise (/home/ralvke/.../frontend/node_modules/bluebird/js/release/promise.js:569:18)
at Promise._settlePromise0 (/home/ralvke/.../frontend/node_modules/bluebird/js/release/promise.js:614:10)
Done in 83.93s.
plugins: [new MiniCssExtractPlugin()],
rules: [
{
test: /\.sss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: true,
localIdentName: "[hash:base64:8]"
}
},
{loader: "postcss-loader"}
]
},
]
Node: 9.6.1
Yarn: 1.3.2
Webpack: 4.1.0
mini-css-extract-plugin: 0.1.0
https://github.com/JounQin/Rubick/blob/assets/static/app.029a1ec171ca216e26b5.css#L3
sourceMappingURL is not removed.
webpack Configuration: https://github.com/JounQin/Rubick/blob/master/build/base.ts
Reproduction Step: yarn build
and view app.*.css
file in dist/static
folder.
Hello! I'm using this plugin with webpack 4 splitChunks option configured to extract vendor code to a separate chunk like this:
optimization:{
splitChunks: {
chunks: "all",
minSize: 1000,
minChunks: 1,
maxAsyncRequests: 10,
maxInitialRequests: 10,
name: true,
cacheGroups: {
default: false,
vendors: {
name: 'vendor',
test: /node_modules[\\/]/,
priority: 3
}
}
}
}
It looks like this plugin does not honour this configuration and does not extract vendor css into separate file. Instead it adds vendor styles into every entrypoint css file, which leads to css duplication between several entrypoints. I'm not sure if this is an expected behavior or a bug. I could provide a simple reproduction repo if it's needed.
Hi,
Right now when I use this plugin my bundle ends up having a bunch of these:
function(e, t, n) {
e.exports = {
home: "home_4zXj",
headerContents: "headerContents_fgfT",
info: "info_SpI-",
dcmp: "dcmp_7LbX",
cmp: "cmp_FYP2",
pre: "pre_1JF_",
off: "off_2kzf",
adminPanel: "adminPanel_VjUM",
navigationDrawerButtonContainer: "navigationDrawerButtonContainer_Gjyw",
navigationDrawerButton: "navigationDrawerButton_11km"
};
}
Since this does not use es6 exports and instead uses module.exports
, webpack is unable to inline these. If this plugin did use es6 exports, my bundle size would be much smaller because they could be inlined:
Code coming out of this plugin:
export const home = "home_4zXj";
export const headerContents = "headerContents_fgfT";
export const info = "info_SpI-";
// etc.
export default {
home: "home_4zXj",
headerContents: "headerContents_fgfT",
info: "info_SpI-",
dcmp: "dcmp_7LbX",
cmp: "cmp_FYP2",
pre: "pre_1JF_",
off: "off_2kzf",
adminPanel: "adminPanel_VjUM",
navigationDrawerButtonContainer: "navigationDrawerButtonContainer_Gjyw",
navigationDrawerButton: "navigationDrawerButton_11km"
};
Then, after Webpack processes it, the css module would be inlined, and unused properties would be removed.
I made a fork of extract-text-webpack-plugin
that does this: webpack-contrib/extract-text-webpack-plugin@master...calebeby:master
Would you accept a similar PR to this repo?
Thanks!!!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.