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
parent
c8cb2692dd
commit
069d0e48c1
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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)$/,
|
||||
|
|
Loading…
Reference in New Issue