- Как правильно добавить
laravel-mix-criticalcss к моим webpack.mix.js?
Можете ли вы помочь мне с этим?
Потому что я не получаю Это. Не могу найти ничего похожего с моим делом
Как добавить
{{ mix('css/styles.css') }} в мой файл мопса?
webpack.mix. js
const mix = require("laravel-mix");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const autoprefixer = require("autoprefixer");
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
// var LiveReloadPlugin = require("webpack-livereload-plugin");
// mix.sassResources("resources/scss/_variables.scss");
mix.webpackConfig({
optimization: {
minimize: true,
runtimeChunk: {
name: "commons"
},
splitChunks: {
cacheGroups: {
styles: {
name: "styles",
test: /\.s?css$/,
chunks: "all",
enforce: true,
minChunks: 1,
name: "css/style",
filename: "css/styles.js",
reuseExistingChunk: true
},
commons: {
test: /\.jsx?$/,
chunks: "all",
minChunks: 2,
name: "commons",
filename: "commons.js",
enforce: true,
reuseExistingChunk: true
}
}
}
},
plugins: [
new MiniCssExtractPlugin({
// filename: "style.css",
ignoreOrder: false // Enable to remove warnings about conflicting order
})
],
module: {
rules: [{
test: /\.(sa|sc|c)ss$/,
use: [{
loader: MiniCssExtractPlugin.loader
},
"css-loader",
{
loader: "resolve-url-loader"
},
"sass-loader",
{
loader: "postcss-loader",
options: {
plugins: [
autoprefixer({
// browsers: ["ie >= 8", "last 4 version"]
})
],
sourceMap: false
}
},
{
loader: "sass-resources-loader",
options: {
resources: [
"resources/scss/_variables.scss",
"resources/scss/_mixins.scss"
]
}
}
]
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
plugins: [
"@babel/plugin-proposal-class-properties",
[
"@babel/plugin-transform-runtime",
{
regenerator: true
}
]
]
}
}
},
{
test: /\.pug$/,
loader: "pug-loader",
options: {
globals: true,
// alias: { components: path.resolve(__dirname, "src/components") },
pretty: true
}
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false,
},
webp: {
quality: 75
}
}
},
],
}
]
}
});
mix.js("resources/views/frontend/pages/index/index.js", "public/js/index.js");
mix.js("resources/views/frontend/pages/about/about.js", "public/js/about.js");
mix.js("resources/views/frontend/pages/login/login.js", "public/js/login.js");
mix.js("resources/views/frontend/pages/forgot-pass/forgot-pass.js", "public/js/forgot-pass.js");
mix.js("resources/views/frontend/pages/registration/registration.js", "public/js/registration.js");
mix.js("resources/views/frontend/pages/registration-ok/registration-ok.js", "public/js/registration-ok.js");
mix.js("resources/views/frontend/pages/restore-pass/restore-pass.js", "public/js/restore-pass.js");
mix.js("resources/views/frontend/pages/cabinet-action/cabinet-action.js", "public/js/cabinet-action.js");
mix.js("resources/views/frontend/pages/cabinet-basket/cabinet-basket.js", "public/js/cabinet-basket.js");
mix.js("resources/views/frontend/pages/cabinet-favorites/cabinet-favorites.js", "public/js/cabinet-favorites.js");
mix.js("resources/views/frontend/pages/cabinet-events/cabinet-events.js", "public/js/cabinet-events.js");
mix.js("resources/views/frontend/pages/cabinet-settings/cabinet-settings.js", "public/js/cabinet-settings.js");
mix.js("resources/views/frontend/pages/cabinet-history/cabinet-history.js", "public/js/cabinet-history.js");
mix.js("resources/views/frontend/pages/cabinet-study/cabinet-study.js", "public/js/cabinet-study.js");
mix.js("resources/views/frontend/pages/cabinet-chat/cabinet-chat.js", "public/js/cabinet-chat.js");
mix.js("resources/views/frontend/pages/pages-guide/pages-guide.js", "public/js/pages-guide.js");
mix.js("resources/views/frontend/pages/events/events.js", "public/js/events.js");
mix.js("resources/views/frontend/pages/blog/blog.js", "public/js/blog.js");
mix.js("resources/views/frontend/pages/products/products.js", "public/js/products.js");
mix.js("resources/views/frontend/pages/faq/faq.js", "public/js/faq.js");
mix.js("resources/views/frontend/pages/privacy-policy/privacy-policy.js", "public/js/privacy-policy.js");
mix.js("resources/views/frontend/pages/using-rules/using-rules.js", "public/js/using-rules.js");
mix.js("resources/views/frontend/pages/cookies/cookies.js", "public/js/cookies.js");
mix.js("resources/views/frontend/pages/blog-open/blog-open.js", "public/js/blog-open.js");
mix.js("resources/views/frontend/pages/404/404.js", "public/js/404.js");
mix.js("resources/views/frontend/pages/advantage/advantage.js", "public/js/advantage.js");
mix.js("resources/views/frontend/pages/collection/collection.js", "public/js/collection.js");
mix.js("resources/views/frontend/pages/collections/collections.js", "public/js/collections.js");
mix.js("resources/views/frontend/pages/ingredients/ingredients.js", "public/js/ingredients.js");
mix.js("resources/views/frontend/pages/contacts/contacts.js", "public/js/contacts.js");
mix.js("resources/views/frontend/pages/where-to-buy/where-to-buy.js", "public/js/where-to-buy.js");
mix.js("resources/views/frontend/pages/how-to-buy/how-to-buy.js", "public/js/how-to-buy.js");
mix.js("resources/views/frontend/pages/team/team.js", "public/js/team.js");
mix.js("resources/views/frontend/pages/style-guide/style-guide.js", "public/js/style-guide.js");
mix.js("resources/views/frontend/pages/search-result/search-result.js", "public/js/search-result.js");
mix.js("resources/views/frontend/pages/how-to-buy-partners/how-to-buy-partners.js", "public/js/how-to-buy-partners.js");
mix.js("resources/views/frontend/pages/event/event.js", "public/js/event.js");
mix.js("resources/views/frontend/pages/reviews/reviews.js", "public/js/reviews.js");
mix.js("resources/views/frontend/pages/product/product.js", "public/js/product.js");
mix.js("resources/views/frontend/pages/product-mob-preview/product-mob-preview.js", "public/js/product-mob-preview.js");
mix.js("resources/views/frontend/pages/product-mob-detail/product-mob-detail.js", "public/js/product-mob-detail.js");
mix.copyDirectory("resources/assets/images", "public/images");
mix.copyDirectory("resources/assets/fonts", "public/fonts");
пакет. json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"@babel/core": "^7.8.3",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/preset-env": "^7.8.3",
"autoprefixer": "^9.7.4",
"axios": "^0.19.1",
"babel-loader": "^8.0.6",
"browser-sync": "^2.26.7",
"browser-sync-webpack-plugin": "^2.0.1",
"cross-env": "^5.2.1",
"css-loader": "^3.4.1",
"image-webpack-loader": "^6.0.0",
"laravel-mix": "^4.0.7",
"laravel-mix-criticalcss": "^1.0.1",
"lodash": "^4.17.13",
"mini-css-extract-plugin": "^0.8.2",
"node-sass": "^4.13.0",
"postcss-loader": "^3.0.0",
"resolve-url-loader": "^3.1.1",
"sass": "^1.24.4",
"sass-loader": "^7.1.0",
"sass-resources-loader": "^2.0.1",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.41.5"
},
"dependencies": {
"flatpickr": "^4.6.3",
"jquery": "^3.4.1",
"lazysizes": "^5.2.0",
"pixi.js": "^5.2.0",
"pixi.js-legacy": "^5.2.0",
"slick-carousel": "^1.8.1"
}
}
Ссылка на npm laravel -микритический css npm laravel -критический css