I'm super new to webpack and I do not seem to find a way to bundle JS files as I did with Gulp in a very easy way. I've been searching a bit but didn't find any straight answer to it.
Right now I'm creating two minified files by using in my package.json file, but I would love to have a single one instead:
"scripts": {
"stand-alone": "concurrently 'webpack --config=webpack.config.js src/whatever.vue demos/build.min.js --output-library=whatever1' 'webpack --config=webpack.config.js src/whatever2.js demos/mixin.min.js --output-library=whatever2'",
},
Then my webpack.config.js looks like this:
const webpack = require('webpack');
module.exports = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader',
js: 'babel-loader'
}
}
},
{
test: /\.js$/,
use: {
loader: 'babel-loader',
}
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: false,
}
})
],
};
I believe you are looking for entry points.
In your webpack.config.js module exports object:
Define the entry property:
entry: {
app: ['./path/to/file.js', './path/to/file2.js'],
},
Define the output property:
output: {
path: '/path/to/assets', // ex. '../../wwwroot/dist'
filename: '[name].js', // Substitutes [name] with the entry name, results in app.js
publicPath: '/'
},
Change your script to:
"scripts": {
"stand-alone": "webpack --config=webpack.config.js",
},
If you are using Vue + Webpack, I recommend that you take a look to vue-cli and generate a project using the webpack template. It is more advanced, but you can see the documentation and get an idea of what you are missing.
Run the following:
npm install -g vue-cli // install vue cli globally
vue init webpack my-project // create a sample project
If you want to generate multiple output files, you can have more than one entry point like so:
entry: {
app: ['./path/to/file.js', './path/to/file2.js'],
mixins: './path/to/mixins.js',
vendors: ['./path/to/vendor.js', './path/to/vendor2.js']
},
This will write to disk ./path/to/assets/app.js, ./path/to/assets/mixins.js, /path/to/assets/vendors.js.
Related
I have a project folder structured like this:
project-name/
data/
data.csv
dist/
index.js
src/
index.js
And want a remote directory like this:
project-name/
data/
data.csv
dist/
index.js
> `doSomething("../data/data.csv")`
How do I make this work in both webpack-dev-server and in the production path? If I use copywebpack plugin, then the data goes inside the dist/, which I don't want. But if I use a relative directory without copying the data, then the build fails.
Actually, you should use Webpack csv-loader in your Webpack configuration file like below:
module: {
rules: [
{
test: /\.csv$/,
loader: 'csv-loader',
options: {
dynamicTyping: true,
header: true,
skipEmptyLines: true,
},
},
],
},
And then use it inside your code like below:
import csvPath from './project-name/data/foo.csv'
Can you use an alias?
webpack.config.js:
const path = require("path");
module.exports = {
...
resolve: {
alias: {
Data: path.resolve(__dirname, "./project-name/data/"),
},
},
}
src/index.js:
import data from "Data/data.csv"
Have you tried excluding it in the test? Something like this:
{
entry: "./src/index.js",
module: {
rules: [
{
test: /\.js$/,
use: ["babel-loader or whatever loader you use"],
},
{
test: /\.csv$/,
exclude: ["./data/"],
},
],
},
output: {
filename: "index.js",
path: path.resolve(__dirname, "dist"),
},
},
There is a similar question on how to not bundle files in webpack here
You can use context param.
new CopyWebpackPlugin(
[{
context: './source/',
from: '**/*.html',
to: './public',
force: true
}], {
copyUnmodified: true
}
)
Having a lot of trouble trying to set up a common UI library.
I've set up a yarn workspace which looks like this:
/monorepo
/common-16.13
/react-app-16.8.
/another-app-16.13
I then import common-16.13 into react-app-16.8 and use one of the components like this:
/react-app/home.js
import {SharedComponent} from "common"
However when I run the application I get this error:
react.development.js?80c6:1465 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
Inside common I have:
/src/components/SharedComponent.jsx:
import React from 'react';
import { Box } from 'material-ui/core';
export const ShareComponent = ()=> <Box>SharedComponent</Box>;
/src/components/index.js:
export { SharedComponen t} from 'SharedComponent';
/src/index.js:
export {SharedComponent } from './components';
package.json:
{
"name": "#libs/common",
"main": "dist/index.js",
"scripts" {
"build": "webpack"
}
}
/common/webpack.config.json:
const webpack = require('webpack');
module.exports = env => {
// Each key value generate a page specific bundle
entry: {
index: './src/index.js'
},
output: {
path: path.resolve(ROOT_PATH, 'dist'),
publicPath: '/',
filename: 'index.js',
library: '#libs/common',
libraryTarget: 'umd'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'happypack/loader?id=jsx',
exclude: /node_modules/
}
]
},
// Automatically resolve below extensions
// Enable users to leave off the extensions when importing
resolve: {
symlinks: false,
extensions: ['*', '.js', '.jsx', '.css', '.scss']
},
plugins: [
new HappyPack({
id: 'css',
threadPool: happyThreadPool,
loaders: [
'cache-loader',
'style-loader',
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: true
}
},
'css-loader',
'sass-loader'
]
}),
new HappyPack({
id: 'jsx',
threadPool: happyThreadPool,
loaders: [
'cache-loader',
{
loader: 'babel-loader'
}
]
})
]
}
So I bundle common. Then in my react-app I yarn install #lib/common. Then I import SharedComponent into my react app:
/react-app/src/index.js:
import { SharedComponent } from '#libs/common';
/react-app/webpack.config.js:
{
// Each key value generate a page specific bundle
entry: {
index: './src/index.jsx',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
]
},
// Automatically resolve below extensions
// Enable users to leave off the extensions when importing
resolve: {
extensions: ['*', '.js', '.jsx', '.css', 'scss'],
alias: {
react: path.resolve('./node_modules/react'),
}
},
output: {
path: path.resolve(ROOT_PATH, 'dist'),
publicPath: '/',
filename: '[name].bundle.js',
chunkFilename: '[id].bundle.js'
},
};
It bundles fine but when I run the application I run into the error above. I can't tell if it's related to how i'm exporting my common components, but it it seems right. I read I should have a react alias in my app, which I do. I'm using yarn workspaces and not sure if that's related somehow.
Run the following command:
yarn why react
If the result shows that you have multiple versions of react:
Remove all local installations
Install a single version of React in the root workspace instead
this is probably a bug coming from yarn
issue:
https://github.com/yarnpkg/yarn/issues/8540
I did a workaround by:
exporting my common package into a new private github repo
create access token
https://docs.github.com/en/free-pro-team#latest/github/authenticating-to-github/creating-a-personal-access-token
in my package.json dependencies I added:
"common": "git+https://{accessToken}:x-oauth-basic#github.com/{user}/{repo}.git",
It happened to me when when migrating existing project to mono repo.
It was caused because I copied the lock files into the packages folders.
I've solved it by deleting any node_modules and any lock(yarn.lock and package-lock) from any package folder and then running yarn install on root directory.
I am new to React world, and I'm trying to integrate it in a new project that uses ASP MVC .net.
I want to use React.js with the create react app, not interested in the React.net integration.
I have seen a couple examples that don't use the CRA command, instead they configure the build set up themselves (webpack, babel, etc), I was trying that approach, but I'm worried that if the project grows I will lose track of updates, etc.
In that example, you need to add whatever the output of the webpack bundled file is into your index.cshtml.
<div id="root"></div>
#section scripts {
<script src="~/Scripts/React/dist/bundle.js"></script>
}
But when I use the CRA command I don't have access to that file during development, only when I build for production.
I'm a little lost here, what is the best way of achieving what I need with CRA without ejecting?
I really appreciate any help :)
I don't think it is possible to do what you want (and I wanted too) with CRA and I believe the complexity you will end up after ejecting is too high to be manageable.
My starting point: a big ASP MVC application running an Angular.js front-end within a single MVC Controller/View (the default index page).
My goal: stop growing the Angular.js app and develop new functionality with React whenever possible, i.e. when it is independent of existing UI; let's call it new modules. I still need to keep everything within the same MVC app because it provides authentication and authorization among other things.
The solution: a custom (with respect to CRA) webpack build toolchain whose starting point is the youtube example you provided. Thanks to this other tutorial, I have been able to add hot reload and after a few hours of trial and error I added loaders for css, images and fonts. The bundled result is for sure less optimal than the outcome of CRA, but it coexists with the old Angular.js so I believe it is good enough.
Here is some code.
webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const webpack = require('webpack');
const PUBLIC_PATH = 'Scripts/react/dist';
module.exports = (env, arg) => {
const isDevelopment = arg.mode === 'development';
const fileLoaderName = file => {
if (isDevelopment)
return '[folder]/[name].[ext]';
return '[folder]/[name].[ext]?[contenthash]';
};
return {
entry: './app.js',
watch: isDevelopment,
devtool: isDevelopment ? 'source-map' : undefined,
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
'babel-loader',
{
loader: 'eslint-loader',
options: {
fix: true
}
}
],
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
name: fileLoaderName,
publicPath: PUBLIC_PATH,
postTransformPublicPath: p => `__webpack_public_path__ + ${p}`
}
}
]
},
{
test: /\.(woff|woff2|ttf|otf|eot)$/i,
use: [
{
loader: 'file-loader',
options: {
name: fileLoaderName,
publicPath: PUBLIC_PATH,
postTransformPublicPath: p => `__webpack_public_path__ + ${p}`
}
}
]
}
],
},
plugins: [
new webpack.ProgressPlugin(),
new WebpackNotifierPlugin(),
new BrowserSyncPlugin(),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({ filename: "bundle.css" })
],
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
}
};
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-transform-runtime"
]
}
.eslintrc
{
"extends": [
"plugin:react-app/recommended",
"prettier"
],
"plugins": [
"prettier"
],
"rules": {
"prettier/prettier": ["error"],
"quotes": [
"error",
"single",
{ "allowTemplateLiterals": true }
]
}
}
.prettierrc
{
"singleQuote": true
}
package.json
...
"scripts": {
"start": "webpack --mode development",
"build": "webpack --mode production",
...
},
There are still a few useful things that are missing and I plan to add in the future, like css modules and other css optimizations, but I think it's not going to be to difficult.
I use vue.js and vue-cli to create a project.
vue init webpack my-project
I am trying to create a component using http://photo-sphere-viewer.js.org/, thus I installed it using
npm install --save photo-sphere-viewer
Then it was downloaded in node_modules and appears in the package.json under dependencies as
"photo-sphere-viewer": "^3.2.3",
And I tried to import in a component, VR-Pano.vue, inside the script tag using
import PhotoSphereViewer from 'photo-sphere-viewer';
And
var PhotoSphereViewer = require('photo-sphere-viewer');
But when I run npm run dev
This dependency was not found:
photo-sphere-viewer in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/VR-Pano.vue
I tried:
npm cache clean && npm update -g
Did some researches on webpack, but didn't really know what's going on as I am not too familiar with webpack. I was expecting it to be a simple process, but I suspect something isn't setup properly for my webpack or I did something very stupid.
Here is my webpack.base.conf.js
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/main.js'
},
// target: 'electron-main',
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': resolve('src')
}
},
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('[path][name].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
I took this debugging opportunity to learn more about npm and webpack.
It looks like the creators of photo-sphere-viewer did not specify where their "main" file was, the file that gets returned when you import or require. I think by default npm looks for index.js at the project root. But a lot of times, package creators put their distribution files under a dist or lib directory. The photo-sphere people did this, but did not specify the location in their package.json. The solution is to add
"main":"./dist/photo-sphere-viewer.min.js"
to the photo-sphere-viewer package.json file. Make sure to add a trailing comma if you're not putting it at the very end. Also i would recommend filing an issue on their Github, this seems like a bug..
Alternatively, you can also do
import PhotoSphereViewer from 'photo-sphere-viewer/dist/photo-sphere-viewer.min.js';
So i am trying to figure out how to use webpack to replace our current brunch build process. Basically we have an angular 1 app which doesnt utilise requires or imports at all and I want to have webpack just concat+transpile the files (there are both coffee and sass files and ill need to be able to watch and create source maps using the usual settings). This angular app is sitting inside another application which is using webpack extensively.
What is the simplest way to accomplish this? Is this even possible without the app using any form of javascript modules?
Here is my current config:
var webpack = require( "webpack" );
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require("path");
var glob = require("glob");
const exportConfig = {
entry: {
app: glob.sync('./front-end/applications/core/app/**/*.coffee'),
vendor: ['angular']
},
output: {
filename: "app.bundle.js",
path: path.join( __dirname, "../www_root/build" ),
},
debug: true,
module: {
loaders: [
{
test: /\.coffee$/,
loader: "coffee-loader"
},
{
test: /\.sass$/,
loaders: ["style", "css", "sass"]
},
{
test: /\.(jsx|es6)/,
exclude: /(node_modules|www_root\/bower)/,
loader: "babel",
},
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js"),
new ExtractTextPlugin("[name].css", {
allChunks: true
}),
]
}
module.exports = exportConfig
I basically just get an output file with an error for each of the files obviously:
(function webpackMissingModule() { throw new Error("Cannot find module \"./front-end/applications/core/app/components/app/module.coffee\""); }());
Thanks!