I'm trying to make the switch from a grunt development environment to webpack. So far it hasn't been easy, but Modernizr and this loader have been giving me a headache for two days now..
I tried several different modernizr version and loaders, but no luck....
As you can see I followed everything from the read.me but I keep getting the same errors..
The modernizr in /node_modules has a package.json file, but when I run npm install in this folder, none of the grunt plugins get installed, so theres no way I can build a custom file...
I'm really getting frustrated here, so any help would be appreciated.
`
ERROR Failed to compile with 6 errors 16:43:55
These dependencies were not found:
- fs in ./node_modules/modernizr/lib/metadata.js, ./node_modules/modernizr/lib/options.js and 2 others
- generate in ./node_modules/modernizr/lib/build.js
- lib/generate-banner in ./node_modules/modernizr/lib/build.js
To install them, you can run: npm install --save fs generate lib/generate-banner
`
However when I try to install these I get errors these repo's don't even exist anymore?
My webpack.config.js:
`const path = require('path');
const Encore = require('@symfony/webpack-encore');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const devMode = process.env.NODE_ENV !== 'production';
const glob = require("glob");
Encore
// the project directory where compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
.enableSourceMaps(!Encore.isProduction())
.enableSassLoader()
.enablePostCssLoader((options) => {
options.config = {
path: 'config/postcss.config.js'
};
})
.autoProvideVariables({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
})
.enableVueLoader()
.enableVersioning()
.cleanupOutputBeforeBuild()
.addEntry('js/app', './assets/js/app.js')
.addStyleEntry('css/app', ['./assets/scss/app.scss'])
.addEntry('img', glob.sync('./assets/img/*'))
.splitEntryChunks()
.enableSingleRuntimeChunk();
module.exports = {
module: {
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
})
]
},
rules: [{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'babel-loader',
options: {
presets: ['env'],
},
}, {
loader: 'eslint-loader',
options: {
failOnError: true,
},
}]
},
{
test: /.scss$/,
use: [{
loader: MiniCssExtractPlugin.loader,
},
'style-loader',
"css-loader",
'postcss-loader',
'sass-loader',
OptimizeCssAssetsPlugin.loader
]
},
{
test: /.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'url-loader',
options: {
limit: 8000
}
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 6
},
optipng: {
enabled: true,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
}
]
},
{
test: /.modernizrrc.js$/,
use: [ 'modernizr-loader' ]
},
],
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /.css$/,
cssProcessor: require('cssnano'),
cssProcessorOptions: {
safe: true,
discardComments: {
removeAll: true
}
},
canPrint: true
})
]
},
resolve: {
alias: {
modernizr$: path.resolve(__dirname, ".modernizrrc")
}
},
stats: {
colors: true,
}
};
module.exports = Encore.getWebpackConfig();
`
.modernizrrc file:
{ "minify": true, "options": [ "domPrefixes", "prefixes", "addTest", "atRule", "hasEvent", "mq", "prefixed", "prefixedCSS", "prefixedCSSValue", "testAllProps", "testProp", "testStyles", "html5shiv", "setClasses" ], "feature-detects": [ "test/ambientlight", "test/applicationcache", "test/audio", "test/battery", "test/blob", "test/canvas", "test/canvastext", "test/contenteditable", "test/contextmenu", "test/cookies", "test/cors", ] }
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent