WIP: use mini-css-extract-plugin instead of extract-text, to work with dynamic import. Currently outputting only one css and recipe highlight doesnt work

This commit is contained in:
d98762625 2019-02-01 12:00:45 +00:00
parent c8cb2692dd
commit 069d0e48c1
3 changed files with 80 additions and 18 deletions

24
package-lock.json generated
View file

@ -8349,6 +8349,30 @@
"dom-walk": "^0.1.0"
}
},
"mini-css-extract-plugin": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz",
"integrity": "sha512-IuaLjruM0vMKhUUT51fQdQzBYTX49dLj8w68ALEAe2A4iYNpIC4eMac67mt3NzycvjOlf07/kYxJDc0RTl1Wqw==",
"dev": true,
"requires": {
"loader-utils": "^1.1.0",
"schema-utils": "^1.0.0",
"webpack-sources": "^1.1.0"
},
"dependencies": {
"schema-utils": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
"integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
"dev": true,
"requires": {
"ajv": "^6.1.0",
"ajv-errors": "^1.0.0",
"ajv-keywords": "^3.1.0"
}
}
}
},
"minimalistic-assert": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",

View file

@ -41,7 +41,6 @@
"css-loader": "^2.1.0",
"eslint": "^5.11.1",
"exports-loader": "^0.7.0",
"extract-text-webpack-plugin": "^4.0.0-alpha0",
"file-loader": "^3.0.1",
"grunt": "^1.0.3",
"grunt-accessibility": "~6.0.0",
@ -59,6 +58,7 @@
"imports-loader": "^0.8.0",
"ink-docstrap": "^1.3.2",
"jsdoc-babel": "^0.5.0",
"mini-css-extract-plugin": "^0.5.0",
"nightwatch": "^1.0.18",
"node-sass": "^4.11.0",
"postcss-css-variables": "^0.11.0",

View file

@ -1,5 +1,6 @@
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
/**
@ -31,8 +32,13 @@ const banner = `/**
* limitations under the License.
*/`;
const vendorCSS = new ExtractTextPlugin("vendor.css");
const projectCSS = new ExtractTextPlugin("styles.css");
// const vendorCSS = new MiniCssExtractPlugin({
// filename: "[name].css",
// });
// const projectCSS = new MiniCssExtractPlugin({
// filename: "styles.css",
// chunkFileName: "styles.css",
// });
module.exports = {
plugins: [
@ -49,14 +55,36 @@ module.exports = {
new webpack.DefinePlugin({
"process.browser": "true"
}),
vendorCSS,
projectCSS
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
}),
],
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
},
// optimization: {
// splitChunks: {
// cacheGroups: {
// styles: {
// name: "styles",
// test: /\.css$/,
// // test: (module,c,entry = 'foo') => module.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
// chunks: "all",
// enforce: true
// },
// vendor: {
// name: "vendor",
// test: /\.scss$/,
// chunks: "all",
// enforce: true,
// },
// }
// }
// },
module: {
rules: [
{
@ -80,21 +108,31 @@ module.exports = {
},
{
test: /\.css$/,
use: projectCSS.extract({
use: [
{ loader: "css-loader" },
{ loader: "postcss-loader" },
]
})
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
]
// use: projectCSS.extract({
// use: [
// { loader: "css-loader" },
// { loader: "postcss-loader" },
// ]
// })
},
{
test: /\.scss$/,
use: vendorCSS.extract({
use: [
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
})
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
]
// use: vendorCSS.extract({
// use: [
// { loader: "css-loader" },
// { loader: "sass-loader" }
// ]
// })
},
{
test: /\.(ico|eot|ttf|woff|woff2)$/,