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.
Related
I'm creating a javascript project. To create it I'm using gulp and babel.
My problem is that I can't develop my code over multiple file, so I'm search a solution to 'enable' importing. At the moment I'm trying to configure webpack.
The Gulp Task is this:
gulp.task('webpack', () => {
return webpack_stream(webpack_config)
.pipe(rename('webpack_code.js'))
.pipe(gulp.dest('.build/asset/webpack/'));
});
The webpack.config.js is this:
module.exports = {
entry: ['./src/asset/js/main.js'],
output: {
filename: 'bundle.js',
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.(js)$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: [
['env', 'stage-0',{ modules: false }],
],
},
},
],
},
resolveLoader: {
modules: ['./node_modules'],
},
resolve: {
modules: ['./node_modules'],
},
target: 'node',
};
My current error is this:
Error in plugin 'webpack-stream'
Message:
multi ./src/asset/js/main.js
Module not found: Error: Can't resolve 'babel-loader' in ...
What's wrong?
Another Question: What's I have to put as value of entry key? Only the entry point js file or the whole files of the project?
Thanks!!
What's wrong?
I'd guess that in your project, your Webpack instance is not finding the babel loader because of your config / environment specific issues.
I've had the exact same issue as you. Here are some troubleshooting steps for to check first:
See if babel-loader is actually installed. I know it is simple, but it can save you time.
Check which Webpack/Babel versions you're dealling with in your package.json file. I'm using Webpack 4 and Babel 8. Sounds like some newer versions doesn't accept this: use: 'babel' in your webpack.config file. You need to ensure that the -loader is being used as it follows: use: 'babel-loader'.
Reinstall your node_modules folder. Sometimes it works.
Another Question:
What's I have to put as value of entry key?
Only the entry point js file or the whole files of the project?
Accordingly to Webpack's docs:
The entry object is where webpack looks to start building the bundle. The context is an absolute string to the directory that contains the entry files. - Webpack Ref
Considering that, you should pass to the entry object, the path of a folder or a file that will be used to generate your final JS file with all your modules in it.
If you have nested files, that you don't import as modules, I think you'll have to head to the docs and see this specific case.
But if this files are nested and are being imported as modules, in your entry file/folder, they will be generated in the output file.
I know it's not much but following these steps, helped me to solve it. :)
Webpack claims to manage module dependencies including image files. I understand that the following webpack config allows me to require jpg files from JS/CSS:
module.exports = {
module: {
rules: [
{
test: /\.jpg$/,
use: [ 'file-loader' ]
}
]
}
}
using url(/image.png) or require('./image.png'), but how would I include an image from an HTML file?
<img src="/image.png">
I know I can use copy-webpack-plugin to copy over static files into the output directory, but I'm wondering if there is a way to require images directly from HTML.
'html-loader' will do this for you by default, however if you are reading this behavior from your main index.html page, you will need to make webpack treat it as module also. Luckily html-webpack-plugin can do this for you in conjunction with html-loader: html-webpack-plugin.
I have the following weback loader:
loaders: [
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
]
I am storing all my svgs in a /res/ folder, but when I build my project I cannot access my resources with:
<img src="img.svg" />
What could be wrong with my loader?
Without more detail, as to where that snippet of HTML is actually being used or how the rest of your webpack config is setup, my best guess is that you need to actually require the .svg file so that webpack will process it.
var svgImage = require('./img.svg');
/// svgImage can now be used in a template
When webpack runs your files through the are various loaders you have installed and will create a new file named to a hash: img.svg -> {someHash}.svg
This can be overridden in your webpack config.
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml&name=img-[hash:6].svg'}
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
In using webpack to build my project, I typically require modules in CommonJS from npm modules. I need moment-timezone in my project, however in building the package you must also build all the data from moment-timezone, which can be quite a lot.
Additionally the build is failing with the following error:
ERROR in ./~/moment-timezone/data/packed/latest.json
Module parse failed: /site/node_modules/moment-timezone/data/packed/latest.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
| "version": "2015a",
| "zones": [
| "Africa/Abidjan|LMT GMT|g.8 0|01|-2ldXH.Q",
# ./~/moment-timezone/index.js 4:15-51
At this point I am not as concerned with the build failing, as I am about the size of the build if it actually succeeds. Though, obviously the failing build will need to be addressed too at some point.
I would appreciate any pointers on how to handle this, especially if any of you have encountered this same issue using webpack (or browserify too, probably).
You can fix this by adding the JSON loader to your webpack configuration.
$npm install json-loader
And add it to your loaders in webpack.config.js. Don't forget to add the extension as well.
{
module: {
loaders: [
{include: /\.json$/, loaders: ["json-loader"]}
]
},
resolve: {
extensions: ['', '.json', '.jsx', '.js']
}
}
If you're using webpack 2.x (currently in beta)
npm install json-loader
then include this in your rules
{
test: /\.json$/,
loader: "json-loader"
}