I'm using webpack in my project, there are two images in my project.
the first image path is: /build/img/1.png (The following is called A)
the second image path is /build/img/2.png, (The following is called B)
The two pictures have the same path. but, the A can be displayed on the page, B can not.
my webpack.config.js:
var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
var AssetsPlugin = require('assets-webpack-plugin');
// var assetsPluginInstance = new AssetsPlugin();
// var proxy = require('http-proxy-middleware');
var remotePath = "./__build__/";
fs.readdir(remotePath, function (err, files) {
if (!err) {
for (var i = 0; i < files.length; i++) {
var filesName = files[i];
if (filesName.indexOf("chunk.js") > 1) {
fs.unlink('./__build__/' + filesName);
}
}
}
});
module.exports = {
entry: {
bundle: "./web_app/index.js"
},
devtool: 'cheap-module-eval-source-map',
output: {
path: __dirname + '/__build__',
filename: '[name].js',
chunkFilename: (new Date()).getTime() + '[id].chunk.js',
publicPath: '/__build__/'
},
devServer: {
hot: true,
inline: true,
proxy: {
'*': {
changeOrigin: true,
//target: 'xxx',
target: 'xxx',
secure: false
}
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
// new webpack.HotModuleReplacementPlugin(),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./__build__/dll/lib-manifest.json')
}),
new AssetsPlugin({
filename: '__build__/webpack.assets.js',
processOutput: function (assets) {
return 'window.WEBPACK_ASSETS = ' + JSON.stringify(assets);
}
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
// new webpack.optimize.UglifyJsPlugin({
// mangle: {
// except: ['$super', '$', 'exports', 'require']
// },
// compress: {
// warnings: false,
// },
// output: {
// comments: false,
// },
// }),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
],
resolve: {
extensions: ['', '.js', '.jsx'],
resolve: {
alias: {
moment: "moment/min/moment-with-locales.min.js"
}
}
},
module: {
loaders: [
{
test: /\.jsx?$/,
// loaders: ['babel-loader?presets[]=es2015&presets[]=react&presets[]=stage-0'],
loader: 'babel-loader',
query: {
plugins: ["transform-object-assign", "add-module-exports"],
presets: ['es2015', 'stage-0', 'react']
},
include: path.join(__dirname, '.')
}, {
test: /\.css$/,
loader: 'style!css'
}, {
test: /\.less$/,
loader: 'style!css!less'
}, {
test: /\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,
exclude: /^node_modules$/,
loader: 'file-loader?name=[name].[ext]'
}, {
test: /\.(png|jpg)$/,
exclude: /^node_modules$/,
loader: 'url?name=[name].[ext]'
}
]
}
};
my project structure
Image sequence: React code, project directory, dev Tool
I've merged several images, because stackoverflow rules that I can only publish two links
Related
I get this error when isDev = false. Here is my part of gulpfile.js
function CSSLoaders(isDev) {
let loaders = []
isDev ? loaders.push('vue-style-loader') : loaders.push(MiniCssExtractPlugin.loader)
loaders.push({
loader: 'css-loader',
options: {
url: false,
sourceMap: isDev,
importLoaders: isDev ? 1 : 2,
modules: {
localIdentName: "[local]"
}
}
})
if (!isDev) {
loaders.push('postcss-loader')
loaders.push({
loader: 'string-replace-loader',
options: {
multiple: [...Array(100).fill({search: '../..', replace: ''})]
}
})
}
return loaders
}
function webpackConfig(isDev) {
return {
output: {
filename: '[name].js'
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
// 'vue': 'vue/dist/vue.esm-bundler.js',
'vue': 'vue/dist/vue.esm.js',
// 'mixins-c': path.resolve(__dirname, '../../sass/_mixins-c.scss;')
}
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: CSSLoaders(isDev)
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: '/node_modules/'
}
]
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: isDev ? 'css/[name].css' : 'skin/lightui/css/[name].css'
}),
// new cssoLoader(),
new webpack.LoaderOptionsPlugin({
minimize: true
})
],
optimization: {
minimizer: [
new UglifyJsPlugin({
sourceMap: false,
uglifyOptions: {
warnings: false,
compress: true
}
})
],
},
mode: isDev ? 'development' : 'production',
devtool: isDev ? 'eval-source-map' : 'none'
}
};
function js_build() {
return src(['src/pages/**/js/*.js'])
.pipe(named())
.pipe(webpackStream(webpackConfig(false)))
.pipe(dest('dist/js/'))
}
let build = gulp.series(js_build)
exports.build = build
I tried
async function js_build() {
return await src(['src/pages/**/js/*.js'])
.pipe(named())
.pipe(webpackStream(webpackConfig(false)))
.pipe(dest('dist/js/'))
}
and
var print = require('gulp-print');
function js_build() {
return src(['src/pages/**/js/*.js'])
.pipe(named())
.pipe(webpackStream(webpackConfig(false)))
.pipe(dest('dist/js/'))
.pipe(print.default(function() { return 'HTTP Server Started'; }));
}
But got the same error. I've found out that the problem disappear with block in function CSSLoaders():
if (!isDev) {
loaders.push('postcss-loader')
loaders.push({
loader: 'string-replace-loader',
options: {
multiple: [...Array(100).fill({search: '../..', replace: ''})]
}
})
}
I dont understand why i can use "css-loader" without mistakes and cannot "postcss-loader", what the difference? Where should i put the sign, that async is completed?
Can anyone help me understand what i should do?
Using callback and onEnd method should do the trick.
function js_build(callback) {
return src(['src/pages/**/js/*.js'])
.pipe(named())
.pipe(webpackStream(webpackConfig(false)))
.pipe(dest('dist/js/'))
.pipe(print.default(function() { return 'HTTP Server Started'; }))
.on('end', function () {
callback();
});
}
This question was answer here :
Gulp error: The following tasks did not complete: Did you forget to signal async completion?
Imagine I have OrderComponent and CustomerComponent that represent two screens.
In the web version you can create a new customer while in the order screen by launching the customer component inside a popup. So OrderComponent references CustomerComponent directly in the template. So I have to keep both in the same FeaturesModule for this to work.
On the other hand in the Nativescript mobile version, there is no such capability and so the two components/screens are completely independent, so I would like to put them in 2 separate modules: OrderModule, and CustomerModule. And lazy load them so the app launches faster.
In my real application of course it's not just 2 components but several dozens so the mobile app performance is a more pressing issue.
When I try to add a module file with the tns extension like this: order.module.tns.ts, without the corresponding web file, it seems as if the NativeScript bundler is not picking it up, I get the following error:
ERROR: C:\...\src\app\features\orders\orders.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
at AngularCompilerPlugin.getCompiledFile (C:\Users\...\node_modules\#ngtools\webpack\src\angular_compiler_plugin.js:753:23)
at plugin.done.then (C:\Users\...\node_modules\#ngtools\webpack\src\loader.js:41:31)
at process._tickCallback (internal/process/next_tick.js:68:7)
# ../$$_lazy_route_resource lazy namespace object ./features/measurement-units/measurement-units.module
# ../node_modules/#angular/core/fesm5/core.js
# ../node_modules/nativescript-angular/platform.js
# ./main.ns.ts
But according to the docs, all I have to do to make a nativescript specific component is add it with the tns extension. Is there another step to make this work for module files?? Help is appreciated
Update
Here is my tsconfig.tns.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "es2015",
"moduleResolution": "node",
"baseUrl": "./",
"paths": {
"~/*": [
"src/*"
],
"*": [
"./node_modules/tns-core-modules/*",
"./node_modules/*"
]
}
}
}
Update 2
My webpack.config.js:
const { join, relative, resolve, sep } = require("path");
const webpack = require("webpack");
const nsWebpack = require("nativescript-dev-webpack");
const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
const { nsReplaceBootstrap } = require("nativescript-dev-webpack/transformers/ns-replace-bootstrap");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const { AngularCompilerPlugin } = require("#ngtools/webpack");
module.exports = env => {
// Add your custom Activities, Services and other Android app components here.
const appComponents = [
"tns-core-modules/ui/frame",
"tns-core-modules/ui/frame/activity",
];
const platform = env && (env.android && "android" || env.ios && "ios");
if (!platform) {
throw new Error("You need to provide a target platform!");
}
const projectRoot = __dirname;
// Default destination inside platforms/<platform>/...
const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS";
const {
// The 'appPath' and 'appResourcesPath' values are fetched from
// the nsconfig.json configuration file
// when bundling with `tns run android|ios --bundle`.
appPath = "app",
appResourcesPath = "app/App_Resources",
// You can provide the following flags when running 'tns run android|ios'
aot, // --env.aot
snapshot, // --env.snapshot
uglify, // --env.uglify
report, // --env.report
sourceMap, // --env.sourceMap
hmr, // --env.hmr,
} = env;
const externals = (env.externals || []).map((e) => { // --env.externals
return new RegExp(e + ".*");
});
const appFullPath = resolve(projectRoot, appPath);
const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
const entryModule = `${nsWebpack.getEntryModule(appFullPath)}.ts`;
const entryPath = `.${sep}${entryModule}`;
const ngCompilerPlugin = new AngularCompilerPlugin({
hostReplacementPaths: nsWebpack.getResolver([platform, "tns"]),
platformTransformers: aot ? [nsReplaceBootstrap(() => ngCompilerPlugin)] : null,
mainPath: resolve(appPath, entryModule),
tsConfigPath: join(__dirname, "tsconfig.tns.json"),
skipCodeGeneration: !aot,
sourceMap: !!sourceMap,
});
const config = {
mode: uglify ? "production" : "development",
context: appFullPath,
externals,
watchOptions: {
ignored: [
appResourcesFullPath,
// Don't watch hidden files
"**/.*",
]
},
target: nativescriptTarget,
entry: {
bundle: entryPath,
},
output: {
pathinfo: false,
path: dist,
libraryTarget: "commonjs2",
filename: "[name].js",
globalObject: "global",
},
resolve: {
extensions: [".ts", ".js", ".scss", ".css"],
// Resolve {N} system modules from tns-core-modules
modules: [
resolve(__dirname, "node_modules/tns-core-modules"),
resolve(__dirname, "node_modules"),
"node_modules/tns-core-modules",
"node_modules",
],
alias: {
'~': appFullPath
},
symlinks: true
},
resolveLoader: {
symlinks: false
},
node: {
// Disable node shims that conflict with NativeScript
"http": false,
"timers": false,
"setImmediate": false,
"fs": "empty",
"__dirname": false,
},
devtool: sourceMap ? "inline-source-map" : "none",
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
name: "vendor",
chunks: "all",
test: (module, chunks) => {
const moduleName = module.nameForCondition ? module.nameForCondition() : '';
return /[\\/]node_modules[\\/]/.test(moduleName) ||
appComponents.some(comp => comp === moduleName);
},
enforce: true,
},
}
},
minimize: !!uglify,
minimizer: [
new UglifyJsPlugin({
parallel: true,
cache: true,
uglifyOptions: {
output: {
comments: false,
},
compress: {
// The Android SBG has problems parsing the output
// when these options are enabled
'collapse_vars': platform !== "android",
sequences: platform !== "android",
}
}
})
],
},
module: {
rules: [
{
test: new RegExp(entryPath),
use: [
// Require all Android app components
platform === "android" && {
loader: "nativescript-dev-webpack/android-app-components-loader",
options: { modules: appComponents }
},
{
loader: "nativescript-dev-webpack/bundle-config-loader",
options: {
angular: true,
loadCss: !snapshot, // load the application css if in debug mode
}
},
].filter(loader => !!loader)
},
{ test: /\.html$|\.xml$/, use: "raw-loader" },
// tns-core-modules reads the app.css and its imports using css-loader
{
test: /[\/|\\]app\.css$/,
use: {
loader: "css-loader",
options: { minimize: false, url: false },
}
},
{
test: /[\/|\\]app\.scss$/,
use: [
{ loader: "css-loader", options: { minimize: false, url: false } },
"sass-loader"
]
},
// Angular components reference css files and their imports using raw-loader
{ test: /\.css$/, exclude: /[\/|\\]app\.css$/, use: "raw-loader" },
{ test: /\.scss$/, exclude: /[\/|\\]app\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] },
{
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
use: [
"nativescript-dev-webpack/moduleid-compat-loader",
"#ngtools/webpack",
]
},
// Mark files inside `#angular/core` as using SystemJS style dynamic imports.
// Removing this will cause deprecation warnings to appear.
{
test: /[\/\\]#angular[\/\\]core[\/\\].+\.js$/,
parser: { system: true },
},
],
},
plugins: [
// Define useful constants like TNS_WEBPACK
new webpack.DefinePlugin({
"global.TNS_WEBPACK": "true",
"process": undefined,
}),
// Remove all files from the out dir.
new CleanWebpackPlugin([`${dist}/**/*`]),
// Copy native app resources to out dir.
new CopyWebpackPlugin([
{
from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
context: projectRoot
},
]),
// Copy assets to out dir. Add your own globs as needed.
new CopyWebpackPlugin([
{ from: "fonts/**" },
{ from: "**/*.jpg" },
{ from: "**/*.png" },
], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
// Generate a bundle starter script and activate it in package.json
new nsWebpack.GenerateBundleStarterPlugin([
"./vendor",
"./bundle",
]),
// For instructions on how to set up workers with webpack
// check out https://github.com/nativescript/worker-loader
new NativeScriptWorkerPlugin(),
ngCompilerPlugin,
// Does IPC communication with the {N} CLI to notify events when running in watch mode.
new nsWebpack.WatchStateLoggerPlugin(),
],
};
if (report) {
// Generate report files for bundles content
config.plugins.push(new BundleAnalyzerPlugin({
analyzerMode: "static",
openAnalyzer: false,
generateStatsFile: true,
reportFilename: resolve(projectRoot, "report", `report.html`),
statsFilename: resolve(projectRoot, "report", `stats.json`),
}));
}
if (snapshot) {
config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
chunk: "vendor",
angular: true,
requireModules: [
"reflect-metadata",
"#angular/platform-browser",
"#angular/core",
"#angular/common",
"#angular/router",
"nativescript-angular/platform-static",
"nativescript-angular/router",
],
projectRoot,
webpackConfig: config,
}));
}
if (hmr) {
config.plugins.push(new webpack.HotModuleReplacementPlugin());
}
return config;
};
I am using Webpack 3 as a module loader for my application. But when I analyze my vendor.js bundle, I see that d3 is loaded twice in there - once a separate module, and once as a dependency. How can I make it load only once?
I tried these, but did not work:
Adding it as alias
Adding it in the CommonsChunkPlugin
Here is my webpack config file:
var webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
autoprefixer = require('autoprefixer'),
WebpackNotifierPlugin = require('webpack-notifier'),
ngAnnotatePlugin = require('ng-annotate-webpack-plugin'),
path = require('path'),
bourbon = require('bourbon').includePaths,
BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
var ENV = process.env.npm_lifecycle_event;
var isProd = false;
module.exports = {
cache: true,
entry: {
// vendor: [
// 'angular',
// 'jquery',
// 'velocity-animate',
// 'highcharts',
// 'd3',
// 'rickshaw',
// 'angular-block-ui',
// 'angular-sanitize',
// 'angular-animate',
// 'angular-cookies',
// './Private/Scripts/app/session/session.module',
// 'jquery.viewport',
// 'oclazyload',
// 'angular-ui-router',
// 'moment',
// 'bootstrap/js/tooltip'
// ],
wealth: './Private/Scripts/app/wealth/bootstrap.ts',
goal: './Private/Scripts/app/goal/bootstrap.ts',
login: './Private/Scripts/app/login/login.bootstrap.ts',
register: './Private/Scripts/app/register/register.bootstrap.ts',
dashboard: './Private/Scripts/app/dashboard/bootstrap.ts',
personal: './Private/Scripts/app/personal/bootstrap.ts',
resetPassword: './Private/Scripts/app/reset-password/reset-password.bootstrap.ts',
forgottenPassword: './Private/Scripts/app/forgotten-password/forgotten-password.bootstrap.ts',
products: './Private/Scripts/app/products/products.bootstrap.ts',
onboarding: './Private/Scripts/app/onboarding/onboarding.bootstrap.ts',
portfolio: './Private/Scripts/app/portfolio/bootstrap.ts',
investments: './Private/Scripts/app/investments/bootstrap.ts',
savings: './Private/Scripts/app/savings/bootstrap.ts',
customerIdentification: './Private/Scripts/app/customer-identification/customer-identification.bootstrap.ts',
wealthCoach: './Private/Scripts/app/wealth-coach/wealth-coach.bootstrap.ts',
shared: './Private/Scripts/app/shared/shared.bootstrap.ts',
riskTest: './Private/Scripts/app/risk-test/module.ts',
riskProfile: './Private/Scripts/app/risk-profile/bootstrap.ts',
upgradeProduct: './Private/Scripts/app/upgrade/upgrade.bootstrap.ts',
pendingActivation: './Private/Scripts/app/pending-activation/pending-activation.bootstrap.ts',
meeting: './Private/Scripts/app/meeting/meeting.bootstrap.ts'
},
output: {
path: __dirname + '/Private/build',
filename: 'scripts/[name].js',
publicPath: '/Private/build/'
},
devtool: 'eval',
resolve: {
extensions: ['.webpack.js', '.web.js', '.ts', '.js'],
alias: {
config: path.join(__dirname, "/Private/Scripts/app/config/", process.env.npm_lifecycle_event),
d3: path.resolve('./node_modules/d3'),
}
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: 'ts-loader'
},
{
test: /\.scss$/,
use: [
'file-loader?name=styles/[name].css',
'extract-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('autoprefixer')
];
}
}
},
// {
// loader: 'fast-sass-loader',
// }
{
loader: 'sass-loader',
options: {
sourceComments: false,
outputStyle: "compressed",
includePaths: [require('bourbon').includePaths]
}
}
]
},
{
test: /\.woff(2)?(\?[a-z0-9]+)?$/,
use: ['url-loader?name=styles/fonts/[name].[ext]']
},
{
test: /\.(ttf|eot|svg|otf)(\?[a-z0-9]+)?$/,
use: ['file-loader?name=styles/fonts/[name].[ext]']
},
{
test: /\.json$/,
use: 'json-loader'
}
]
},
node: {
fs: 'empty'
},
plugins: [
new ngAnnotatePlugin({
add: true
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'humanizeDuration': 'humanize-duration',
'moment': 'moment',
CONFIG: 'config'
}),
new WebpackNotifierPlugin({
excludeWarnings: true,
alwaysNotify: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.js',
minChunks(module, count) {
var context = module.context;
return context && context.indexOf('node_modules') >= 0;
},
}),
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(isProd)
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|en/),
new webpack.optimize.ModuleConcatenationPlugin(),
new BundleAnalyzerPlugin()
]
};
Here is my stats file for analyse.
I use latest version of prestashop (1.7), i want to use build in webpack script placed on _dev, the problem is a very slow compilating and watch tasks.
I run webpack by:
npm run watch
Result:
Version: webpack 1.14.0
Time: 12092ms
How i can improve performance?
I found same problem my webpack.config file is
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var plugins = [];
var production = false;
if (production) {
plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
);
}
plugins.push(
new ExtractTextPlugin(
path.join(
'..', 'css', 'theme.css'
)
)
);
module.exports = {
entry: [
'./js/theme.js'
],
output: {
path: '../assets/js',
filename: 'theme.js'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['babel-loader']
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
"style",
"css?sourceMap!postcss!sass?sourceMap"
)
}, {
test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
loader: 'file-loader?name=../css/[hash].[ext]'
}, {
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}]
},
postcss: function() {
return [require('postcss-flexibility')];
},
externals: {
prestashop: 'prestashop'
},
devtool: 'source-map',
plugins: plugins,
resolve: {
extensions: ['', '.js', '.scss']
}
};
Trying to add sass-loader to my webpack config and running into an error:
70% 1/1 build modules/Users/a557789/Documents/f/Portal/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:81
r.forEach(function(r) {
^
TypeError: undefined is not a function
at /Users/a557789/Documents/f/Portal/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:81:5
at Array.reduce (native)
at LoadersList.match (/Users/a557789/Documents/f/Portal/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:80:27)
webpack.config:
var webpack = require("webpack");
var baseDir = "dist";
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require("path");
module.exports = {
context: __dirname + "/app",
entry: {
app: "./main"
},
resolve: {
extensions: ['', '.js', '.ts', '.css', '.scss']
},
output: {
path: __dirname + "/dist",
sourceMapFilename: "[name].map",
filename: "[name].js"
},
module: {
loaders: [
//https://www.npmjs.com/package/webpack-typescript
{
test: /\.ts$/,
loader: "ts-loader"
},
{
test: /\.scss$/,
loaders: ExtractTextPlugin.extract("style", "css!sass")
//loaders: ExtractTextPlugin.extract("style!css!sass")
}
],
noParse: [ /angular2\/bundles\/.+/ ]
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(true),
new ExtractTextPlugin("style.css"),
new HtmlWebpackPlugin({
template: "../index.html",
inject: "body"
})
],
devtool: "source-map"
};
I've tried a bunch of different options for the params to the extract() call but with no luck. Any help would be greatly appreciated.
Instead of using
loaders: ExtractTextPlugin.extract("style", "css!sass")
you should use
loader: ExtractTextPlugin.extract("style", "css!sass")
instead.
The error isn't particularly descriptive in this case.
In my case solution was instead ExtractTextPlugin use MiniCssExtractPlugin. More details in this video https://www.youtube.com/watch?v=JlBDfj75T3Y&list=PLblA84xge2_zwxh3XJqy6UVxS60YdusY8&index=10
So, my config looks like
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "[name].[contenthash].bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
//babel
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"],
},
},
},
//css
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "index.html",
title: "My app",
}),
new MiniCssExtractPlugin(),
new CleanWebpackPlugin(),
],
};