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

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)$/,