I am trying to add custom tabs into my app. My plugin.json for the custom tabs as the following:
And my file structure looks as such:
But each time I navigate to a page, I get this error:
Am I doing something wrong?
As Mas pointed out, it has to be added to the webpack.confg.js is two locations:
In the entry:
entry: {
'control/content/content': [
path.join(__dirname, 'src/control/content/index.js')
],
'control/design/design': [
path.join(__dirname, 'src/control/design/index.js')
],
'control/settings/settings': [
path.join(__dirname, 'src/control/settings/index.js')
],
'control/security/security': [
path.join(__dirname, 'src/control/security/index.js')
],
'control/user/user': [
path.join(__dirname, 'src/control/user/index.js')
],
'widget/widget': [path.join(__dirname, 'src/widget/index.js')]
},
And the plugins:
WebpackConfig.plugins.push(
new HtmlWebpackPlugin({
filename: 'control/content/index.html',
minify: { removeComments: true, collapseWhitespace: true },
template: path.join(__dirname, 'src/control/content/index.html'),
chunks: ['control/content/content']
}),
new HtmlWebpackPlugin({
filename: 'control/design/index.html',
minify: { removeComments: true, collapseWhitespace: true },
template: path.join(__dirname, 'src/control/design/index.html'),
chunks: ['control/design/design']
}),
new HtmlWebpackPlugin({
filename: 'control/settings/index.html',
minify: { removeComments: true, collapseWhitespace: true },
template: path.join(__dirname, 'src/control/settings/index.html'),
chunks: ['control/settings/settings']
}),
new HtmlWebpackPlugin({
filename: 'control/security/index.html',
minify: { removeComments: true, collapseWhitespace: true },
template: path.join(__dirname, 'src/control/security/index.html'),
chunks: ['control/security/security']
}),
new HtmlWebpackPlugin({
filename: 'control/user/index.html',
minify: { removeComments: true, collapseWhitespace: true },
template: path.join(__dirname, 'src/control/user/index.html'),
chunks: ['control/user/user']
}),
new HtmlWebpackPlugin({
filename: 'widget/index.html',
minify: { removeComments: true, collapseWhitespace: true },
template: path.join(__dirname, 'src/widget/index.html'),
chunks: ['widget/widget']
})
Related
please help me.
I'm to creating utilize webpack to bundle a simple project. but this problem is that the output
file contains module.exports = require(...).
I want to have everything in one bundle file without module.exports.
main.ts
import moment from "moment";
console.log(moment().year());
main.js <- writed bandle file
/***/ ((module) => {
module.exports = require("moment"); // <- I don't want
/***/ })
webpack.config.ts
module.exports = {
entry: {
main: ["/workspace/apps/background/src/main.ts"],
},
devtool: "source-map",
mode: "development",
output: {
path: "/workspace/dist/background",
filename: "main.js",
hashFunction: "xxhash64",
pathinfo: false,
libraryTarget: "umd",
globalObject: "this",
},
module: {
unsafeCache: true,
rules: [
{
test: {},
loader: "/workspace/node_modules/ts-loader/index.js",
exclude: {},
options: {
configFile: "/workspace/apps/background/tsconfig.app.json",
transpileOnly: true,
experimentalWatchApi: true,
},
},
],
},
resolve: {
extensions: [".ts", ".tsx", ".mjs", ".js", ".jsx"],
alias: {},
plugins: [
{
source: "described-resolve",
target: "resolve",
extensions: [".ts", ".tsx", ".mjs", ".js", ".jsx"],
log: {},
baseUrl: "../..",
absoluteBaseUrl: "/workspace",
},
],
mainFields: ["es2015", "module", "main"],
},
performance: {
hints: false,
},
plugins: [
{
options: {
async: false,
typescript: {
enabled: true,
configFile: "/workspace/apps/background/tsconfig.app.json",
memoryLimit: 2048,
},
},
},
{
patterns: [
{
context: "/workspace/apps/background/src/assets",
to: "assets",
from: "**/*",
globOptions: {
ignore: [".gitkeep", "**/.DS_Store", "**/Thumbs.db"],
dot: true,
},
},
],
options: {},
},
],
watch: false,
watchOptions: {
aggregateTimeout: 200,
},
stats: {
hash: true,
timings: false,
cached: false,
cachedAssets: false,
modules: false,
warnings: true,
errors: true,
colors: true,
chunks: true,
assets: false,
chunkOrigins: false,
chunkModules: false,
children: false,
reasons: false,
version: false,
errorDetails: false,
moduleTrace: false,
usedExports: false,
},
experiments: {
cacheUnaffected: true,
},
target: "node",
node: false,
externals: [null],
};
Is there any solution?
I am using React JS with SSR (express) and when I start the server I get an error.
C:\PROPJECTS\SSR+1\plusone\node_modules\antd\es\empty\style\css.js:1
import '../../style/index.css';
^^^^^^
SyntaxError: Cannot use import statement outside a module
Can you please explain how to solve this problem?
My WP config
const path = require('path');
const Html = require('html-webpack-plugin');
const { CleanWebpackPlugin: Clean } = require('clean-webpack-plugin');
const Copy = require('copy-webpack-plugin');
const MomentLocales = require('moment-locales-webpack-plugin');
module.exports = {
entry: {
editor: './src/editor.entrypoint.js',
public: './src/public.entrypoint.js',
},
output: {
filename: '[name].js',
path: path.join(__dirname, 'dist'),
publicPath: '/',
},
module: {
rules: [
{
test: /\.jsx?$/i,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(png|jpg|jpeg|gif|woff|eot|ttf|otf)$/i,
loader: 'file-loader',
options: {
outputPath: 'assets',
},
},
{
test: /\.svg$/,
use: ['#svgr/webpack'],
},
],
},
resolve: {
extensions: ['*', '.js', '.jsx'],
alias: {
clearText: path.resolve(__dirname, 'src/clearText.js'),
components: path.resolve(__dirname, 'src/components/'),
connectors: path.resolve(__dirname, 'src/connectors/'),
containers: path.resolve(__dirname, 'src/containers/'),
contexts: path.resolve(__dirname, 'src/contexts/'),
fonts: path.resolve(__dirname, 'src/fonts/'),
helpers: path.resolve(__dirname, 'src/helpers.js'),
hooks: path.resolve(__dirname, 'src/hooks/'),
mock: path.resolve(__dirname, 'src/mock/'),
img: path.resolve(__dirname, 'src/img/'),
pages: path.resolve(__dirname, 'src/pages/'),
utils: path.resolve(__dirname, 'src/utils/'),
slice: path.resolve(__dirname, 'src/slice/'),
},
},
plugins: [
new MomentLocales(),
new Clean(),
new Copy([{ from: 'public', to: '.' }]),
new Html({
chunks: ['public'],
hash: true,
scriptLoading: 'defer',
template: 'public/index.html',
}),
// new BundleAnalyzer(),
],
devServer: {
disableHostCheck: true,
historyApiFallback: true,
overlay: {
warnings: true,
errors: true,
},
port: 3000,
proxy: {
'/api': {
target: 'https:.../',
secure: false,
changeOrigin: true,
},
'/files': {
target: 'https://...',
secure: false,
changeOrigin: true,
},
},
},
};
Babel must be properly configured in your express server so that you can use import statements and es6 syntax.
I have been stuck with this upgrade since 2 days and I have made some progress.
It is an old project and I have to take it a bit forward.
This is my webpack.config.js file:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
//const validate = require('webpack-validator');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const PATHS = {
app: path.join(__dirname, 'src/js'),
build: path.join(__dirname, 'build'),
public: path.join(__dirname, 'src/public'),
assets: path.join(__dirname, 'src/assets'),
styles: [
path.join(__dirname, 'src/assets/css/bootstrap.min.css'),
path.join(__dirname, 'src/assets/css/font-awesome.min.css'),
path.join(__dirname, 'src/assets/css/bootstrap-grid-rtl.css'),
path.join(__dirname, 'src/assets/css/main.css'),
path.join(__dirname, 'src/assets/css/PrintStyle.css'),
path.join(__dirname, 'node_modules/react-dates/lib/css/_datepicker.css'),
path.join(__dirname, 'node_modules/flag-icon-css/css/flag-icon.css'),
path.join(__dirname, 'src/assets/css/react-datepicker.css'),
path.join(__dirname, 'src/assets/css/tracker.css'),
]
};
const isDebug = !process.argv.includes('--release');
module.exports = {
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true
},
sourceMap: true
})
],
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
}
},
entry: {
app: ['babel-polyfill',PATHS.app],
style: PATHS.styles
},
output: {
path: PATHS.build,
filename: 'js/[name].js',
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
use:
{
loader: 'babel-loader'
}
,
include: [
path.resolve(__dirname, PATHS.app),
],
query: {
cacheDirectory: isDebug,
babelrc: true,
presets: ['latest', 'react',
...isDebug ? [] : [
'react-optimize',
],
],
plugins: [
'transform-object-rest-spread',
'transform-object-assign',
[
'react-intl', {
'messagesDir': './build/messages',
'enforceDescriptions': false
}
]
]
},
},
{
test: /\.css$/,
use:
{
loader: ExtractTextPlugin.extract(
'style-loader',
`css-loader?${JSON.stringify({
importLoaders: 1,
sourceMap: true,
modules: true,
localIdentName: isDebug ? '[name]-[local]-[hash:base64:5]' : '[hash:base64:5]',
discardComments: { removeAll: true },
})}`,
'resolve-url-loader',
'postcss-loader?pack=default'
)
}
,
exclude: PATHS.styles,
},
{
test: /\.css$/,
use: [
{
loader:
ExtractTextPlugin.extract(
'style-loader',
`css-loader?${JSON.stringify({
localIdentName: isDebug ? '[name]-[local]-[hash:base64:5]' : '[hash:base64:5]',
minimize: true,
discardComments: { removeAll: true },
})}`,
'resolve-url-loader'
)
}
],
exclude: PATHS.app,
include: PATHS.styles
},
{
test: /\.sss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
}
]
},
{
test: /\.json$/,
use: [
{
loader: 'json-loader'
}
]
},
{
test: /\.(eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
use: [
{
loader:
`file-loader?${JSON.stringify({
name: isDebug ? '/[path][name].[ext]?[hash:8]' : '/fonts/[hash:8].[ext]',
})}`
}
]
},
{
test: /\.(ico|jpg|jpeg|png|gif)(\?.*)?$/,
use: [
{
loader:
`file-loader?${JSON.stringify({
name: isDebug ? '/[path][name].[ext]?[hash:8]' : '/images/[hash:8].[ext]'
})}`
}
]
},
],
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': isDebug ? '"development"' : '"production"',
'process.env.BROWSER': true,
__DEV__: isDebug,
}),
new ExtractTextPlugin('[name].css', {allChunks: true}),
new OptimizeCssAssetsPlugin({
cssProcessorOptions: { discardComments: {removeAll: true } },
}),
new HtmlWebpackPlugin({
title: 'GACA Portal',
template: path.join(PATHS.public, 'index.ejs'),
favicon: path.join(PATHS.assets, 'images/favicon.ico'),
}),
...isDebug? [
new webpack.HotModuleReplacementPlugin({
multiStep: true
}),
] : [
new CleanWebpackPlugin(PATHS.build, {
root: process.cwd()
}),
new webpack.optimize.OccurrenceOrderPlugin(true),
new webpack.optimize.DedupePlugin()
] //else ends
],
// Don't attempt to continue if there are any errors.
bail: !isDebug,
cache: false,
stats: {
colors: true,
reasons: isDebug,
timings: true,
},
devtool: isDebug ? 'cheap-module-source-map' : false,
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
stats: 'errors-only',
port: 3000,
host: '0.0.0.0',
publicPath: '/',
contentBase: PATHS.build,
proxy: {
'/api/**': {
target: 'http://localhost:8080',
secure: false
}
}
},
/*postcss: [
require('postcss-partial-import')(),
require('postcss-url')(),
require('postcss-custom-properties')(),
require('postcss-custom-media')(),
require('postcss-media-minmax')(),
require('postcss-custom-selectors')(),
require('autoprefixer')({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
})
]*/
};
Now I am trying to npm start but I still getting this error:
× ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.module.rules[2].use should be one of these:
non-empty string | function | object { ident?, loader?, options?, query? } | function | [non-empty string | function | object { ident?, loader?, options?, query? }]
-> Modifiers applied to the module when rule is matched
Details:
* configuration.module.rules[1].use should be a string.
* configuration.module.rules[1].use should be an instance of function
* configuration.module.rules[1].use.loader should be a string.
* configuration.module.rules[1].use should be an instance of function
* configuration.module.rules[1].use should be an array:
[non-empty string | function | object { ident?, loader?, options?, query? }]
* configuration.module.rules[2].use should be a string.
* configuration.module.rules[2].use should be an instance of function
* configuration.module.rules[2].use should be an object.
* configuration.module.rules[2].use should be an instance of function
* configuration.module.rules[2].use[0] should be a string.
* configuration.module.rules[2].use[0] should be an instance of function
* configuration.module.rules[2].use[0].loader should be a string.
- configuration.resolve.extensions[0] should not be empty.
Any help would be very helpful
Here is a step by step guide from Webpack.
https://webpack.js.org/migrate/
If you have plugin which is not provided by webpack, please go and check on the repo.
I'd recommend first upgrading to version 2 or 3 https://webpack.js.org/migrate/3/ , you will have clear documentation and you will find great help in Google ...
And only then continue to version 4 https://webpack.js.org/migrate/4/
I just left it away and create a new project with create app cli and copied the content and formatted the structure
Until now I have been using extract-text-webpack-plugin and webpack 3 to make two bundle files. One for local styles and one for gloabl styles.
So in global styles file we would extract css from like bootstrap, semantic ... and in local styles bundle we would put our own styles.
Both of those files would have contenthash so if for example I change something in my local styles and rebuild app, only the hash from local styles would change and not from globaly styles.
After updateing to webpack 4 a need to use mini-css-extract-plugin instead of extract-text-webpack-plugin.
This was my setup until now. I am trying different things but I dont know how to turn this setup for mini-css-extract-plugin?
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const ExtractLocal = new ExtractTextPlugin({
filename: 'stylesheet/stylesLocal.[contenthash].local.css',
disable: false,
allChunks: true,
})
const ExtractGlobal = new ExtractTextPlugin({
filename: 'stylesheet/stylesGlobal.[contenthash].css',
disable: false,
allChunks: true,
})
module.exports = {
module: {
rules: [
/* Local styles */
{
test: /\.local\.(css|scss)$/,
use: ExtractLocal.extract({
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
minimize: true,
modules: true,
importLoaders: 1,
localIdentName: '[local]___[name]__[hash:base64:5]',
},
},
...
],
}),
},
/* Global styles */
{
test: /^((?!\.local).)+\.(css)$/,
use: ExtractGlobal.extract({
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
minimize: true,
},
},
],
}),
},
],
},
plugins: [
ExtractLocal,
ExtractGlobal,
...
],
}
Your css loaders are correct.
In plugins, I see you want implement it using mini-css to extract multiple css files.
While it's definitely an options, I succeeded implementing it with webpack Optimization option, and only 1 mini-css in plugins.
Output config:
output: {
path: appConfig.paths.appBuild,
filename: 'scripts/[name].[chunkhash:8].js',
chunkFilename: 'scripts/[name].[chunkhash:8].chunk.js',
publicPath: publicPath,
},
Additional css rule for styles from node modules only (I made it the first css rule and after it the additional rules):
{
test: /\.(css|scss)$/,
include: /(node_modules)/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true } },
],
},
Optimization config:
(This will extract vendor js as well.)
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
Plugin config:
new MiniCssExtractPlugin({
filename: 'styles/[name].[contenthash].css',
chunkFilename: 'styles/[name].[contenthash].css',
}),
I use CommonsChunkPlugin in my project, wash it can peel public-code
new Wp.optimize.CommonsChunkPlugin({
name: 'library',
minChunks:2,
}),
but, When I use html-webpack-plugin render html, The html-result has not include public-code.
This is my webpack.config.js
//webpack.config.js
var Path =require('path');
var Wp =require('webpack');
var ETWP =require('extract-text-webpack-plugin');
var HWP = require('html-webpack-plugin');
var eSCSS = new ETWP('css/[name].css');
module.exports ={
entry :{
indexApp: Path.resolve(__dirname ,'./src/js/index.js'),
aboutApp: Path.resolve(__dirname ,'./src/js/about.js'),
},
output :{
path :'./lib/',
filename :'js/[name].js',
},
module :{
loaders :[
{
test: /\.scss$/i,
loader: eSCSS.extract(['css','sass']),
},
],
},
plugins :[
new HWP({
filename: './about.html',
template: './src/tpl/about.html',
chunks:["aboutApp","library.js"],
xhtml: true,
inject: true,
}),
new HWP({
filename: './index.html',
template: './src/tpl/index.html',
chunks:["indexApp"],
xhtml: true,
inject: true,
}),
new Wp.optimize.CommonsChunkPlugin({
name: 'library',
minChunks:2,
}),
};
How can I conrfig?
Thinks.