I have been learning webpack and babel...
All things are working fine but my webpack config is not working as it should, I think something I missed here.
Here are my webpack.config.js code
const path = require('path');
module.export = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist/assets'),
filename:'bundle.js'
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
publicPath:'/assets/'
},
module:{
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets:['#babel/preset-env']
}
}
}]
}
};
and here are all dev dependencies
{
"name": "chapter-22",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "./node_modules/.bin/webpack src/index.js -o dist/assets/bundle.js --mode production",
"serve": "webpack-dev-server --mode development"
},
"author": "Jabid",
"license": "MIT",
"devDependencies": {
"#babel/cli": "^7.11.6",
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"babel-loader": "^8.1.0",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"#babel/polyfill": "^7.11.5",
"webpack-dev-server": "^3.11.0"
}
}
problem solved , i mistakenly wrote module.export instead of module.exports.
Related
I am trying to make a web application using Vue and Monaco Editor for the frontend and Asp.Net Core 3 on the backend.
I am also using webpack since I'm using Vue single page components.
I am new to webpack, and don't understand all its functionality. Anyway, webpack splits the build into several files (chunks it seems). However, when loading the web page I keep getting the error Uncaught (in promise) ChunkLoadError: Loading chunk 2 failed.
I tried to googling the answer, but nothing I have done has worked so far.
Here are my package.json and webpack.config.json.
Package.json
{
"name": "parvis",
"version": "1.0.0",
"description": "This is a description",
"main": "main.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"serve": "cross-env NODE_ENV=development webpack --devtool source-map --progress --hide-modules",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"keywords": [
"dataflow"
],
"author": "Marin Aglić Čuvić",
"license": "MIT",
"dependencies": {
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.2",
"escodegen": "^1.12.0",
"filbert": "^0.1.20",
"lodash": "^4.17.15",
"monaco-editor": "^0.18.1",
"monaco-editor-webpack-plugin": "^1.7.0",
"vee-validate": "^3.0.8",
"vue": "^2.6.10",
"vue-monaco": "^1.1.0",
"vue-router": "^3.1.3"
},
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/preset-env": "^7.6.2",
"babel-loader": "^8.0.6",
"cross-env": "^6.0.3",
"css-loader": "^3.2.0",
"html-webpack-plugin": "^3.2.0",
"rimraf": "^3.0.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"vue-loader": "^15.7.1",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.2"
}
}
This is my webpack.config.js.
const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
mode: process.env.NODE_ENV,
entry: {
main: './wwwroot/client/src/main.js',
// 'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js'
},
output: {
globalObject: 'self',
path: path.resolve(__dirname, './wwwroot/vuebundles/'),
publicPath: '/wwwroot/vuebundles/',
filename: '[name].build.js',
chunkFilename: '[name].chunk.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
]
},
plugins: [
new VueLoaderPlugin(),
new MonacoWebpackPlugin({
languages: ['javascript', 'csharp']
})
]
};
I understand similar questions have been posted in the past, but most of them have not been answered. Any solution I tried didn't work for me.
It took me an embarrassingly long time to figure out that my publicPath was wrong.
Probably because I didn't use it from webpack before it started creating chunks.
Anyway, the publicPath property should be:
publicPath: '/vuebundles/',
Without "wwwroot".
When I'm trying to install babel to use it webpack and make the configuration, I face this error. I tried different versions from babel and webpack and I tried so many configurations, non of them worked and they keeping throw the same error.
Notice: I already have another plugins like webpack-server and webpack-html but I'm pretty sure they doesn't affect babel.
ERROR in ./node_modules/core-js/modules/es6.regexp.exec.js 1:3
Module parse failed: Unexpected character ' ' (1:3)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
# ./node_modules/core-js/es6/index.js 102:0-37
# ./node_modules/#babel/polyfill/lib/noConflict.js
# ./node_modules/#babel/polyfill/lib/index.js
# multi #babel/polyfill ./src/js/index.js
.babelrc file:
// projectname/.babelrc
{
"presets": [
[ "#babel/preset-env", {
"modules": false,
"targets": {
"browsers": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Safari versions",
"last 2 iOS versions",
"last 1 Android version",
"last 1 ChromeAndroid version",
"ie 11"
]
}
} ]
]
}
webpack.config.js file:
// webpack.config.js
const path = require( 'path' );
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
context: __dirname,
entry: ['#babel/polyfill', './src/js/index.js'],
output: {
path: path.resolve( __dirname, 'dist' ),
filename: 'js/bundle.js',
},
devServer: {
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
}
};
package.json file:
{
"name": "forkify",
"version": "1.0.0",
"description": "forkify project",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
"author": "Ahmed Hossam",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.6.4",
"#babel/core": "^7.6.4",
"#babel/preset-env": "^7.6.3",
"babel-loader": "^8.0.6",
"html-webpack-plugin": "^3.2.0",
"path": "^0.12.7",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.9.0"
},
"dependencies": {
"#babel/polyfill": "^7.6.0"
}
}
We are switching our vue application over to use vue.config.js instead of webpack.config.js, and I am encountering some issues when trying to do a vue-cli-service build. The main error I am seeing is:
Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
For reference, here are our package.json, vue.config.js, and babel.config.js
I'm sure there are some things in the vue.config.js that could be cleaned up, but ignoring some of those things, I believe our VueLoaderPlugin should be set up correctly, and it was working in the webpack.config.js before getting moved over to vue.config.js
package.json
{
"name": "project-ui",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "vue-cli-service serve",
"start-dev": "vue-cli-service serve --mode development",
"build-dev": "vue-cli-service build --mode development",
"build-stg": "vue-cli-service build --mode stage --dest dist-stage",
"build-prod": "vue-cli-service build --mode production --dest dist-prod",
"lint": "vue-cli-service lint",
"test": "jest"
},
"dependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"#babel/core": "^7.0.0-rc.1",
"#babel/preset-env": "^7.0.0-rc.1",
"#vue/cli-plugin-babel": "^3.5.0",
"#vue/cli-plugin-eslint": "^3.5.0",
"#vue/cli-service": "^3.5.0",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.5.0",
"babel-loader": "^8.0.5",
"clean-webpack-plugin": "^2.0.1",
"cross-env": "^5.2.0",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"file-loader": "^3.0.1",
"jest": "^24.5.0",
"jest-serializer-vue": "^2.0.2",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"vue-jest": "^3.0.4",
"vue-template-compiler": "^2.5.21",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1",
"webpack-merge": "^4.2.1",
"webpack-serve": "^3.0.0-beta.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"jest": {
"verbose": true,
"moduleFileExtensions": [
"js",
"vue"
],
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
},
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"description": "## Project setup ``` npm install ```",
"main": "babel.config.js",
"keywords": [],
"author": "",
"license": "ISC"
}
vue.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const env = require(process.env.VUE_APP_NODE_ENV === '' ? './.env' : './.env.' + process.env.VUE_APP_NODE_ENV);
const setPath = function(folderName) {
return path.join(__dirname, folderName);
}
const buildingForLocal = process.env.VUE_APP_NODE_ENV === 'local';
const extractHTML = new HtmlWebpackPlugin({
title: 'Project',
filename: 'index.html',
template: 'public/index.html',
inject: true,
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
html5: true,
minifyCSS: true,
removeComments: true,
removeEmptyAttributes: true
},
environment: process.env.VUE_APP_NODE_ENV,
isLocalBuild: buildingForLocal,
imgPath: (!buildingForLocal) ? 'assets' : 'src/assets'
});
module.exports = {
publicPath: '/',
outputDir: buildingForLocal ? path.resolve(__dirname) : setPath(process.env.VUE_APP_DROP_LOCATION),
configureWebpack: {
entry: [
'./src/main.js'
],
output: {
filename: buildingForLocal ? '[name].js' : '[name].[hash].js'
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
vue: buildingForLocal ? 'vue/dist/vue.js' : 'vue/dist/vue.min.js'
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
js: 'babel-loader'
}
}
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: "babel-loader",
options: { presets: ['#babel/preset-env'] }
}]
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
},
{
test: /\.svg$/,
loader: 'svg-sprite-loader'
},
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]',
useRelativePath: buildingForLocal
}
}
]
},
plugins: [
extractHTML,
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
//filename: "css/styles.[hash].css",
//chunkFilename: "[id].css"
}),
new webpack.DefinePlugin({
'process.env': env
}),
new CleanWebpackPlugin(),
new VueLoaderPlugin()
],
optimization: {
splitChunks: false
},
mode: buildingForLocal ? 'development' : 'production'
},
devServer: {
historyApiFallback: true,
noInfo: false
}
};
babel.config.js
module.exports = {
"presets": [
["#babel/preset-env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}]
],
"plugins": ["#babel/plugin-syntax-dynamic-import"],
"env": {
"test": {
"presets": [
["#babel/preset-env", { "targets": { "node": "current" }}]
]
}
}
}
When running tests using Jest, I need my .babelrc file for it to run.
When running npm start, it only works without the .babelrc file, with the error:
Unknown option: C:\...\babelrc.presets
I'm guessing it's to do with the version of babel I have, but I have tried to following "answer" to this question: Unknown option: .../.babelrc.presets
but to no avail.
Here is my package.json:
{
"name": "reactjs",
"version": "1.0.0",
"description": "",
"main": "src/app.js",
"author": "x",
"license": "ISC",
"scripts": {
"start": "webpack-dev-server --port 3000",
"test": "jest"
},
"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
"unmockedModulePathPatterns": [
"react",
"react-dom",
"react-addons-test-utils",
"fbjs"
]
},
"devDependencies": {
"babel-core": "^6.7.*",
"babel-jest": "^11.0.2",
"babel-loader": "^5.0.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"jest-cli": "^11.0.2",
"react-addons-test-utils": "^0.14.8",
"webpack": "^1.12.*",
"webpack-dev-server": "^1.10.*"
},
"dependencies": {
"react": "^0.13.3"
}
}
and my .babelrc:
{
"presets": [
"react",
"es2015"
]
}
and my webpack config, if it's relevant:
module.exports = {
entry: [
'./src/app.js'
],
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/
}]
}
};
You've listed babel-core#^6 but are using babel-loader#5, update your babel-loader to the most recent version.
I can work with babel src --out-dir lib, but not with npm run XXX using babel-core#6.20.0 and babel-loader#6.2.9 .While I install Babel-cli#6.18.0 CLI globally on my machine, after I install babel-cli# locally project, it can works with npm run.
Clearly I'm missing something incredibly simple here, so I apologize in advance for the dumb question. I have no errors so it's difficult to Google.
I'm trying to export something, anything, from an npm package written in ES6, compiled with babel and webpack.
I followed this http://jamesknelson.com/using-es6-in-the-browser-with-babel-6-and-webpack/ for my webpack setup, leaving it mostly-identical, but find it below for reference. I made a test export repo just to make sure it wasn't anything in the code of the module I was trying to export; find that below as well. Any help would be greatly appreciated; at this point I feel like I'm taking crazy pills.
src/index.js
const test = "test";
export default test;
webpack.config.js
var path = require("path");
var webpack = require("webpack");
module.exports = {
entry: [
"babel-polyfill",
"./src/index"
],
output: {
//path: path.join(__dirname, "lib"),
//filename: "[name].js"
filename: "./lib/index.js"
},
// import bare, .js, and .jsx files
resolve: {
extensions: ["", ".js", ".jsx"]
},
devtool: "source-map",
module: {
loaders: [
{
loader: "babel-loader",
// only load src
include: [
path.resolve(__dirname, "src")
],
// only compile .js and .jsx files
test: /\.jsx?$/,
query: {
plugins: ["transform-runtime", "transform-decorators-legacy"],
//plugins: ["transform-decorators-legacy"],
presets: ["es2015", "stage-0", "react"]
}
},
]
},
debug: true
};
package.json
{
"name": "test-package",
"version": "0.0.1",
"description": "test",
"main": "lib/index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/xxx/xxx.git"
},
"scripts": {
"start": "webpack-dev-server"
},
"keywords": [
"es6"
],
"author": "me",
"license": "MIT",
"bugs": {
"url": "https://github.com/xxx/xxx/issues"
},
"homepage": "https://github.com/xxx/xxx#readme",
"dependencies": {
"babel-polyfill": "^6.5.0",
"babel-runtime": "^6.5.0"
},
"devDependencies": {
"babel-core": "^6.5.2",
"babel-loader": "^6.2.3",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.5.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
}
webpack -p
other project
npm i ../test-package
(verify actually installed, search for "test" in lib/index.js and find what should be the export)
import test from "test-package";
console.log(test);
console.log(Object.keys(test));
output: empty object, empty array
Why not trying
import * as test from "test-package";
And then
console.log(test);