Im new to React development with Webpack having set up a boilerplate by following this tutorial article.
I get the jist of how webpack works and can follow along with the article but having trouble understanding how my particular webpack.config.js is creating the files and bundles that it does and how to modify these to achieve some custom function.
webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
],
mode: 'development'
};
I understand that the rules object grabs all .js files (excluding those in node_modules) and compiles them to standard JS using babel. Then it grabs all the .html files and creates an html file including the bundle using html-loader. The HtmlWebPackPlugin is implemented here. Mode indicates to create a development version of the bundle.
My folder structure is as follows:
- /dist (generated by webpack)
- index.html
- main.js (webpack bundle)
- /src (created manually)
- /components
- components.js (react components)
- index.html
- index.js
- .babelrc
- package.json (npm init -y)
- webpack.config.js (manually configured)
Questions:
Webpack creates the /dist directory and the files contained in it. Where in the configuration is it indicated that this directory be named "dist" and the main bundle file be named main.js?
Where is it indicated that /dist be at the root of the project. Suppose I wanted the directory to be named foo and placed two levels up (../../foo/)
In webpack.config.js the "rules" object has keys defined as test to indicate which files types to bundle. test: /\.js$/, & test: /\.html$/ Is "test" an arbitrary value or a default webpack configuration key.
I was looking at these docs with regard to webpack configuration but the syntax was very different from what is shown here.
1 & 2:
you can set output config like this:
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
filename
name of output bundle file. default: main.js
path
location of save output files. default: /dist
to get root of project you have to use path!
import path:
var path = require('path');
and use like this:
path.resolve(__dirname, DIRECTORY_NAME)
3:
test is default webpack configuration key and its to specify that loader file type support like html-loader.
Related
I have a very simple tutorial project that I built which consists of no more than 100-200 lines of code.
When I build this project with webpack I end up with a bundle.js file which is being flagged as being above the recommended size of a bundle.js file. I find this unsettling because I know that my code is very small. How is it that with only using a few things like vuex, vue.js and a few node modules ending up with such an oversized bundle.js?
I understand that it packages everything up for us, but I find it hard to believe that with such a small project webpack would be unable to get it down to a much smaller size. I am concerned that this might have something to do with the sheer number of node modules I have in that project root directory.
So my question is this: does the webpack build depend at all on what node-modules are in my directory under the /node_modules/ folder? If not, then how have I already exceeded the recommended size for a bundle.js with my first ever vue project?
This brings me to another question which I have been very unsure of: Is it normal for vue to copy over almost my entire node_modules directory from my root user directory? When I watch tutorials, the "vue create My_App" command seems to finish executing in no more than 10-20 seconds, but when I run the command it can take minutes. When I was wondering what it could be I saw that it copied hundreds and hundreds of node_modules over... is that entirely necessary? Is there a configuration or setting I should have set or changed that I missed?
Thank you all for any insight you might be willing to offer, big or small.
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/'
},
mode: 'development',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
// this will apply to both plain `.js` files
// AND `<script>` blocks in `.vue` files
{
test: /\.js$/,
loader: 'babel-loader'
},
// this will apply to both plain `.css` files
// AND `<style>` blocks in `.vue` files
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin(),
],
optimization: {
minimizer: [new UglifyJsPlugin()],
},
};
Use tools like https://nx.dev/
You can find video here https://youtu.be/mVKMse-gFBI
Say I have following project structure (Well its more complex than below structure):
CommonComponents
CommonComponentA
CommonComponentB
package.json
webpack.config.js
.babelrc
ModuleA
ComponentC //import CommonComponentA
ComponentD
package.json
webpack.config.js
.babelrc
ModuleB
ComponentE //import CommonComponentB
ComponentF
package.json
webpack.config.js
.babelrc
I compile, bundle and utilize ModuleA and ModuleB separately. When I switched to babel 7, importing modules from CommonComponents directory stopped working. Babel ignores files which are outside current working directory and doesn't transpile them so webpack compilation fails complaining 'Unexpected token' at imported component.
From what I have understood so far, they have changed the way .babelrc lookup happens. I really can't wrap my head around the terms 'root', 'babelrcRoots', etc.
Can someone explain what I will need to do in order to compile ModuleA and ModuleB succesfully from their respective working directory ?
Based on the real structure of your project (it is a monorepo setup with a root folder?) and the webpack config you are using, you can have several ways to solve this, one way could be by adding the include key on you babel loader rule on webpack configuration files, you will end up with something like this:
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
include: path.resolve(__dirname, '../CommonComponents'),
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
]
}
as stated before, this depends on your real project structure, but you can give it a try and check it works.
I am using:
react for page rendering.
typescript directly(without babel) transpiling tsx to ES5 for browsers
webpack to generate codes separately
babel-polyfill to be packaged in the vendor.js but not referenced by typescript codes
I want to package javascript libraries and my common codes into one vendor.js and generate separately [name].js files with [name].html (with template) referencing both vendor.js and [name].js for each [name].tsx (which conatins only a class definition [name] that extends React.Component<P,S>) with HtmlWebpackPlugin.
[name].tsx may import modules. Modules included in vendor.js cannot be included in [name].js, and the others must be normally included in [name].js
I have read the document form webpack official site and still have no idea how to do it.
I did find some guides that realize a multiple page website but having all libraries included in the separate [name].js files, which means the javascript libraries are redundantly included in every single [name].js and it is surely not expected.
And I found some guides about externals, but it can only be used on existing js files, not generated bundle files.
Here is my current webpack.config.js which supports only single page:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
"index.js": ['babel-polyfill', './src/index.tsx']
},
output: { filename: '[name]' },
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
module: {
rules: [{
test: /\.(ts|tsx)$/,
loader: 'ts-loader',
exclude: '/node_modules/'
}, {
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader'
},]
},
resolve: {
extensions: ['.webpack.js', '.web.js', '.ts', '.js', '.tsx']
},
devtool: "source-map"
}
Is there any way to have it support multiple pages as described?
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. :)
new to Webpack. I was thinking about migrating JS part of my application to it. However, I don't like the way it handles CSS. Would like to keep it easy and link them on my own. Unfurtunately documentation wasn't very helpful, same with the search results.
So, what do I need exactly?
Stylus compilation from lots of .styl files to static .css.
There will be three static stylesheet files (entry points?), but completely different from entry points of JS part of an application.
Also some "watch" feature, which would compile css when one of source .styl files has been changed.
Is there somebody who could point me in right direction, maybe write a config? Is this even possible with Webpack or should I stay with Grunt?
Thanks for any useful answer.
To learn more about the details of Webpack you can refer to this online book SurviveJS - Webpack, which will walk you through most of concepts related to Webpack.
To accomplish what you need you can start by creating webpack.config.js in the root of your project and it can be like this:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './entry.js', // you application entry point
output: {
filename: 'bundle.js', // resulting bundle file
path: './public' // the output folder path
},
module: {
loaders: [
{
test: /\.styl$/,
loader: ExtractTextPlugin.extract("style", "!css!stylus") // plugin used to extract css file from your compiled `styl` files
}
]
},
plugins: [
new ExtractTextPlugin('style.css') // output css bundle
]
};
Then require your stylus files in you entry.js file require('./style.styl');
Don't forget to install required loaders and plugins
npm install --save-dev css-loader sass-loader style-loader extract-text-webpack-plugin