I'm new to webpack and I can't seem to find a way to serve the Apple Universal Links file under / using webpack.
Could you please advise how to get /apple-app-site-association working?
if you want to serve apple-app-site-association through webpack you could add loader
and add import for this file in main.js for example
{
test: /apple-app-site-association/,
exclude: /node_modules/,
loader: [
{
loader:'file-loader',
options: {
name: '/[name]',
}
}]
}
Related
So I am trying to avoid having Webpack create the following asset in the build folder used in production:
main.35237d24.css
This configuration works in development. But in production, 'main.35237d24.css' is being generated and a link tag is being created for it. Which is a render blocking resource I am trying to eliminate.
webpack.config.js
{
test: /\.css$/,
use: [
{
loader: "style-loader",
options:{
insert:'head',
injectType: 'singletonStyleTag',
envName: isProduction
},
},
"css-loader"
]
}
What do I need to do here to get the result I'm getting in development, the inlining in the head of the css, for production?
I'd appreciate it.
Thanks,
Ironman
I have used lerna to setup the repo.
This is the error I am getting -
This error is coming in the shared code which I have put in the components directory. Below is my directory structure.
So I have this Button component to be used in both the apps. After seeing the error it seems to me it's not recognizing the jsx syntax and asking for #babel/preset-react . So what I tried is I tried to create .babelrc file inside buttons folder with this content -
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
and then additionaly I also created one webpack.config.js file inside buttons folder with this content -
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
}
This doesn't helped me!
I also tried to create babel.config.js in the root folder with a few contents copied but it didn't work.
I have separate .babelrc and webpack.config.js files in both the apps inside the apps folder as shown in the snapshot. When I am using buttons as a dependency in package.json in apps and then using it, then this error is coming. I don't know how to resolve this issue. Any help will be greatly appreciated.
This is example repo I have created for reference
One way to get this to work might be to nail the babel config straight into the webpack configuration:
In your case you have to change the babel-loader config so it will look like that:
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
"#babel/preset-react",
],
}
}
},
I just tried it on your test repo for app2 and it works
I have created a new react app using npx create-react-app and now I want to integrate a webpack.config.js file. I know I don't have to but it is a necessary step for an assignment.
I have tried many tutorials an articles but I can't seem to make it work. All I need is to include all the css related loaders (sass, css etc) and babel.
This is my webpack.config.js file:
const path = require('path');
module.exports = {
mode: "development",
entry: path.join(__dirname,'./src/index.js'),
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader"
]
}
]
},
resolve: {
extensions: ["*", ".js", ".jsx"]
},
output: {
path: path.join(__dirname,'public'),
filename: 'bundle.js'
},
devServer: {
contentBase: path.join(__dirname,'public')
}
};
And I get this error:
ERROR in ./src/index.js 7:16
Module parse failed: Unexpected token (7:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import * as serviceWorker from './serviceWorker';
|
> ReactDOM.render(<App />, document.getElementById('root'));
|
| // If you want your app to work offline and load faster, you can change
There're some alternatives that can override webpack config without ejecting the CRA project:
Alternatives You can try customize-cra for a set of CRA 2.0 compatible
rewirers, or any of the alternative projects and forks that aim to
support 2.0:
Rescripts, an alternative framework for extending CRA configurations
(supports 2.0+).
react-scripts-rewired for a fork of this project that
aims to support CRA 2.0
craco
add config-overrides.js in the route and add your webpack changes as:
const { addWebpackModuleRule } = require('customize-cra')
module.exports = {
webpack: override(
addWebpackModuleRule({
issuer: {
test: /\.sass?$/,
},
loader: 'file-loader',
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
}))
}
Answering this just because it kills me to see 10 page Medium articles as an answer when it can be answered in 1 sentence.
Enter your project dir and run npm run eject
This will extract all of the configuration files for you to edit, including webpack.config.js, to a folder called "config". Enter config/webpack.config.js, find the "return" statement, and inside there is a "resolve" configuration option. Add the following to that object:
symlinks: false
Boom. Saved you a stupidly long Medium article.
In trying to install react-datepicker, I came across the import of css through webpack. I cannot get this installed correctly.
Here is my webpack.config.js:
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{ test: /\.jsx?$/, exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
}
I installed css-loader with npm. I added the use call above that has style-loader and css-loader, but it failed when I went to load. Anyone have specific installation instructions for the import css into js?
The react-datepicker instructions are short and vague.
For the react community I just added, most of the date components have this style of import css from javascript file. I am not using create-react-app, I rolled my own, have you been able to get these imports to work in a roll your own webpack environment?
Thanks in advance.
I found the answer here. I basically just needed to make sure css-loader and style-loader were installed and add in the following webpack configurations.
I am trying to implement SCSS in my project. I have ran the npm command to install the loader "npm install sass-loader node-sass --save-dev". I have created a scss file. but the problem is it is not working. i tried multiple configurations to make it runable but no luck. below are my webpack configuration. please advice,
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}]
Did you configure your loaders correctly? Cant at least see any css/scss loaders in your provided code? https://github.com/webpack-contrib/sass-loader
UPDATE::
Add ExtractTextPlugin into your config. What this does is, it moves all the require("style.css")s in entry chunks into a separate single CSS file. So your styles are no longer inlined into the JS bundle, but separate in a CSS bundle file (styles.css) https://github.com/webpack-contrib/extract-text-webpack-plugin
Include the following into your webpack.config file.
// webpack.config.js
import ExtractTextPlugin from 'extract-text-webpack-plugin'
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style',
loader: [
'css',
'postcss',
{
loader: 'sass',
query: {
sourceMap: false,
}
}
],
})
}
and import your .scss files ::
import 'scss/myfile.scss'