I have reactJS-webpack-grunt app.
I'd like to upload my app to different environments, each with its own settings.
Currently I have one settings.js file, and when webpack does its thing (grunt build or serve), the settings gets hidden inside assets/main.js.
Currently, in every file that uses settings I've done: var settings = require('settings'); and in webpack.config.js I've declared an alias
resolve: {
root: [
__dirname,
path.join(__dirname, 'src', 'main', 'assets')
],
alias: {
settings: __dirname + "/src/scripts/settings.js"
},
extensions: ['', '.js', '.jsx']
},
My intention is to have a different settings file, with JSON-like structure, that any non-technical guy could change easily, and to upload my app several times, every time compiling the same code, only settings.js stays untouched.
Related
I'm using Webpack to assemble dist directories with environment-specific configs (manifest.json) and file structures
My issue is that webpack wants me to have an empty src/index.js file
In certain environments, the compilation happens after I've assembled the /dist folder, zipped, and uploaded to their service.
Is there any way to avoid index.js and just run CopyWebpackPlugin?
I'm currently looking into using manifest.json or manifest.js as the entry for this build, since this file is the connection between an options HTML app, a browser content script, icon.png, etc
Both CleanWebpackPlugin and HtmlWebpackPlugin have given me tons of problems, and it seems that using loaders may be the correct, pure, synchronous way to go
My current inspiration uses a simple module.exports with arguments[0] source from the previous loader to easily transform the source
I did come up with a hack (un-maintanable) solution to delete the unused file afterwards, which may be of use to someone.
webpack.config.js
module.exports = {
name: 'manifest',
entry: {
manifest: './src/manifest.json',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'DELETED.js',
},
plugins: [
new CopyWebpackPlugin({
patterns: [
{from: './src/manifest.json'},
{from: './assets/images/icon.png'},
],
}),
new RemoveFilesWebpackPlugin({
before: {
log: false,
include: [
'dist',
],
},
after: {
log: false,
include: [
'dist/DELETED.js',
],
},
}),
],
mode: 'none',
}
The problem with this idea is that manifest.json is not being used to gather it's own assets -- the assets are declared in this bundler's config.
I have two additional webpack.config.js files for
generating an HTML options page using HtmlWebpackPlugin
bundling the main script
but as mentioned, maintenance requires digging in the build file, rather than just editing source and requiring relative paths
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
My webpack.config.js contains the following part:
resolve: {
extensions: ['*', '.js', '.ts', '.tsx'],
modules: [
path.resolve(__dirname, "src"),
path.resolve(__dirname, "node_modules"),
],
alias: {
Design: path.resolve(__dirname, "src/Theme/Default")
}
},
There are 2 folders in this src/Theme folder: Default & Dark. I want to switch it in the alias setting when needed, it's not user controlled.
The import I use:
import Page from 'Design/Components/Page';
Webpack is working correctly with this but PhpStorm 2018.2 does not recognize this path as correct.
My PhpStorm settings for webpack are set to the path of my webpack.config.js.
More details and examples / logs can be found here: https://youtrack.jetbrains.com/issue/WI-43146
Webpack aliases resolving is not supported when editing TypeScript files, current TypeScript support implementation uses only the TypeScript resolution logic because we need to keep integration with the TypeScript language service (that is not aware of webpack aliases).
You can configure similar mappings in your tsconfig.json file, like:
"baseUrl": "",
"paths": {
"Design/*": ["src/Theme/Default/*"]
}
If you miss support for webpack resolving in TypeScript, please vote for WEB-29207
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 still fairly new to webpack 2 but I've got most of my configurations working so far. The only thing I'm having some difficulty understanding is that when I run "npm run build" to bundle my files into my "dist" folder I noticed that only 1 of my images are being bundled. I'm using 'file-loader'. FYI all my images still show on my dev-server when I run it and appear under the public paths I assigned. It's only my local output that's not displaying all the images. Anyone know what's going on?
My Folder Structure
webpack.config.js
module.exports = {
mode: "development",
entry: {
app: "app"
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
publicPath: "/"
},
devServer: {
publicPath: '/',
port: 3000
},
module: {
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/',
publicPath: 'images/'
}
}
]
}
]
}
}
As you can see in my folder structure, it always builds with only one of my images being outputted. It's not a major issue (I don't think) since all the images still work when I run the app, but I would appreciate it if anyone could help me understand why only one image is outputting to my local 'dist'. Thank you.
Webpack only writes images to disk that you require. This is one of the benefits of Webpack, it only includes assets that your application needs, so Webpack will guarantee those images exist when you deploy.
To add more images to your output, require them either from your Javascript or CSS with url()s
Note that if you're using the dev server, Webpack doesn't write anything to disk, and keeps all compiled assets in memory.