Webpack build not updating contents on Apache server - apache

I have an Angular2 webpack project which works fine in local(webpack-dev-server) but once I deploy to my server(Apache), and run "npm run build", the build does not get updated(no errors shown).I tried removing my dist folder but still no change.No changes made to html are shown(it was working perfectly fine before)
webpack.config.js -->
var path = require('path'),
webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: {
app: './src/main'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'app.bundle.js'
},
resolve: {
extensions: ['.js', '.ts','.tsx', '.css', '.scss', '.html']
},
module: {
rules: [{
test: /\.ts$/,
use: ['awesome-typescript-loader', 'angular2-template-loader', '#angularclass/hmr-loader', 'angular2-router-loader'],
exclude: [/\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
},
{
test: /\.scss$/,
exclude: [/node_modules/],
use: [
'raw-loader',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
// Or array of paths
resources: [
'./src/assets/sharedStyles/_variables.scss',
'./src/assets/sharedStyles/_mixins.scss'
]
},
}
]
},
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.(eot|ttf|wav|mp3|pdf|woff2|woff|png|svg|gif)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }
]
},
// plugins
plugins: [
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)#angular/,
__dirname // location of your src
),
new HtmlWebpackPlugin({
template: './src/index.html',
chunksSortMode: 'dependency'
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new CopyWebpackPlugin([{
from: './src/assets',
to: './assets',
copyUnmodified: true,
force: true
}])
],
devServer: {
contentBase: path.join(__dirname, "src/"),
compress: true,
port: 3000,
historyApiFallback: true,
inline: true
}
};
package.json-->
{
"name": "App",
"version": "1.0.0",
"scripts": {
"postinstall": "typings install",
"typings": "typings",
"start": "webpack-dev-server --public --port 3000 --hot --host 0.0.0.0",
"build": "webpack",
"build-prod": "webpack -p"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
"dependencies": {
"#angular/animations": "^4.1.2",
"#angular/common": "^4.1.2",
"#angular/compiler": "^4.1.2",
"#angular/compiler-cli": "^4.1.2",
"#angular/core": "^4.1.2",
"#angular/forms": "^4.1.2",
"#angular/http": "^4.1.2",
"#angular/platform-browser": "^4.1.2",
"#angular/platform-browser-dynamic": "^4.1.2",
"#angular/platform-server": "^4.1.2",
"#angular/router": "^4.1.2",
"#angular/upgrade": "4.1.2",
"angular-in-memory-web-api": "~0.1.5",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"d3": "^4.9.1",
"html-webpack-plugin": "^2.28.0",
"jquery": "2.x.x",
"jquery-ui": "^1.10.3",
"jquery-ui-npm": "^1.12.0",
"ngx-bootstrap": "^1.6.6",
"primeui": "^4.1.15",
"reflect-metadata": "0.1.9",
"rxjs": "5.1.0",
"systemjs": "0.19.39",
"typescript": "^2.4.1",
"zone.js": "0.7.2"
},
"devDependencies": {
"#angularclass/hmr-loader": "^3.0.2",
"#types/jquery": "^2.0.33",
"angular2-router-loader": "^0.3.4",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.0.3",
"concurrently": "^3.0.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.10.1",
"google-maps": "^3.2.1",
"lite-server": "^2.2.2",
"ng2-cookies": "^1.0.6",
"ng2-datetime": "1.2.1",
"ng2-popover": "0.0.13",
"node-sass": "^4.5.0",
"primeng": "^4.1.0-rc.2",
"primeui": "^4.1.15",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.0",
"sass-resources-loader": "^1.2.0",
"smartadmin-plugins": "^1.0.15",
"style-loader": "^0.13.2",
"to-string-loader": "^1.1.5",
"ts-loader": "^2.0.0",
"typings": "2.1.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"
}
}

Related

How can I create two different entry points for devServer and for production in webpack.config file?

I have a npm accessible-date-picker package that is a React component. It is setup using webpack. I would like to have two entry points: one for the production environment that builds from the demo folder and one for the production environment. The idea is to make it possible to work with an example code in the Demo folder for improvements and when everything is done, build and publish as a npm package.
I can't seem to get the correct syntax down to make two entry points work. Either I get a production ready version that fails when development is run or I get a production ready version.
Here is the folder structure for the project:
|dist
|demo
||index.tsx
|src
| | components
| | container
| | | DatePicker.tsx
Here is webpack.config file that works like a charm for production but can't get development server working. I am not sure how to add a second entry point for the devServer:
entry: "./src/container/DatePicker.tsx",
devtool: "source-map",
devServer: {
contentBase: path.join(__dirname, './dist'),
compress: true,
port: 4000,
},
resolve: {
alias: {
'react': path.resolve(__dirname, './node_modules/react'),
'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
},
extensions: [".tsx", ".ts", ".js", ".css", ".scss"],
},
externals: {
react: {
commonjs: "react",
commonjs2: "react",
amd: "React",
root: "React"
},
"react-dom": {
commonjs: "react-dom",
commonjs2: "react-dom",
amd: "ReactDOM",
root: "ReactDOM"
}
},
output: {
path: path.join(__dirname, './dist'),
filename: 'accessible-datepicker.js',
libraryTarget: 'umd',
publicPath: '/dist/',
umdNamedDefine: true
},
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript",
],
},
},
},
{
test: /\.css$/i,
use: [
"style-loader",
"#teamsupercell/typings-for-css-modules-loader",
{
loader: "css-loader",
options: { modules: true },
},
],
},
],
}
};
Last but not least the package.json:
"scripts": {
"start": "webpack serve",
"build": "webpack --mode production",
"prepublish": "rm -rf ./dist && npm run build",
"test": "jest"
},
"dependencies": {
"moment": "^2.29.1"
},
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"#babel/core": "^7.12.7",
"#babel/plugin-transform-runtime": "^7.12.1",
"#babel/preset-env": "^7.12.7",
"#babel/preset-react": "^7.12.7",
"#babel/preset-typescript": "^7.12.7",
"#babel/runtime": "^7.12.5",
"#teamsupercell/typings-for-css-modules-loader": "^2.4.0",
"#types/fork-ts-checker-webpack-plugin": "^0.4.5",
"#types/jest": "^26.0.15",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"#types/webpack": "^4.41.25",
"#types/webpack-dev-server": "^3.11.1",
"#typescript-eslint/eslint-plugin": "^4.8.1",
"#typescript-eslint/parser": "^4.8.1",
"#wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.1",
"css-loader": "^5.0.1",
"enzyme": "^3.11.0",
"enzyme-to-json": "^3.6.1",
"eslint": "^7.14.0",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"fork-ts-checker-webpack-plugin": "^6.0.3",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"node-sass": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"ts-jest": "^26.4.4",
"ts-node": "^9.0.0",
"typescript": "^4.1.2",
"webpack": "^5.6.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
}
}
If someone could point out how to write a second entry point that would work with a development server would be of great help.

.eslintrc.js file being ignored with create react app and craco

This has been working great for the last couple of years, but we just upgraded a slew of libraries and now eslint, when we run our app, is not referring to our eslintrc file. It's throwing errors for rules that we have either disabled or set to warning. I can type junk into the eslintrc file and nothing errors on build.
The ESLint extension in VSCode does recognize it and running eslint CLI works as expected. When running npm run start or npm run deploy-build, it seems to ignore the eslintrc file.
.eslintrc.js removed many rules for brevity
module.exports = {
"env": {
"browser": true,
"jest": true
},
"extends": "airbnb",
"globals": {
"_satellite": true
},
"parser": "babel-eslint",
"rules": {
"comma-dangle": 0,
"eol-last": 0,
...
"jsx-a11y/anchor-is-valid": [
2,
{
"components": [
"Link"
],
"specialLink": [
"to"
]
}
],
...
"react/jsx-curly-newline": 0, // this is one rule that I'm specifically chasing
...
},
"settings": {
"import/resolver": {
"node": {
"paths": [
"src"
]
}
}
}
}
craco-config.js
const path = require('path');
const { ESLINT_MODES } = require('#craco/craco');
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
jest: {
configure: {
setupFiles: [
'jest-localstorage-mock',
'<rootDir>/jest/global_mocks.js',
'<rootDir>/jest/global_variables.js'
],
testResultsProcessor: 'jest-sonar-reporter',
snapshotSerializers: [
'enzyme-to-json/serializer'
],
collectCoverageFrom: [
'src/**/*.js',
'!src/registerServiceWorker.js',
'!src/**/*.stories.js',
'!src/**/*.styles.js'
],
coverageThreshold: {
global: {
branches: 60,
functions: 70,
lines: 80,
statements: 1
}
},
clearMocks: true
}
},
eslint: {
mode: ESLINT_MODES.file
},
webpack: {
plugins: [
new StyleLintPlugin({
configBasedir: __dirname,
context: path.resolve(__dirname, 'src'),
files: ['**/*.scss']
})
]
}
};
local environment
EXTEND_ESLINT=true
REACT_APP_ENV=local
...
package.json
{
"name": "search",
"version": "1.0.0",
"private": true,
"dependencies": {
"#datadog/browser-rum": "^1.12.8",
"#okta/okta-react": "^3.0.4",
"axios": "^0.18.1",
"connected-react-router": "^6.7.0",
"core-js": "^3.6.5",
"debounce": "^1.2.0",
"eslint-plugin-react-hooks": "^4.1.0",
"fast-text-encoding": "^1.0.2",
"focus-within-polyfill": "^5.0.4",
"history": "^4.10.0",
"jshashes": "^1.0.7",
"lodash.groupby": "^4.6.0",
"lodash.sortby": "^4.7.0",
"moment": "^2.24.0",
"moment-timezone": "^0.5.28",
"prop-types": "^15.6.2",
"qs": "^6.5.2",
"react": "^16.13.0",
"react-app-polyfill": "^1.0.6",
"react-click-outside": "^3.0.1",
"react-cursor-position": "^3.0.3",
"react-dom": "^16.13.0",
"react-easy-swipe": "0.0.17",
"react-flexbox-grid": "^2.1.2",
"react-html-parser": "^2.0.2",
"react-inlinesvg": "^1.1.5",
"react-lazyload": "^2.6.2",
"react-number-format": "^4.0.5",
"react-redux": "^7.2.0",
"react-router": "^5.1.0",
"react-router-dom": "^5.1.0",
"react-scripts": "^3.4.1",
"react-slick": "^0.23.1",
"react-sticky-el": "^1.0.20",
"react-toastify": "^4.2.0",
"react-transition-group": "^4.4.0",
"reactjs-popup": "^1.5.0",
"redux": "^4.0.0",
"redux-devtools-extension": "^2.13.8",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"rxjs": "^6.5.5",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.83.0",
"slick-carousel": "^1.8.1",
"smoothscroll-polyfill": "^0.4.3",
"styled-components": "^5.1.1",
"use-clipboard-copy": "^0.1.1",
"uuid": "^7.0.2"
},
"devDependencies": {
"#craco/craco": "^5.6.4",
"#storybook/addon-actions": "^5.0.5",
"#storybook/addon-knobs": "^5.0.6",
"#storybook/addon-links": "^5.0.5",
"#storybook/addons": "^5.0.5",
"#storybook/react": "^5.0.5",
"#testing-library/react": "^10.4.7",
"cross-env": "^7.0.2",
"env-cmd": "^10.1.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"enzyme-to-json": "^3.5.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.6",
"jest-environment-jsdom": "^24.9.0",
"jest-environment-node": "^24.9.0",
"jest-localstorage-mock": "^2.4.0",
"jest-sonar-reporter": "^2.0.0",
"jest-styled-components": "^7.0.2",
"libxmljs": "^0.19.7",
"node-sass-chokidar": "^1.5.0",
"npm-link-shared": "^0.5.6",
"redux-mock-store": "^1.5.3",
"stylelint": "^9.10.1",
"stylelint-config-sass-guidelines": "^5.3.0",
"stylelint-webpack-plugin": "^0.10.5"
},
"scripts": {
"localxf": "cross-env NODE_PATH=src env-cmd -f ./env/localxf craco start",
"test": "cross-env NODE_PATH=src craco test --env=jsdom",
"test:debug": "cross-env NODE_PATH=src craco test --runInBand --no-cache --env=jsdom",
"storybook": "cross-env NODE_PATH=src env-cmd -f ./env/local start-storybook -p 6006",
"build-storybook": "build-storybook",
"deploy-build": "cross-env NODE_PATH=src env-cmd -f ./env/deploy-build craco build",
"start": "cross-env NODE_PATH=src env-cmd -f ./env/local craco start --no-cache"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"ie 11",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie 11"
]
}
}
I suspect there's a library above I have to update but I'm not sure what else to update!
This seems to be a viable workaround:
eslint: {
mode: ESLINT_MODES.extends,
configure: () => {
// Workaround for broken ESLINT_MODES.file mode
return require('./.eslintrc')
}
},

Type error during importing vue-formio to my vue template

I have a problem with importing vue-formio to my vue component.
Can't import FormBuilder without errors :(
After:
import { FormBuilder } from 'vue-formio';
I see in the console:
TypeError: Object prototype may only be an Object or null: undefined
Whole error You can see here: see print screen
TypeError: Object prototype may only be an Object or null: undefined
Main import:
if (document.body.classList.contains("hr:controller-requisition:action-edit")) {
require.ensure([], () => {
require("./views/requisition/edit.es6.js").default;
});
}
My formio.es6.js file:
import Vue from "vue";
import formio from "./show.vue";
import { store } from "HRComponets/store/store.es6";
export default new Vue({
el: "#formio-show",
data: {},
store,
render(h) {
return h(formio);
}
});
My vue component file:
Hi Guys, need help with vue-formio
<script>
import { FormBuilder } from 'vue-formio';
export default {
name: "formioShow",
data() {
return {
schema: {},
}
},
components: {
FormBuilder
},
};
</script>
My package.json file:
{
"name": "core",
"version": "1.0.0",
"description": "ortal",
"main": "index.js",
"directories": {
"test": "tests"
},
"scripts": {
"start": "npm run dev",
"prod": "webpack --config webpack.prod.js",
"dev": "webpack --watch --progress --config webpack.dev.js",
},
"nyc": {
"include": [
"src/**/*.(js|vue)"
],
"instrument": false,
"sourceMap": false
},
"keywords": [
"HR",
"Syrveys"
],
"browserslist": [
"> 2%",
"last 3 versions",
"not ie <= 8"
],
"devDependencies": {
"#vue/test-utils": "^1.0.0-beta.18",
"axios": "^0.18.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"eslint": "^4.19.1",
"expect": "^23.1.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"husky": "^1.0.0-rc.8",
"istanbul-instrumenter-loader": "^3.0.1",
"jsdom": "^11.11.0",
"jsdom-global": "^3.0.2",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.4.0",
"mocha": "^5.2.0",
"mocha-webpack": "^2.0.0-beta.0",
"node-sass": "^4.9.0",
"nyc": "^11.8.0",
"prettier-eslint": "^8.8.1",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"ts-loader": "^5.1.0",
"typescript": "^3.0.3",
"vue": "^2.5.16",
"vue-loader": "^15.0.10",
"vue-template-compiler": "^2.5.16",
"watchfile-webpack-plugin": "0.0.4",
"webpack": "^4.8.1",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.2",
"webpack-notifier": "^1.6.0"
},
"dependencies": {
"amcharts3": "github:amcharts/amcharts3",
"eslint-plugin-vue": "^4.7.1",
"formiojs": "^3.5.1",
"jquery": "^3.3.1",
"lodash": "^4.17.10",
"moment-timezone": "^0.5.17",
"npm": "^6.4.1",
"numeral": "^2.0.6",
"vee-validate": "^2.1.0-beta.8",
"vue-formio": "^3.0.0",
"vue-moment": "^4.0.0-0",
"vue-multiselect": "^2.1.0",
"vue-numerals": "0.0.2",
"vue-pdf": "^3.3.1",
"vue-upload-component": "^2.8.9",
"vue-wysiwyg": "^1.7.2",
"vue2-dropzone": "^3.2.2",
"vuelidate": "^0.7.4",
"vuenut": "^0.2.2",
"vuex": "^3.0.1",
"webpack-node-externals": "^1.7.2"
}
}
My webpack config file:
const webpack = require("webpack");
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const config = {
entry: {
core: "./src/AppBundle/VueComponents/main.es6.js",
hr: "./src/HRBundle/VueComponents/main.es6.js",
pm: "./src/PerformanceManagementBundle/VueComponents/main.es6.js"
},
output: {
filename: "[name]-app.js",
path: __dirname + "/web/assets/core/js/",
hotUpdateChunkFilename: "../webpack-hot-reload/hot-update.js",
hotUpdateMainFilename: "../webpack-hot-reload/Updatehot-update.json",
publicPath: "/assets/core/js/"
},
watchOptions: {
aggregateTimeout: 300,
poll: 1000,
ignored: /node_modules/
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.ts$/,
exclude: /node_modules|vue\/src/,
loader: "ts-loader",
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /.scss$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.less$/,
use: ["vue-style-loader", "css-loader", "less-loader"]
},
{
test: /\.es6.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
new VueLoaderPlugin(),
new HTMLWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
externals: {
jquery: "jQuery"
},
resolve: {
alias: {
vue: "vue/dist/vue.js",
HRComponets: path.resolve(__dirname, "./src/HRBundle/VueComponents")
},
extensions: ["*", ".js", ".vue", ".json", ".ts"]
}
};
module.exports = config;

babel-loader failed to transpile vue-router to es5 code in mac

babel-loader transpiles same code in windows successfully but can not turn vue-router in es5 in mac .
I rebuilt all the code without using vue-router and everything goes well.
So i just wonder if there has anybody encountered this ?
mac: 10.12.4 (16E195)
node: v8.1.3
package.json:
{
"engines": {
"node": "7.5.0"
},
"dependencies": {
"vue": "^2.3.4",
"vue-router": "^2.6.0",
"vue-template-compiler": "^2.3.4"
},
"devDependencies": {
"autoprefixer": "^6.7.6",
"babel-core": "^6.25.0",
"babel-eslint": "^7.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.2",
"babel-loader": "^7.1.0",
"babel-plugin-component": "^0.9.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.4.2",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-stage-1": "^6.22.0",
"babel-preset-stage-2": "^6.22.0",
"babel-preset-stage-3": "^6.22.0",
"css-loader": "^0.27.3",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-loader": "^1.6.3",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^5.0.3",
"eslint-plugin-react": "^7.1.0",
"exports-loader": "^0.6.4",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^0.10.1",
"gulp": "3.9.1",
"gulp-cssnano": "2.1.2",
"gulp-delete-lines": "0.0.7",
"gulp-eslint": "3.0.1",
"gulp-less": "^3.3.0",
"gulp-nodemon": "^2.2.1",
"gulp-replace": "^0.5.4",
"gulp-util": "^3.0.8",
"gulp-watch": "^4.3.11",
"html-webpack-plugin": "^2.28.0",
"imports-loader": "^0.7.1",
"json-loader": "0.5.4",
"less": "^2.7.2",
"less-loader": "^4.0.4",
"node-sass": "^4.5.1",
"postcss-loader": "^1.3.3",
"raw-loader": "0.5.1",
"run-sequence": "1.2.2",
"sass-loader": "^6.0.6",
"script-loader": "^0.7.0",
"style-loader": "^0.15.0",
"url-loader": "^0.5.8",
"vue-loader": "^12.2.1",
"vue-template-compiler": "^2.3.3",
"webpack": "^2.6.1"
}
}
.babelrc:
{
"presets": [
["es2015", { "modules": false }], "stage-1", "stage-2", "stage-3"
],
"plugins": [
["transform-vue-jsx"],
["transform-object-assign"],
["component", [{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}]]
]
}
webpack:
module.exports = {
entry: {
app: `./client/app.js`
},
output: {
path: path.resolve(__dirname, `../../`, config.destination),
filename: `[name].js`
},
module: {
rules: [{
test: /\.vue$/,
loader: `vue-loader`,
options: {
loaders: {
js: 'babel-loader'
}
}
}, {
test: /\.js$/,
loader: `babel-loader`,
exclude: /(node_modules)/
}],
noParse: [/\/dist\/.+/]
},
resolve: {
modules: [rootPath, `node_modules`],
extensions: [`.js`, `.jsx`, `.vue`, `.json`, `less`, `scss`, `css`, `html`],
alias: {
vue: `node_modules/vue/dist/vue.js`,
client: clientPath
}
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
mangle: false,
comments: false,
warnings: false,
sourceMap: !!argv.test
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
],
devtool: `cheap-source-map`
};
Got error: [ 'app.js from UglifyJs\nUnexpected token: keyword (default) [app.js:35217,7]' ]
Edition(2017-07-10 11:38:19)
app.js: import VueRouter from 'vue-router';
package.json of vue-router in node_modules has this:
"main": "dist/vue-router.common.js",
"module": "dist/vue-router.esm.js",
"name": "vue-router",
So how to make babel use the main field rather than the module field ?

Webpack Dev Server: Unknown argument: NODE_ENV

I have setup my angular js project with webpack. I am getting below error whenever I try to run in development mode:
"Unknown argument: NODE_ENV".
Below is my package.json. I am already using latest version of webpack-dev-server. Please let me know what went wrong here.
Package.json:
{
"name": "My project",
"version": "0.0.1",
"description": "",
"main": "/",
"author": "",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --config webpack/webpack.dev.js --watch --NODE_ENV=dev",
"test": "karma start --NODE_ENV=test",
"build": "webpack --config webpack/webpack.build.js --NODE_ENV=production"
},
"dependencies": {
"angular": "1.6.3",
"angular-datepicker": "^1.0.5",
"angular-file-upload": "^2.2.0",
"angular-flash-alert": "^2.2.4",
"angular-messages": "^1.5.0",
"angular-repository": "^0.1.8",
"angular-resource": "^1.5.0",
"angular-sanitize": "^1.5.5",
"angular-symfony-acl": "^1.0.9",
"angular-symfony-form": "^3.0.0",
"angular-translate": "^2.11.0",
"angular-ui-bootstrap": "^1.3.2",
"angular-ui-router": "^0.2.18",
"angular-voauth2": "^0.1.16",
"angular-youtube-embed": "^1.2.0",
"angularjs-datepicker": "^2.1.3",
"bootstrap": "^3.3.6",
"bootstrap-sass": "3.3.6",
"dotenv": "^4.0.0",
"font-awesome": "4.5.0",
"jquery": "2.2.0",
"lodash": "^4.0.1",
"moment": "^2.12.0",
"ng-file-upload": "^12.0.4",
"ng-infinite-scroll": "^1.2.1",
"postcss-loader": "^0.9.1",
"ui-select": "^0.19.4"
},
"devDependencies": {
"angular-mocks": "1.5.0-rc.2",
"angular-module-mocks": "1.2.19",
"babel-core": "^6.4.5",
"babel-istanbul": "0.6.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.3.13",
"compression-webpack-plugin": "0.3.0",
"connect-history-api-fallback": "^1.2.0",
"css-loader": "^0.18.0",
"file-loader": "0.8.5",
"html-webpack-plugin": "2.7.2",
"webpack-dev-server": "2.4.2",
"istanbul": "0.4.2",
"istanbul-instrumenter-loader": "0.1.3",
"jasmine": "2.4.1",
"karma": "0.13.19",
"karma-coverage": "0.5.3",
"karma-jasmine": "0.3.6",
"karma-phantomjs-launcher": "1.0.0",
"karma-sourcemap-loader": "0.3.7",
"karma-spec-reporter": "0.0.23",
"karma-typescript-preprocessor": "0.0.21",
"karma-webpack": "1.7.0",
"lodash": "4.0.1",
"node-sass": "3.4.2",
"phantomjs-polyfill": "0.0.1",
"phantomjs-prebuilt": "2.1.3",
"raw-loader": "0.5.1",
"sass-loader": "3.1.2",
"style-loader": "0.13.0",
"url-loader": "0.5.7",
"webpack": "1.12.12"
}
}
webpack.dev.js:
var loaders = require("./loaders");
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
build: './src/app.js',
vendors: ['angular', 'bootstrap', 'angular-ui-router', 'ng-file-upload']
},
output: {
filename: '[name].min.js',
path: 'dist'
},
resolve: {
root: __dirname,
extensions: ['', '.js', '.json']
},
resolveLoader: {
modulesDirectories: ["node_modules"]
},
devtool: "source-map",
devServer: {
port: 8080,
historyApiFallback: true
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
inject: 'body',
hash: true
}),
new webpack.ProvidePlugin({
moment: 'moment',
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.jquery': 'jquery'
})
],
module:{
loaders: loaders
}
};
In addition to what #Emre has provided, I had to change the npm start command in package.json to run application in DEV MODE. Then only it worked for me. My package.json now looks as below:
"scripts": {
"start": "NODE_ENV=dev webpack-dev-server --config ./webpack/webpack.dev.js --",
"test": "karma start --NODE_ENV=test",
"build": "webpack --config webpack/webpack.build.js --NODE_ENV=production"
},
Thanks.
You need to define your NODE_ENV in your wepack configuration. This should work:
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'production') // default value if not specified
}
})
]