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 ?
Related
Here is my dependency tree:
"dependencies": {
"#s-r0/eggy-js": "^1.3.4",
"#shopify/theme-predictive-search": "^4.0.0",
"#splidejs/vue-splide": "^0.5.18",
"axios": "^0.21.1",
"carousel-carousel": "^0.1.24",
"embla-carousel": "^2.9.1",
"eslint-config-prettier": "^6.12.0",
"eslint-plugin-prettier": "^3.1.4",
"lazysizes": "^5.2.2",
"module-name": "^0.0.1-security",
"pinia": "^2.0.22",
"v-tooltip": "^2.0.3",
"vendor": "^1.7.0",
"vue": "^2.7",
"vue-click-outside-element": "^1.0.15",
"vue-scrollto": "^2.20.0",
"vue2-transitions": "^0.3.0",
"vuejs-datepicker": "^1.6.2"
},
"devDependencies": {
"#babel/core": "^7.10.1",
"#babel/plugin-transform-destructuring": "^7.10.1",
"#babel/plugin-transform-object-assign": "^7.10.1",
"#babel/plugin-transform-runtime": "^7.10.1",
"#babel/preset-env": "^7.10.1",
"#shopify/eslint-plugin": "^39.0.1",
"#shopify/stylelint-plugin": "^10.0.1",
"#shopify/themekit": "~1.1.4",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-unit-jest": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/test-utils": "^1.0.3",
"babel-loader": "^8.1.0",
"babel-plugin-dynamic-import-node": "^2.3.3",
"browser-sync": "^2.26.7",
"concurrently": "^5.2.0",
"copyfiles": "^2.3.0",
"css-loader": "^4.2.0",
"cssnano": "^4.1.10",
"eslint": "^7.11.0",
"eslint-plugin-vue": "^9.0.0",
"file-loader": "^6.0.0",
"jest-vue-preprocessor": "^1.7.1",
"node-watch": "^0.6.4",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"rimraf": "^3.0.2",
"sass": "^1.26.7",
"sass-loader": "^8.0.2",
"stylelint": "^13.7.2",
"stylelint-order": "^4.1.0",
"vue-loader": "^15.10.0",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
}
I can install my dependencies with either NPM or yarn just fine. However, when I run my script for webpack to bundle everything, I keep getting the error:
ERROR in ./node_modules/pinia/dist/pinia.mjs
Module not found: Error: Can't resolve '#vue/devtools-api' in '/Users/gabe/Documents/GitHub/hive-brands/node_modules/pinia/dist'
# ./node_modules/pinia/dist/pinia.mjs 7:0-56 505:4-23 709:4-23
# ./src/vue/theme.js
# ./src/scripts/theme.js
# multi ./src/scripts/theme.js ./src/styles/theme.scss
Here is my webpack config just in case:
const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const webpackConfig = {
mode: "production",
resolve: {
alias: {
"#scripts": path.resolve(__dirname, "src/vue"),
"#vue": path.resolve(__dirname, "src/vue")
}
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /theme.scss/,
exclude: /node_modules/,
use: [
{
loader: "file-loader",
options: { name: "theme.min.css" }
},
"sass-loader"
]
},
{
test: /checkout.scss/,
exclude: /node_modules/,
use: [
{
loader: "file-loader",
options: { name: "checkout.min.css" }
},
"sass-loader"
]
},
{
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
}
]
},
plugins: [new VueLoaderPlugin()]
};
const themeConfig = {
...webpackConfig,
name: "theme",
entry: [
`${__dirname}/src/scripts/theme.js`,
`${__dirname}/src/styles/theme.scss`
],
output: {
path: path.join(__dirname, "src/assets"),
filename: "theme.min.js"
}
};
const checkoutConfig = {
...webpackConfig,
name: "checkout",
entry: [
`${__dirname}/src/scripts/checkout.js`,
`${__dirname}/src/styles/checkout.scss`
],
output: {
path: path.join(__dirname, "src/assets"),
filename: "checkout.min.js"
}
};
module.exports = [themeConfig, checkoutConfig];
I try to use async/await on a js script (class method) in a webpack config but i have got this error :
search.js:33 Uncaught ReferenceError: regeneratorRuntime is not defined
I have maybe an error in the babelrc file but i tried all things found on the web :/
Stack : WSL1 node 10.16.3 npm 6.11.1 in Visual Studio Code.
Previously, i had polyfill config with a similar problem.
I tried to use new Babel recommandations with #babel/plugin-transform-runtime and #babel/runtime but the issue persists.
I tried to remove /node_modules/ directory and lock package files to generate it again with npm i but nothing changes.
I have no problem with an async function declaration (outside a class).
File with generated error
class Search {
constructor() {...}
async run() {
await this.xxxx();
}
xxxx() {...}
}
.babelrc
{
"presets": [
["#babel/preset-env"],
[
"#babel/env",
{
"modules": false,
"useBuiltIns": "usage",
"corejs": 3
}
]
],
"plugins": [
[ "#babel/plugin-transform-runtime", {"regenerator": true, "corejs": 3} ],
[ "#babel/plugin-transform-async-to-generator" ]
]
}
package.json
{
...
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-transform-async-to-generator": "^7.5.0",
"#babel/plugin-transform-runtime": "^7.6.2",
"#babel/preset-env": "^7.6.3",
"autoprefixer": "^9.6.1",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^2.0.2",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"fontmin-webpack": "^2.0.4",
"imagemin-gifsicle": "^6.0.1",
"imagemin-jpegtran": "^6.0.0",
"imagemin-optipng": "^7.0.0",
"imagemin-svgo": "^7.0.0",
"imagemin-webpack": "^5.1.0",
"jquery": "^3.4.1",
"loader": "^2.1.1",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-cli": "^6.1.2",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"sass-loader": "^7.3.1",
"style": "0.0.3",
"style-loader": "^0.23.1",
"sugarss": "^2.0.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7",
"webpack-manifest-plugin": "^2.0.4"
},
"dependencies": {
"#babel/runtime": "^7.6.3",
"core-js": "^3.3.2",
"detect-it": "^3.0.5",
"gifsicle": "^4.0.1",
"slick-carousel": "^1.8.1"
},
"browserslist": [
"last 2 versions"
]
}
I found the solution.
In the main js file
import "regenerator-runtime/runtime";
Add regenerator-runtime
npm i regenerator-runtime
Thanks.
I use the latest versions of vue-cli3 webpack4 and vue-loader v15.
I want to configure vue-loader, but there is an error:
Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
vue.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
productionSourceMap: false,
baseUrl: "./",
configureWebpack: {
module: {
rules: [{
test: /\.vue$/,
loader: "vue-loader"
}]
},
plugins: [
new VueLoaderPlugin()
]
}
}
package.js
"dependencies": {
"awe-dnd": "^0.3.1",
"axios": "^0.18.0",
"iview": "^3.1.5",
"lodash": "^4.17.11",
"vue": "^2.5.17",
"vue-router": "^3.0.2"
},
"devDependencies": {
"#babel/cli": "^7.1.5",
"#babel/core": "^7.1.6",
"#babel/polyfill": "^7.0.0",
"#babel/preset-env": "^7.1.6",
"#vue/cli-plugin-babel": "^3.2.0",
"#vue/cli-plugin-eslint": "^3.2.1",
"#vue/cli-service": "^3.2.0",
"css-loader": "^1.0.1",
"eslint": "^5.9.0",
"eslint-plugin-vue": "^4.7.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^2.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"iview-loader": "^1.2.2",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"vue-cli-plugin-iview": "^1.0.6",
"vue-hot-reload-api": "^2.3.1",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.26.1",
"webpack-chain": "^5.0.1",
"webpack-dev-server": "^3.1.10",
"webpack-merge": "^4.1.4"
},
I called console.log on vue-loader/plugin.js.
rawRules (line-number 27)
There are 20+ rules.
/\.vue$/ matched the second rule.
But the second rule is url-loader?
What do I do?
I think you should put vue-loader on dependencies. Recently i updated my project: vue, vue-loader, webpack...
this is my package.json
{
"name": "pack",
"private": true,
"version": "0.0.0",
"scripts": {
"build": "webpack --env.prod --config webpack.config.js"
},
"devDependencies": {
"#babel/preset-env": "^7.0.0-rc.2",
"#types/webpack-env": "^1.13.5",
"aspnet-webpack": "^2.0.3",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"css-loader": "^0.25.0",
"event-source-polyfill": "^0.0.7",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^2.0.0",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.3.1",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^4.23.1",
"webpack-hot-middleware": "^2.24.3"
},
"dependencies": {
"axios": "^0.18.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-3": "^6.24.1",
"chart.js": "^2.7.3",
"downloadjs": "^1.4.7",
"idle-vue": "^2.0.5",
"jwt-decode": "^2.2.0",
"material-design-icons-iconfont": "^3.0.3",
"v-offline": "^1.0.10",
"vue": "^2.5.21",
"vue-analytics": "^5.12.2",
"vue-chartjs": "^3.4.0",
"vue-chartkick": "^0.5.0",
"vue-config": "^1.0.0",
"vue-embed": "^1.0.0",
"vue-google-charts": "^0.3.2",
"vue-json-excel": "^0.2.5",
"vue-loader": "^15.4.2",
"vue-moment": "^4.0.0",
"vue-popperjs": "^1.6.1",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.21",
"vuetify": "^1.3.14"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Your webpack.config it seems fine... but just in case, this is my code:
var path = require('path')
var webpack = require('webpack')
const bundleOutputDir = './wwwroot/dist';
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode: 'development',
context: __dirname,
entry: {
main: ['babel-polyfill', './App/index.js']
},
plugins:[
new VueLoaderPlugin()
],
module: {
rules: [{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
}
},
...
I was having this same problem and found this thread solved my problem.
Essentially, you do not need to specify the module rules or the loader for vue-loader when using vue-cli to build your app because vue-cli provides vue-loader out of the box.
I do not know why we get the error when we try to specify the module rules, and it is unfortunate that it gives this unhelpful error, but regardless, I hope this helps!
While moving to vue-cli 3 I encountered following problem.
I import a plugin's css to my app.scss.
This line: background-image: url(default-skin.svg); breaks yarn build, which throws this error:
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ReferenceError: navigator is not defined
Here is my vue.config.js:
const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin')
const ASSETS_DIR = 'static'
module.exports = {
assetsDir: ASSETS_DIR,
runtimeCompiler: true,
chainWebpack: config => {
config
.plugin('provide-plugin')
.use(webpack.ProvidePlugin, [{
axios: "axios",
$: "jquery",
jQuery: "jquery",
_: "lodash",
mapGetters: ['vuex', 'mapGetters'],
mapActions: ['vuex', 'mapActions']
}])
.end()
.plugin('copy-plugin')
.use(CopyWebpackPlugin, [
[{
from: path.resolve(__dirname, 'static'),
to: ASSETS_DIR,
ignore: ['.*']
}]
])
.end()
.plugin('sprite-loader-plugin')
.use(SpriteLoaderPlugin)
config.module
.rule('svg')
.test(/\.svg$/)
.use('file-loader')
.loader('svg-sprite-loader')
}
}
Any solution?
update
The css which breaks yarn build
Package.json:
{
"name": "f2c",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "Victor Ponamariov <victor.ponamariov#gmail.com>",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"animate.css": "^3.6.1",
"axios": "^0.18.0",
"blueimp-canvas-to-blob": "^3.14.0",
"fabric": "^2.3.3",
"flexboxgrid": "^6.3.1",
"intl-tel-input": "^12.4.0",
"jquery": "^3.3.1",
"libphonenumber-js": "^1.2.21",
"lodash": "^4.17.10",
"masonry-layout": "^4.2.1",
"moment": "^2.22.2",
"nprogress": "^0.2.0",
"perfect-scrollbar": "^1.4.0",
"photoswipe": "^4.1.2",
"portal-vue": "^1.3.0",
"raven-js": "^3.25.2",
"sharer.js": "^0.3.3",
"stickyfilljs": "^2.0.5",
"tippy.js": "^2.5.2",
"vee-validate": "^2.0.6",
"vue": "^2.5.2",
"vue-analytics": "^5.14.0",
"vue-carousel": "^0.9.0",
"vue-clipboard2": "^0.1.1",
"vue-cropperjs": "^2.2.0",
"vue-gtm": "^1.0.2",
"vue-i18n": "^8.0.0",
"vue-infinite-loading": "^2.3.3",
"vue-infinite-scroll": "^2.0.2",
"vue-meta": "^1.5.2",
"vue-mq": "^0.2.1",
"vue-multiselect": "^2.1.0",
"vue-perfect-scrollbar": "^0.1.0",
"vue-popperjs": "^1.2.6",
"vue-router": "^3.0.1",
"vue-select": "^2.4.0",
"vue-slider-component": "^2.7.4",
"vue-social-sharing": "^2.3.3",
"vue-star-rating": "^1.6.0",
"vue-sweetalert2": "^1.5.2",
"vue-tippy": "^2.0.18",
"vue-yandex-metrika": "^1.6.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.0-rc.5",
"#vue/cli-plugin-eslint": "^3.0.0-rc.5",
"#vue/cli-service": "^3.0.0-rc.5",
"copy-webpack-plugin": "^4.5.2",
"node-sass": "^4.9.2",
"normalize.css": "^8.0.0",
"postcss-import": "^11.1.0",
"postcss-url": "^7.3.2",
"sass-loader": "^7.0.3",
"svg-sprite-loader": "^3.8.0",
"vue-template-compiler": "^2.5.16",
"webpack-svgstore-plugin": "^4.0.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"globals": {
"$": false,
"jQuery": false,
"_": false,
"axios": false,
"VK": false,
"gapi": false,
"FB": false,
"mapGetters": false,
"mapActions": false
},
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-import": {},
"postcss-url": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
App folder structure:
I don't have a fix or full explanation, but there is a workaround...
The problem seems to be caused by postcss-import when importing the CSS file from inside a <style> tag of an SFC:
// App.vue
<style lang="scss">
#import 'app.scss'; /* imports default.css -> default-skin.svg */
</style>
You can workaround the build error by moving the import into the <script> tag (or to main.js):
// App.vue
<script>
import 'app.scss'; /* imports default.css -> default-skin.svg */
</script>
see GitHub repo
Try Deleting node modules folder and then run yarn install again.
If didn't work try:
global.navigator = {
userAgent: 'node.js'
};
Ref vue-pswipe, GuoQichen uses this config for svg.
config.module
.rule('svg')
.use('file-loader')
.clear()
.loader('url-loader')
.options({
limit: 4 * 1024,
name: 'img/[name].[hash:8].[ext]',
})
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"
}
}