<link rel="stylesheet" type="text/css" href="scss/styles.scss">
<link rel="stylesheet" type="text/css" href="css/styles.css">
/*webpackconfig.js*/
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin=require("mini-css-extract-plugin");
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: {
app:'./src/index.js'
},
output: {
path: path.join(__dirname, "/dist"),
publicPath:'',
filename: "main.js"
},
mode: 'development',
devServer: {
contentBase: path.join(__dirname, 'dist'),
// compress: true,
writeToDisk: true,
open:true,
port: 58134,
},
module: {
rules: [
{//require("expose-loader?jquery!jquery"),
test: require.resolve("jquery"),
loader: "expose-loader",
options: {
exposes: ["$", "jQuery"],
},
},
{ // /\.css$/,
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath:'../'
}
},
"css-loader",
'sass-loader',
/*{
loader: "sass-loader",
options: {
implementation: require("sass"),
sassOptions: {
fiber: false,
},
},
}, */
],
},
{
test: /\.(png|svg|jpe?g|gif)$/,
use: [
{
loader: "file-loader",
options: {
name: '[name].[ext]',
outputPath: "images",
}
}
]
},
{
test: /\.(svg|eot|woff|woff2|ttf)$/,
use: [
{
loader: "file-loader",
options: {
name: '[name].[ext]',
outputPath: "fonts",
esModule: false,
}
}
]
},
{
test: /\.html$/,
use:[
{
loader: 'html-loader',
options: {
minimize: true,
},
},
]
},
],
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "./src/index.html",
}),
new MiniCssExtractPlugin({filename:"css/style.css"}),
new OptimizeCssAssetsPlugin({})
],
};
``
/*package.json*/
{
"name": "saferny",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^5.2.0",
"file-loader": "^6.2.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^5.3.0",
"jquery": "^3.6.0",
"mini-css-extract-plugin": "^1.4.0",
"node-sass": "^5.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"popper.js": "^1.16.1",
"style-loader": "^2.0.0",
"webpack": "^5.30.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.3",
"@laylazi/bootstrap-rtl-scss": "^4.6.0-1",
"bootstrap": "^4.6.0",
"bootstrap-v4-rtl": "^4.6.0-2",
"expose-loader": "^2.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"jquery.animate": "^1.8.9",
"resolve-url-loader": "^3.1.3",
"sass": "^1.32.12",
"sass-loader": "^11.0.1"
}
}
import './scss/styles.scss';
import './css/style.css';
//import '../node_modules/@laylazi/bootstrap-rtl-scss/scss/bootstrap-rtl.scss';
import 'bootstrap-v4-rtl/dist/css/bootstrap.min.css';
import 'jquery/dist/jquery.min';
import 'popper.js/dist/popper.min';
import 'bootstrap/dist/js/bootstrap.min.js';
import '@fortawesome/fontawesome-free/js/all.min';
import 'jquery.animate';
import 'jquery';
ERROR in Error: Child compilation failed: No template for dependency: CssDependency CodeGenerationError: No template for dependency: CssDependency
Compilation.js:2623 [safernyy]/[webpack]/lib/Compilation.js:2623:18
Cache.js:91 [safernyy]/[webpack]/lib/Cache.js:91:34
...
2 ERRORS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details) webpack 5.30.0 compiled with 7 errors in 5684 ms i ｢wdm｣: Failed to compile.