I am upgrading my webpack from 4 to 5 , when i run webpack command
webpack --progress --config webpack.config.js
the progress stalls at
Build stalls at 10% building 0/1 entries 1/1 dependencies 0/1 modules.
This was working fine till i was using webpack 4. I have updated the rules as per the new format for respective headers. THer is no error or warning that printed on the console. It just stalls.
Please find my package.json file
{
"name": "deploy",
"version": "0.0.0",
"dependencies": {
"#khanacademy/react-multi-select": "^0.3.3",
"axios": "^0.21.1",
"backbone": "1.2.3",
"bootstrap": "^4.5.3",
"bootstrap-select": "^1.13.12",
"d3": "^3.3.11",
"eonasdan-bootstrap-datetimepicker": "4.17.47",
"file-saver": "1.3.3",
"formsy-react": "0.19.5",
"globalize": "^1.4.2",
"highcharts": "^9.1.0",
"intl-tel-input": "^17.0.12",
"jquery": "^3.5.1",
"jquery-contextmenu": "2.7.1",
"jquery-jsonview": "1.2.3",
"jstree": "3.3.7",
"leaflet": "1.3.4",
"less": "2.3.1",
"moment": "^2.29.1",
"noVNC": "git://github.com/novnc/noVNC.git#v0.6.2",
"popper.js": "^1.16.1",
"prop-types": "^15.7.2",
"rc-slider": "8.6.9",
"react": "^16.13.1",
"react-codemirror": "1.0.0",
"react-custom-scrollbars": "4.2.1",
"react-dnd": "^14.0.2",
"react-dnd-html5-backend": "^14.0.0",
"react-dom": "^16.13.1",
"react-dropzone": "3.13.4",
"react-json-editor-ajrm": "^2.5.13",
"react-modal": "^3.11.2",
"react-redux": "^7.2.1",
"react-table": "^7.7.0",
"react-tabs": "^3.1.1",
"react-tag-autocomplete": "^6.1.0",
"react-tagsinput": "^3.19.0",
"react-transition-group": "1.2.0",
"react-widgets": "^4.4.11",
"react-widgets-globalize": "^5.0.20",
"react-widgets-moment": "^4.0.27",
"recharts": "^2.0.0-beta.1",
"redux": "^4.0.5",
"redux-form": "^8.3.6",
"redux-thunk": "^2.3.0",
"save": "^2.4.0",
"text-security": "^1.2.0",
"why-did-you-update": "^1.0.8"
},
"browserslist": [
"defaults",
"ie >= 9",
"Firefox >= 45",
"Chrome >= 48",
"Safari >= 10"
],
"devDependencies": {
"#babel/cli": "7.14.3",
"#babel/core": "7.14.3",
"#babel/plugin-proposal-class-properties": "7.2.1",
"#babel/plugin-proposal-decorators": "7.1.6",
"#babel/plugin-proposal-object-rest-spread": "7.0.0",
"#babel/preset-env": "^7.8.4",
"#babel/preset-react": "^7.8.3",
"#babel/preset-stage-1": "7.0.0-beta.40",
"#storybook/react": "^6.2.9",
"babel-eslint": "^10.0.3",
"babel-jest": "^26.6.3",
"babel-loader": "8.2.2",
"babel-plugin-transform-decorators-legacy": "1.3.5",
"copy-webpack-plugin": "^9.0.0",
"cross-env": "^7.0.3",
"css-loader": "^5.2.4",
"dust-loader": "1.3.0",
"dustjs-helpers": "1.7.4",
"dustjs-linkedin": "^2.7.5",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-plugin-flowtype": "^4.6.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.18.3",
"eslint-plugin-react-hooks": "^1.7.0",
"expose-loader": "0.7.5",
"file-loader": "2.0.0",
"jest": "^26.6.3",
"less-loader": "4.1.0",
"lodash": "^4.17.21",
"mini-css-extract-plugin": "1.6.0",
"npm-run-all": "4.1.5",
"raw-text-loader": "0.1.1",
"replace-hash-in-file-webpack-plugin": "1.0.8",
"scriptjs": "2.5.9",
"style-loader": "0.23.1",
"unused-files-webpack-plugin": "^3.4.0",
"url-loader": "1.1.2",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.2"
},
Here is the webpack file
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ReplaceHashInFileWebpackPlugin = require('replace-hash-in-file-webpack-plugin');
const brandingDefinePlugin = require('./configs/plugins');
const env = process.env.NODE_ENV;
const config = {
entry: [
"./src/main/webapp/app/scripts/index.js"
],
output: {
path: path.resolve(__dirname, "build"),
filename: env !== "development" ? '[name]-[hash].js' : '[name]-dev.js'
},
module: {
rules: [
{
test:/\.m?js$/,
loader: "babel-loader",
options:{
exclude: /(node_modules|bower_components)/,
compact: false
}
//query: {compact: false}
},
{
test: /\.dust$/,
use: [{
loader: "dust-loader",
options: {
rootDir: './src/main/webapp/app/scripts/templates'
}
}]
},
{
test: require.resolve('highcharts'),
use: [{
loader: 'expose-loader',
options: 'Highcharts'
}]
},
{
test: require.resolve('underscore'),
use: [{
loader: 'expose-loader',
options: '_'
}]
},
{
test: path.resolve(__dirname, './src/main/webapp/app/scripts/app'),
use: [{
loader: 'expose-loader',
options: 'app'
}]
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
//importLoaders: 1,
sourceMap: env === 'development',
url: false,
//context: '../',
}
},
]
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
},
{
test: /\.(jpg|jpeg|gif|png|svg)$/,
use: [{
loader: 'file-loader?name=../../images/[name].[ext]'
}]
},
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
use: [{
loader: 'url-loader?name=fonts/[name].[ext]'
}]
//loader: 'url-loader?name=fonts/[name].[ext]'
},
]
},
stats: {
colors: true,
errorDetails: true
},
externals: {
'jquery': 'jQuery'
},
resolve: {
extensions: ['.js', '.jsx'],
modules: ['node_modules', 'bower_components'],
descriptionFiles: ['package.json', 'bower.json'],
alias: {
'jquery-i18n': path.resolve(__dirname, "./src/main/webapp/app/scripts/vendor/jquery.i18n.properties-1.0.9"),
'jquery-ui': path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/jquery-ui'),
"bootstrap-datetimepicker": path.resolve(__dirname, "./src/main/webapp/app/scripts/vendor/bootstrap-datetimepicker.min"),
mousewheel: path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/jquery.mousewheel'),
atmosphere: path.resolve(__dirname, './src/main/webapp/app/bower_components/jquery.atmosphere/jquery.atmosphere'),
x2js: path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/xml2json.min'),
helpers: path.resolve(__dirname, './src/main/webapp/app/scripts/helpers'),
jscrollpane: path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/jquery.jscrollpane'),
jqgridlocale: path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/grid.locale-en'),
'jqgrid': path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/jquery.jqGrid.js'),
idleTimer: path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/idle-timer.min'),
'jquery-tag-it': path.resolve(__dirname,'./src/main/webapp/app/bower_components/jquery-tagit/js/tag-it'),
jsonview: path.resolve(__dirname, './node_modules/jquery-jsonview/dist/jquery.jsonview'),
gridster: path.resolve(__dirname, './src/main/webapp/app/bower_components/gridster/src/jquery.gridster.js'),
'jquery-ui-multiselect-widget': path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/jquery.multiselect'),
'file-saver': path.resolve(__dirname, './node_modules/file-saver/FileSaver.min'),
jqueryTimeDuration: path.resolve(__dirname, './src/main/webapp/app/bower_components/jquery-time-duration-picker/src/jquery-time-duration-picker'),
'jQuery-contextMenu': path.resolve(__dirname, './src/main/webapp/app/bower_components/jQuery-contextMenu/dist/jquery.contextMenu.js'),
applicationTemplates: path.resolve(__dirname, './src/main/webapp/app/scripts/applicationTemplates'),
dust: path.resolve(__dirname, './node_modules/dustjs-linkedin/lib/dust'),
'dust.core': 'dustjs-linkedin',
'dust.parse': path.resolve(__dirname, './node_modules/dustjs-linkedin/lib/parser'),
dustCompiler: path.resolve(__dirname, './node_modules/dustjs-linkedin/lib/compiler'),
dustHelpers: 'dustjs-helpers',
app: path.resolve(__dirname, './src/main/webapp/app/scripts/app'),
routes: path.resolve(__dirname, './src/main/webapp/app/scripts/routes'),
collections: path.resolve(__dirname, './src/main/webapp/app/scripts/collections'),
views: path.resolve(__dirname, './src/main/webapp/app/scripts/views'),
models: path.resolve(__dirname, './src/main/webapp/app/scripts/models'),
schemas: path.resolve(__dirname, './src/main/webapp/app/scripts/schemas'),
templates: path.resolve(__dirname, './src/main/webapp/app/scripts/templates'),
controllers: path.resolve(__dirname, './src/main/webapp/app/scripts/controllers'),
'custom-form-elements': path.resolve(__dirname, './src/main/webapp/app/scripts/helpers/custom-form-elements'),
js: path.resolve(__dirname, './src/main/webapp/app/js'),
bubble_chat: path.resolve(__dirname, './src/main/webapp/app/scripts/helpers/bubble_chat'),
leaflet: path.resolve(__dirname, './src/main/webapp/app/bower_components/leaflet/leaflet'),
MarkerCluster: path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/MasterCluster-src'),
jstree: path.resolve(__dirname, './node_modules/jstree/dist/jstree.min'),
geosearch: path.resolve(__dirname, './src/main/webapp/app/bower_components/L.GeoSearch/src/js/l.control.geosearch'),
openstreetmap: path.resolve(__dirname, './src/main/webapp/app/bower_components/L.GeoSearch/src/js/l.geosearch.provider.openstreetmap'),
googleProvider: path.resolve(__dirname, './src/main/webapp/app/bower_components/L.GeoSearch/src/js/l.geosearch.provider.google'),
'intl-tel-input': path.resolve(__dirname, './node_modules/intl-tel-input/build/js/intlTelInput-jquery.min'),
adapter: path.resolve(__dirname, './src/main/webapp/app/scripts/adapter'),
next: path.resolve(__dirname, './src/main/webapp/app/scripts/next'),
spin: path.resolve(__dirname, './src/main/webapp/app/bower_components/spin/'),
'fileSaver': path.resolve(__dirname, './node_modules/file-saver/FileSaver'),
'vApiClient': path.resolve(__dirname, './src/main/webapp/app/api/vApiClient'),
vendorUtils: path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/utils')
}
},
resolveLoader: {
alias: { "text": "raw-text-loader" }
},
mode: env,
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false,
options: {
context: __dirname
}
}),
new webpack.ProvidePlugin({
_: 'underscore',
dust: 'dustjs-linkedin',
jQuery: 'jquery',
$: 'jquery',
_ld:'lodash'
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
}),
new MiniCssExtractPlugin({
filename: env !== "development" ? 'styles/css/main-[hash].css' : 'styles/css/main-dev.css'
}),
new ReplaceHashInFileWebpackPlugin([{
dir: 'build',
files: ['index.jsp'],
rules: [{
search: /\/main/ig,
replace: env !== "development" ? '/main-[hash]' : '/main-dev'
}]
}])
]
}
if (process.env.npm_config_branding === 'riverbed') {
console.log('******************** Branding : Riverbed *********************',
process.env.npm_config_branding);
console.log(JSON.stringify(brandingDefinePlugin));
config.plugins.push(brandingDefinePlugin.riverbed.oem);
} else {
console.log('******************** Branding : Versa *********************', process.env.npm_config_branding);
console.log(JSON.stringify(brandingDefinePlugin));
config.plugins.push(brandingDefinePlugin.versa.oem);
}
if (!process.env.NO_COPY) {
config.plugins.push(new CopyWebpackPlugin({patterns:[
{
from: 'src/main/webapp/app/mock/json/*.json',
to: 'mock/json',
toType: 'dir',
},
{
from: 'src/main/webapp/app/*.jsp',
toType: 'file',
toType: 'dir',
}, {
from: 'src/main/webapp/app/jsp',
to: 'jsp/',
},
{
from: 'src/main/webapp/app/scripts/vendor',
to: 'vendor/',
},
{
from: 'src/main/webapp/app/scripts/vendor/codemirror',
to: 'vendor/codemirror',
},
{
from: 'src/main/webapp/app/scripts/vendor/diff_match_patch',
to: 'vendor/diff_match_patch',
}, {
from: 'src/main/webapp/app/scripts/vendor/next',
to: 'vendor/next',
}, {
from: 'src/main/webapp/app/styles/',
to: 'styles/'
}, {
from: 'src/main/webapp/app/bower_components/',
to: 'bower_components/'
}, {
from: 'src/main/webapp/app/footerName.txt'
}, {
from: 'src/main/webapp/app/favicon.png'
}, {
from: 'src/main/webapp/app/favicon.ico'
}, {
from: 'src/main/webapp/app/404.html'
}, {
from: 'src/main/webapp/app/logoName.txt'
}, {
from: 'src/main/webapp/app/robots.txt'
}, {
from: 'src/main/webapp/app/favicon_original.png'
}, {
from: 'src/main/webapp/app/images/',
to: 'images/'
}, {
from: 'src/main/webapp/app/styles/img/',
to: 'styles/img'
}, {
from: 'node_modules/noVNC',
to: 'vendor/noVNC',
}, {
from: 'src/main/webapp/app/scripts/novnc',
to: 'novnc',
},
{
from: 'node_modules/bootstrap/dist/css',
to: 'styles/css/bootstrap/',
},
{
from: 'node_modules/bootstrap/dist/js',
to: 'bower_components/bootstrap/',
},
{
from: 'node_modules/jquery/dist',
to: 'bower_components/jquery/dist',
},
{
from: 'src/main/webapp/app/scripts/jspScriptHandlers',
to:"jspScriptHandlers"
}]}
))
}
module.exports = config;
Out put of running webpack
ERROR] [webpack.Progress] 10% building
[ERROR] [webpack.Progress] 10% building 0/1 entries 0/0 dependencies 0/0 modules
[ERROR] (node:27426) ExperimentalWarning: queueMicrotask() is experimental.
[ERROR] (node:27426) [DEP_WEBPACK_RULE_LOADER_OPTIONS_STRING] DeprecationWarning: Using a string as loader options is deprecated (ruleSet[1].rules[2].use[0].options)
[ERROR] [webpack.Progress] 10% building import loader ./node_modules/babel-loader/lib/index.js
[ERROR] [webpack.Progress] 10% building 0/1 entries 1/1 dependencies 0/1 modules
Had the same problem and, surprisingly, I've found the resolve.alias option to be the culprit. Removing one particular item from there caused the build to succeed.
SVGs that I use using require doesn't get displayed.
In my terminal, svg assets gets emitted and paths were set properly in my html.
<img src="/images/brand-illustration.f20767e375d3094978f5cc5c9726d0a6.svg">
However, the SVG won't display while other formats like jpg or png works. I tried opening the original svg file and it definitely works.
And when I inspected the emitted svg asset and load it in the browser like so: localhost:8080/images/brand-illustration.f20767e375d3094978f5cc5c9726d0a6.svg, I get this parse error:
This is how I use the svg in my pug file
img(src=require('../../assets/img/brand-illustration.svg').default)
webpack config
module.exports = {
entry: {
main: "./src/index.js"
},
output: {
path: path.join(__dirname, "../build"),
filename: "[name].bundle.js",
publicPath: '/'
},
mode: "development",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.s?css$/,
use: [{
loader: MiniCssExtractPlugin.loader
}, {
loader: 'css-loader',
options: {
sourceMap: true
}
}, {
loader: 'resolve-url-loader',
options: {
sourceMap: true
}
}, {
loader: 'sass-loader',
options: {
sourceMap: true
}
}]
}, {
test: /\.pug$/,
use: ["pug-loader"]
},
{
test: /\.(png|svg|jpe?g|gif|webp)$/,
use: [
{
loader: "file-loader",
options: {
limit: 10000,
outputPath: 'images',
name: '[name].[hash].[ext]'
}
},
]
},
{
test: /\.(woff(2)?|ttf|otf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
limit: 10000,
name: '[name].[hash].[ext]',
outputPath: 'fonts'
}
}]
},
{
test: /\.html$/,
use: {
loader: "html-loader?interpolate",
options: {
attrs: ["img:src", ":data-src"],
minimize: true
}
}
}
]
},
plugins: [
// CleanWebpackPlugin will do some clean up/remove folder before build
// In this case, this plugin will remove 'dist' and 'build' folder before re-build again
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: 'css/[name].[contenthash]_[id].css'
}),
new CleanWebpackPlugin(),
// The plugin will generate an HTML5 file for you that includes all your webpack bundles in the body using script tags
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.join(__dirname, '..', '/src/index.pug'),
inject: true,
publicPath: '/'
}),
new HtmlWebpackPlugin({
filename: 'about.html',
template: path.join(__dirname, '..', '/src/about.pug'),
inject: true,
publicPath: '/'
}),
new HtmlWebpackPlugin({
filename: 'works.html',
template: path.join(__dirname, '..', '/src/works.pug'),
inject: true,
publicPath: '/'
}),
new HtmlWebpackPlugin({
filename: 'contact.html',
template: path.join(__dirname, '..', '/src/contact.pug'),
inject: true,
publicPath: '/'
}),
new HtmlWebpackPlugin({
filename: '404.html',
template: path.join(__dirname, '..', '/src/404.pug'),
inject: true,
publicPath: '/'
})
].concat(htmlPlugins)
};
devDependencies
"#babel/core": "^7.7.7",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.7.7",
"babel-loader": "^8.0.6",
"brotli-webpack-plugin": "^1.1.0",
"clean-webpack-plugin": "^3.0.0",
"compression-webpack-plugin": "^3.0.1",
"css-loader": "^3.4.1",
"cssnano": "^4.1.0",
"file-loader": "^5.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"pug-html-loader": "^1.1.5",
"pug-loader": "^2.4.0",
"purgecss-webpack-plugin": "^1.6.0",
"resolve-url-loader": "^3.1.2",
"sass-loader": "^8.0.0",
"style-loader": "^1.1.2",
"terser-webpack-plugin": "^2.3.1",
"url-loader": "^4.1.1",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"webpack-merge": "^5.7.0"
Remove the file-loader usage and add type: 'asset/resource' in the Webpack config
I want to load svg images, So I downloaded svg-inline-loader. and configured using this example: Webpack svg-inline-loader. After trying to load svg file I get this. Without using webpack svg-inline-loader loading svg files would give me an error. Any ideas how can I fix it?
HTML
<img src="./svg/facebook-square-brands.svg" alt="Facebook"/>
My Webpack config file.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry:{
scripts: "./src/scripts/index.js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
}
},
{
test: /\.html$/,
use: [{ loader: "html-loader", options: { minimize: true } }]
},
{
test: /\.(png|jpe?g)/i,
use: [
{
loader: "url-loader",
options: {
name: "./img/[name].[ext]",
limit: 10000
}
},
{
loader: "img-loader",
}
]
},
{
test: /\.svg$/,
use: [
{
loader: 'svg-inline-loader',
}
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"sass-loader"
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
PackageJson dependacies:
"devDependencies": {
"#babel/core": "^7.2.0",
"#babel/preset-env": "^7.2.0",
"#babel/preset-react": "^7.0.0",
"autoprefixer": "^9.4.1",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"file-loader": "^2.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"img-loader": "^3.0.1",
"mini-css-extract-plugin": "^0.4.5",
"node-sass": "^4.10.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"svg-inline-loader": "^0.8.0",
"url-loader": "^1.1.2",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14"
},
I know it's over a year since the question is asked but i add an answer for future people landing here.
svg-inline-loader are suppose to be used to use svg inline as the file it self injected. What you want to accomplished is best to use either url-loader or svg-url-loader (https://www.npmjs.com/package/svg-url-loader) to convert svg to base64 so you can use it in src-attribute.
If you want to use both together you can combine it with following oneOf config:
{
test: /\.svg$/,
oneOf: [
{
include: path.resolve(__dirname, '../node_modules/package-name/'),
use: 'svg-inline-loader'
},
{
exclude: path.resolve(__dirname, '../node_modules/package-name/'),
use: 'url-loader'
}
]
}
I have some issue to have a vendor.js file that will include all the plugins I used for my projet. I already read Managing jQuery plugin dependency in webpack but It seems the plugins I used are a little complex to be include.
Just to be clear, my app.js and my css are correctly builded butt not the vendor.js
Here is my package.json :
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --env=dev --progress --watch --content-base src/app"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.4.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"css-loader": "^0.28.1",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"json-loader": "^0.5.4",
"postcss-cssnext": "^2.10.0",
"postcss-loader": "^2.0.5",
"postcss-modules-values": "^1.2.2",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.3",
"style-loader": "^0.17.0",
"url-loader": "^0.5.8",
"webpack": "^2.5.1",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"admin-lte": "git://github.com/almasaeed2010/AdminLTE.git#37c8bbb01998db487382e9d62cfb398511167f3a",
"bootstrap-daterangepicker": "git://github.com/dangrossman/bootstrap-daterangepicker.git#29bbf5a04df69fda363cedb534272ac344524e57",
"bootstrap-table": "^1.11.2",
"eonasdan-bootstrap-datetimepicker": "git://github.com/Eonasdan/bootstrap-datetimepicker.git#4.17.47",
"font-awesome": "^4.7.0",
"ionicons": "^3.0.0",
"jquery": "^3.2.1",
"jquery-confirm": "git://github.com/craftpip/jquery-confirm.git",
"lobibox": "git://github.com/arboshiki/lobibox.git",
"lodash": "^4.17.4",
"moment-timezone": "^0.5.13",
"parsleyjs": "^2.7.1",
"push.js": "0.0.13",
"socket.io-client": "^1.7.4",
"tableexport.jquery.plugin": "git://github.com/hhurz/tableExport.jquery.plugin.git"
}
}
Here is my webpack.config.json :
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const postcssPlugins = [
require('postcss-cssnext')(),
require('postcss-modules-values')
];
const scssLoader = [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' }
];
const postcssLoader = [
{ loader: 'style-loader' },
{ loader: 'css-loader', options: { modules: true } },
{ loader: 'postcss-loader', options: { plugins: [...postcssPlugins] } }
];
// you'll need to npm install the following: [raw-loader, html-minifier-loader, json-loader, css-loader,style-loader, url-loader, file-loader ]
// in your index.html you should have two script tags, one for app.js(or bundle.js) and vendor.js
// no need for babelify with webpack. just, npm install --save-dev babel-cli babel-preset-es2016
// in .babelrc file change the preset of 2015 to ["es2016"]
module.exports = {
entry: {
app: './app.js',
// if any on these are just for css remove them from here and require(with absolute path) them from app.js
vendor: [
'babel-polyfill',
'admin-lte',
'admin-lte/bootstrap/js/bootstrap.min.js',
'lobibox/dist/js/notifications.min.js',
'admin-lte/plugins/fastclick/fastclick.js',
'moment',
'moment/locale/fr.js',
'moment-timezone',
'eonasdan-bootstrap-datetimepicker',
'bootstrap-table',
'bootstrap-table/dist/locale/bootstrap-table-fr-BE.min.js',
'parsleyjs',
'parsleyjs/dist/i18n/fr.js',
'bootstrap-daterangepicker',
'socket.io-client',
'jquery-confirm',
'push.js',
'lodash',
'bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js',
'tableexport.jquery.plugin'
]
},
//devtool: 'eval', // for test in the browser
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')//,
//pathinfo: true
},
module: {
rules: [{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.html$/,
use: ['raw-loader', 'html-minifier-loader'],
exclude: /node_modules/
}, {
test: /\.json$/,
use: 'json-loader',
exclude: /node_modules/
}, {
test: /\.(scss|sass)$/,
use: ExtractTextPlugin.extract({
fallback: scssLoader[0], // style-loader
use: scssLoader.slice(1) // [ 'css-loader', 'sass-loader' ]
})
},{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}, {
test: /\.(jpg|png|gif)$/,
use: 'file-loader'
}, {
test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
}],
},
plugins: [
new ExtractTextPlugin({
filename: 'app.bundle.css',
allChunks: true
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
};
My app.js :
console.log("coucou");
// css
require('admin-lte/dist/css/skins/skin-blue.min.css');
require('admin-lte/dist/css/AdminLTE.min.css');
require('jquery-confirm/dist/jquery-confirm.min.css');
require('bootstrap-table/dist/bootstrap-table.min.css');
require('bootstrap-daterangepicker/daterangepicker.css');
require('eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css');
require('admin-lte/plugins/select2/select2.min.css');
require('lobibox/dist/css/lobibox.min.css');
require('ionicons/dist/css/ionicons.min.css');
require('font-awesome/css/font-awesome.min.css');
require('admin-lte/bootstrap/css/bootstrap.min.css');
Thanks to help me how to fix this issue