i am getting this issue webpack.validateSchema is not a function when i setting up webpack and react below i shared my webpack.config.js
const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const TARGET = process.env.npm_lifecycle_event;
const PATHS = {
app: path.join(__dirname, 'app'),
build: path.join(__dirname, 'build')
};
const common = {
entry: {
app: PATHS.app
},
output: {
path: PATHS.build,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.css$/,
loaders: ['style','css'],
include: PATHS.app,
}
]
}
};
if(TARGET === 'start' || !TARGET){
module.exports = merge(common, {
devtool: 'eval-source-map',
devServer: {
contentBase: PATHS.build,
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
stats: 'errors-only',
host: process.env.HOST,
port: process.env.PORT || 3000
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
});
}
if(TARGET === 'build'){
module.exports = merge(common, {});
}
There are a couple of errors to fix:
Instead of extension: ['','.js','.jsx'], use extensions: ['.js','.jsx']. There's no need for the empty entry since webpack 2 and it will complain about it.
Instead of ['style','css'], use ['style-loader','css-loader']. Since webpack 2, it doesn't provide the shortcut by default.
Instead of babel?cacheDirectory, use babel-loader?cacheDirectory. I might rewrite the definition through use and options as in the webpack book chapter.
Related
I use
python manage.py runserver for django and webpack-dev-server --mode=development for template on local development.
My file structure is like this
/ - /myproj/
/defapp/
/frontend/dist/
/frontend/static/
/frontend/templates/
/frontend/node_modules/
/static/
Now I was ready for deployment on server, so I did webpack --mode=production,
It created the /frontend/dist directory....
then,,,How can I use this ?
Just accessing localhost (manage.py runserver) but no templates appears.
GET https://localhost:8008/static/js/dashboard.0c3e9ffe26656a1dd3c7.bundle.js net::ERR_ABORTED 404 (Not Found)
Maybe I don't understand the basic idea of webpack...
It uses dev server for development but in production, it doesn't require server? am I correct?
My webpack.config.js is below.
const path = require('path');
const { merge } = require('webpack-merge');
const BundleTracker = require('webpack-bundle-tracker');
const entries = {}
for (const fileName of require('fs').readdirSync(path.resolve(__dirname, 'static', 'entries'))) {
entries[fileName.split('.')[0]] = `./static/entries/${fileName}`
}
const baseConfig = {
entry: entries,
output: {
filename: 'js/[name].[hash].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
chunks: 'initial',
name: 'vendor',
},
},
},
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new BundleTracker({
path: __dirname,
filename: 'webpack-stats.json',
}),
]
};
const devConfig = merge(baseConfig, {
mode: 'development',
output: {
publicPath: 'http://localhost:3000/static/',
},
devServer: {
client:{
webSocketURL: 'ws://localhost:3000/ws',
},
port: 3000,
hot: true,
host: '0.0.0.0',
allowedHosts: 'all',
//watchOptions: {
// ignored: /node_modules/
//},
headers: {
"Access-Control-Allow-Origin": "*"
}
},
});
const productConfig = merge(baseConfig, {
mode: 'production',
output: {
publicPath: '/static/'
}
})
module.exports = (env, options) => {
return options.mode === 'production' ? productConfig : devConfig
}
Solution
Add this in django setting.
STATICFILES_DIRS = (
os.path.join(BASE_DIR,'frontend/dist'),
)
then it gathers the file to /static/ folder when python manage.py collectstatic
This is the error:
'node"' is not recognized as an internal or external command,
operable program or batch file.
[Finished in 0.139s]
Also, this is coming from atom text editor, if that's necessary information.
Here's my code:
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const isProduction = process.env.npm_lifecycle_event === 'build'
module.exports = {
entry: './src',
// resolve: {
// alias: {
// 'src': path.join(__dirname, '/src'),
// 'libs': path.join(__dirname, '/src/libs'),
// }
// },
devtool: !isProduction && 'source-map',
output: {
path: path.join(__dirname, '/dist'),
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html',
// minify: isProduction && {
// collapseWhitespace: true
// },
minify: isProduction,
inlineSource: isProduction && '\.(js|css)$'
}),
new HtmlWebpackInlineSourcePlugin(),
new OptimizeCssAssetsPlugin({}),
new MiniCssExtractPlugin({
filename: '[name].css'
}),
new CopyWebpackPlugin([
{ from: './src/assets/**/*', to: path.join(__dirname, '/dist'), flatten: false, force: true },
]),
],
devServer: {
stats: 'minimal',
overlay: true,
contentBase: path.resolve('src/assets'),
// contentBase: path.join(__dirname, '/src/assets'),
}
}
Am I just missing a package for this, or is there an error in my quote, or what?
Mmmmm... how are you running the code?
Most probable answer, based on your provided info --> you have any node installation in your system and/or your node installation is not accesible or included into your path.
Check https://nodejs.org/en/download/
Taken from webpack docs:
Since webpack v5.0.0-beta.1 the minimum Node.js version to run webpack
is 10.13.0 (LTS)
You need to install node.js
I have created a React app and used webpack to bundle it. Now I am trying to deploy the app on heroku. The build is successful but when I try to open the link I get "Application Error". Is it necessary to have server.js file on root level of your react app to delpoy on heroku.
I have modified my webpack and I think it's fine but still the same error.
//here is my webpack.common.js
const webpack = require("webpack");
module.exports = {
entry: "./index.jsx",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["#babel/env"] }
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: { extensions: ["*", ".js", ".jsx"] },
output: {
path: path.resolve(__dirname, "dist/"),
publicPath: "/dist/",
filename: "bundle.js"
},
plugins: [new webpack.HotModuleReplacementPlugin()]
}
// webpack.dev.js
const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common');
module.exports = merge(common, {
mode:'development',
devtool: 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, "public/"),
port: 3000,
publicPath: "http://localhost:3000/dist/",
hot: true
}
});
I expect the app to get deployed on heroku but I am getting application error.
I'd like to configure webpack to transpile (mocha + chai) tests written in typescript to javascript and them execute them. To that end, I have the webpack.test.config.js file below. Note: I've currently configured webpack to use ts-loader and mocha-loader.
Unfortunately, when I execute webpack --config webpack.test.config.js --env.dev, I receive the error:
Module parse failed: Unexpected token (2:10) You may need an
appropriate loader to handle this file type.
How can resolve this error and achieve my aforementioned goal?
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const outputPath = './bin/test';
module.exports = env => {
return {
mode: env && env.pro ? 'production' : 'development',
context: path.resolve('src'),
entry: {
core: './test/typescript/core.spec.ts'
},
output: {
filename: '[name].js',
path: path.join(__dirname, outputPath)
},
devtool: 'source-map',
plugins: [
new CleanWebpackPlugin({
dry: true,
cleanOnceBeforeBuildPatterns: ['./bin/test/**/*']
})
],
module: {
rules: [
{
test: /\.spec\.tsx?$/,
use: ['mocha-loader', 'ts-loader'],
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
}
};
};
I know this is a common question for webpack; it's really hard to debug something if it won't give you any information about the cause or location of the error.
I'm getting the error:
Error: 'output.filename' is required, either in config file or as --output-filename
I know it has to do with a syntax error somewhere, but I'm too new to webpack to figure it out.
Here's my config file. It's called "webpack.config.js" in the root folder (i.e. the folder in which I initially ran: npm init).
const webpack = require('webpack');
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const RewriteImportPlugin = require("less-plugin-rewrite-import");
const root_dir = path.resolve(__dirname)
const src_dir = path.resolve(__dirname, "webpack_src")
const build_dir = path.resolve(__dirname, "webpack_bin")
const node_mod_dir = path.resolve(__dirname, 'node_modules');
const extractLESS = new ExtractTextPlugin('style.css');
const config = {
entry: {
index: path.resolve(src_dir, 'index.js')
},
output: {
path: build_dir,
filename: 'bundle.js'
},
resolve: {
modules: [root_dir, 'node_modules'],
},
module: {
rules: [
{
loader: 'babel-loader',
test: /\.(js)$/
},
{
use: extractLESS.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'less-loader',
options: {
paths: [root_dir, node_mod_dir],
plugins: [
new RewriteImportPlugin({
paths: {
'../../theme.config': __dirname + '/semantic_ui/theme.config',
}
})
]
}
}]
}),
test: /\.less$/
},
{
use: ['file-loader'],
test: /\.(png|jpg|gif|woff|svg|eot|ttf|woff2)$/
},
]
},
plugins: [
extractLESS,
new webpack.optimize.ModuleConcatenationPlugin()
]
};
module.exports = {
config
};
You're exporting module.exports = { config }, which means that you are exporting an object with one property, namely config, but webpack expects the object to be your entire config. Webpack requires output.filename, whereas you only provide config.output.filename.
The export should be your config:
module.exports = config;