Develop Reference

How to use Craco to add instructions to Webpack

I would like to add these instructions to Webpack through Craco:
{
test: /\.json$/,
loader: 'url-loader',
options: {
limit: false,
publicPath: 'assets'
},
type:'javascript/auto'
}
How to do this?
I'm not familiar with Webpack or Craco at all
Basically what I'm trying to do is that I have animals.json file but currently when importing it via:
import animals from './animals.json'
I end up with the contents of the json file when I actually want a URL like localhost:8000/static/media/animals.json and only when I open that link should the contents of the json file be displayed...
I have been instructed that overriding webpack's default functionality via the above lines can accomplish this...

Json file was not found by webpack

I am developing a small personal project,
i need to import json files with webpack but impossible
package.json contain:
"webpack": "^4.17.1"
"json-loader": "^0.5.7",
webpack.config.js contain
{ test: /\.json$/, use: 'json-loader' },
I dont know what vs code tell me this issue
import * as data from './loading.json';
- Cannot resolve module 'json' -
a question "Load static JSON file in Webpack" do not solve my problem and with json-loader or not this issue still present

As mentioned, you no longer need json-loader for .json since webpack 2.0.0.
However, if you are using json-loader because you don't want to bundle the json file, then I would recommend using one of the following solutions:
Use Copy Webpack Plugin to copy the json file into the build directory.
Use type = 'javascript/auto'
For example(note that this example uses file-loader instead of json-loader):
{
type: 'javascript/auto',
test: /\.json$/,
use: [
{
loader: 'file-loader',
include: [path.resolve(__dirname, 'src')],
options: {
name: '[name].[ext]'
}
}
]
}
Updated: Added include. Remember to place the json file in the src folder.
For more information, please check out this page:
Webpack 4.0 file-loader json issue

let webpack output individual compiled files besides bundle

I'm using the webpack loader ts-loader to compile typescript sourcefiles into a javascript bundle. Now I would like the individualy compiled javascript files also to be saved, as well as the bundle! I'm familliar with writing a very simple webpack plugin, but I'm not sure as to how to go about implementing this. That is: I don't know which events triggered by webpack to listen to and where to find the relevant data. Any help?

As I commented, you can't use webpack compiled individual files. It might break with Uncaught ReferenceError: __webpack_require__ is not defined.
It's better write your own loader or ask the ts-loader to provide the option to retain the transpiled source.
Or i have written a loader which can save the typescript compiled files as individual files.
you can use this loader second loader or post-loader as shown below
as a second loader:
module: {
loaders: [{
test: /\.ts?$/,
loaders: ['scatter-loader', 'ts-loader']
}]
}
or as a post-loader
module: {
loaders: [{
test: /\.ts?$/,
loaders: ['ts-loader']
}],
postLoader: [{
test: /\.ts?$/,
loaders: ['scatter-loader']
}]
}
Note: scatter-loader work is in progress.

Webpack - Using Script Loader in webpack.config.json

I am just starting to dip my toes into the world of webpack. I am using the awesome Vue.js with vueify, so therefore my modules are ES6.
One difficulty I am having is loading some 3rd party jQuery plugins. I am using the ProvidePlugin to load jQuery - which works fine.
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
I then have a directory called plugins containing misc jQuery plugins. My understanding is the script loader just loads these into the bundled file as strings, and they are eval-ed when the bundle loads. These scripts can then be used as if they were loaded in a regular script tag (i.e., no import needed).
But I just cant get any of the plugins to work. Below is my loaders array. What I am doing wrong (or not doing)?
loaders: [
// process *.vue files using vue-loader
{
test: /\.vue$/,
loader: 'vue'
},
// process *.js files using babel-loader
// the exclude pattern is important so that we don't
// apply babel transform to all the dependencies!
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /plugins\.js$/,
loader: 'script-loader' #tried script too
}
]

I can sympathize with the difficulty of getting jQuery plugins to work with webpack. While I don't have a solution to this specific configuration, I have found it useful to use a cdn to keep development rolling along until further troubleshooting can be done. Below is an example.
In your .html template file:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
In index.js or whatever your main entry point is:
import $ from 'jquery'
In your webpack config:
externals: {
jquery: 'jQuery'
}
Since this approach involves direct use of script tags it may work more reliably, while temporarily sacrificing opportunities for optimization and bundling.

new webpack.ProvidePlugin({
'React': path.resolve(__dirname, "node_modules/react/react"),
'ReactDOM': path.resolve(__dirname, "node_modules/react-dom/dist/react-dom"),
"jQuery": path.resolve(__dirname, "node_modules/jquery/dist/jquery"),
"$": path.resolve(__dirname, "node_modules/jquery/dist/jquery")
})
resolve you lib path

Webpack angularjs copy angularjs templates but don't include in javascript bundle

What I'm trying to do is configure webpack in a way that would copy all the partial html templates that are required in angular 1.x directives etc. into a separate folder (just like the file-loader does for assets referenced from css). I don't want the partial htmls to be included in my javascript bundle but rather have all of them in one folder with hashed names.
I tried configuring the file-loader to do it but when I run webpack in watch mode it also copies the those html in the dist folder again to it appending a new hash and essentially makes an infinite loop as every new html that shows up in that folder is copied, thus a new html appears and again and again. I tried to set an exclude matching pattern for that loader but webpack was still running constantly watching over that folder.
Here is the excerpt of my webpack.config.js file:
module: {
loaders: [
test: /\.html$/,
exclude: /bundle\/templates/,
loader: `file-loader?name=bundle/templates/[name]-[hash].[ext]
]
}
is there a loader that would help me do what I want without resorting to hacks?

Ok I have found the answer. The problem wasn't the file-loader which is configured correctly like this even without the exclude. What caused the infinite loop was a dynamic require that created a regex that matched those copied assets too... So by setting a proper context for this dynamic require the problem was resolved.

In the webpack.config file you can use the same way like this in the loader section.
{
test: /\.html$/,
exclude: path.resolve(__dirname, 'index.html'),
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'views/'
}
},
And in the plugins section of the webpack.config file
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
inject: true
}),
new ExtractTextPlugin('bundle.css')
]
This will copy all the htmls and will be refered from the index.html