Related
I'm new to Vuejs and started a project in which I want to display a file explorer in the browser.
I am using a module called 'vuetify-file-browser' as it has a large amount of the required logic, however I am struggling to get it to display in the browser, errors included below, my source is then below that. Also, vuetify-file-browser requires Vuetify 2 to run as Vue 3 has no compatible Vuetify version that suits the component, so I cannot change the project to Vue 3. If the best solution is using another module I'm open to that.
Things I have tried:
Research the errors and console log
Change webpack version from 4 to 5 and back again
npm uninstall, followed by npm install
Complete reinstall of node_modules
Vue.use(Vuetify) in main.js
Adding loader to webpack.config.js using fibers to handle both sass and scss files
Changing from node-sass to sass
The error message is received in Firefox devtools console, but the project itself deploys fine, displaying nothing but an empty FileBrowser element (nothing visible).
Error log
[Vue warn]: Error in render: "TypeError: _vm.$vuetify.breakpoint is undefined"
found in
---> <FileBrowser> at node_modules/vuetify-file-browser/src/FileBrowser.vue
<FileBrowser> at src/components/FileBrowser.vue
<App> at src/App.vue
<Root> vue.esm.js:628
---------------------------------------------------------------------
TypeError: _vm.$vuetify.breakpoint is undefined
render FileBrowser.vue:31
VueJS 45
<anonymous> main.js:8
js build.js:8912
__webpack_require__ build.js:790
fn build.js:101
0 build.js:8937
__webpack_require__ build.js:790
<anonymous> build.js:857
<anonymous> build.js:860
-----------------------------------------------------------------
[Vue warn]: Error in mounted hook: "TypeError: this.$vuetify.breakpoint is undefined"
found in
---> <FileBrowser> at node_modules/vuetify-file-browser/src/FileBrowser.vue
<FileBrowser> at src/components/FileBrowser.vue
<App> at src/App.vue
<Root>
-------------------------------------------------------------
TypeError: this.$vuetify.breakpoint is undefined
mounted FileBrowser.vue:219
VueJS 14
<anonymous> main.js:8
js build.js:8912
__webpack_require__ build.js:790
fn build.js:101
0 build.js:8937
__webpack_require__ build.js:790
<anonymous> build.js:857
<anonymous> build.js:860
FileBrowser.vue
<template>
<file-browser :axiosConfig="{baseURL: 'http://localhost:8081'}" />
</template>
<script>
import FileBrowser from "vuetify-file-browser";
export default {
components: {
FileBrowser
}
};
</script>
App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
main.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import App from './App.vue'
import router from './router'
Vue.use(Vuetify)
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
}).$mount('#app')
// new Vue({
// el: '#app',
// render: h => h(App)
// }).$mount('#app');
index.js (router component)
import Vue from 'vue'
import Router from 'vue-router'
import FileBrowser from '../components/FileBrowser.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'FileBrowser',
component: FileBrowser
}
]
})
webpack.config.js
var path = require('path')
const webpack = require('webpack')
const ESLintPlugin = require('eslint-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry: path.join(__dirname, './src/main.js'),
resolve: {
extensions: ['.webpack.js', '.web.js', '.ts', '.js']
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
// {
// test: /\.scss$/,
// use: [
// 'vue-style-loader',
// 'css-loader',
// 'sass-loader'
// ],
// },
// {
// test: /\.sass$/,
// use: [
// 'vue-style-loader',
// 'css-loader',
// 'sass-loader?indentedSyntax'
// ],
// },
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader#^7.0.0
options: {
implementation: require('sass'),
fiber: require('fibers'),
// indentedSyntax: true // optional
},
// Requires sass-loader#^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
// indentedSyntax: true // optional
},
},
},
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /.ts$/,
loader: 'ts-loader'
}
],
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin(),
new ESLintPlugin()
],
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
package.json
{
"name": "vuetify-file-browser-app",
"description": "frontend using Vue v2",
"version": "1.0.0",
"author": "Alpug",
"license": "MIT",
"private": true,
"scripts": {
"test": "echo \"Error: No test has been specified, view scripts in package.json\" && exit 1",
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"start:dev": "cross-env NODE_ENV=development webpack serve --open --hot"
},
"dependencies": {
"vue": "^2.5.11",
"webpack-cli": "^4.7.2"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"#babel/cli": "^7.14.5",
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#babel/preset-react": "^7.14.5",
"axios": "^0.21.1",
"babel-loader": "^8.2.2",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-react-transform": "^3.0.0",
"core-js": "^3.15.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.11",
"eslint": "^7.29.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-vue": "^7.11.1",
"eslint-webpack-plugin": "^2.5.4",
"fibers": "^5.0.0",
"file-loader": "^1.1.4",
"g": "^2.0.1",
"mini-css-extract-plugin": "^1.6.0",
"sass": "^1.32.13",
"sass-loader": "^10.2.0",
"vue-axios": "^3.2.4",
"vue-loader": "^15.9.7",
"vue-loader-plugin": "^1.3.0",
"vue-router": "^3.5.2",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.14",
"vuetify": "^2.5.4",
"vuetify-file-browser": "^1.0.2",
"webpack": "^4.46.0",
"webpack-dev-middleware": "^5.0.0",
"webpack-dev-server": "^3.11.2"
}
}
Please remember I am new to Vuejs and anything wrong here, related to the error or otherwise, I would appreciate pointers on. Thank you for your time to read.
I've created webpack config to my VueJS project. I want to separate styles from javascript code. I've used mini-css-extract-plugin but finally I receive only bundle.js file. What's wrong with this config and where is a mistake? Is there any missing loader. My config is below:
import path from 'path';
import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import VueLoaderPlugin from 'vue-loader/lib/plugin';
import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
import CleanWebpackPlugin from 'clean-webpack-plugin';
const devMode = process.env.NODE_ENV !== 'production';
const prodPlugins = [
new UglifyJsPlugin(),
new MiniCssExtractPlugin({
filename: "css/style.css"
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
})
];
const basicPlugins = [
new CleanWebpackPlugin('dist'),
new VueLoaderPlugin()
];
const config = {
entry: {
bundle: './src/main.js'
},
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
{
test: /\.css$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader'
]
},
{ test: /\.(scss|sass)$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'vue-style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
js: 'babel-loader',
}
}
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
plugins: !process.env.NODE_ENV || !devMode ? basicPlugins : basicPlugins.concat(prodPlugins)
};
module.exports = config;
My file package.json
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"watch": "webpack --watch --mode development --hot",
"dev": "webpack-dev-server --mode development --progress --hot --open",
"build": "webpack --mode production --progress"
},
"author": "",
"license": "MIT",
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-register": "^6.26.0",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"cssnano": "^3.10.0",
"eslint": "^4.19.1",
"eslint-watch": "^3.1.4",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.9.0",
"optimize-css-assets-webpack-plugin": "^4.0.1",
"sass-loader": "^7.0.1",
"sass-resources-loader": "^1.3.3",
"style-loader": "^0.21.0",
"uglifyjs-webpack-plugin": "^1.2.5",
"vue-loader": "^15.0.10",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {
"axios": "^0.18.0",
"material-design-icons": "^3.0.1",
"vue": "^2.5.16",
"vue-router": "^3.0.1",
"vuetify": "^1.0.17"
}
}
Note that any imported file is subject to tree shaking. This means if you use something like css-loader in your project and import a CSS file, it needs to be added to the side effect list so it will not be unintentionally dropped in production mode.
Blockquote
in your package.json, add:
"sideEffects": [
'.scss'
]
In Webpack 4, you can add "sideEffects: true" to the loader to prevent the compiler from dropping the CSS file output by MiniCssExtractPlugin.loader (See Webpack Tree Shaking Guide). This works with Angular + TypeScript (using "module:" "ES2015" in tsconfig). I imagine it would work for your set up as well.
{
test: /\.scss$/,
include: [
helpers.root('src', 'assets')
],
sideEffects: true,
use: [
MiniCssExtractPlugin.loader,
{loader: 'css-loader'},
{loader: 'resolve-url-loader'}, // Angular only
{loader: 'sass-loader'},
]
},
Check that you have set the NODE_ENV environment variable.
In your config the extracting of css to separate files (MiniCssExtractPlugin) will only occur when building for production, in other words, when NODE_ENV is set to 'production'. When building for development style-loader is being used which will inject the css within a tag.
I'm using a pretty new JS dev environment (here for details) and according to this documentation React is pretty easy to implement into other JS frameworks.
In my index.js file which is at the root of my directory, I have the following code:
import React, { Component } from "react";
import ReactDOM from "react-dom";
function Button() {
return <button id="btn">Say Hello</button>;
}
ReactDOM.render(
<Button />,
document.getElementById('container'),
function() {
$('#btn').click(function() {
alert('Hello!');
});
}
);
and when i go to run fly server I get the following error:
ERROR in ./index.js Module parse failed: Unexpected token (8:9) You
may need an appropriate loader to handle this file type. | | function
Button() { | return Say Hello; | } |
Here is my package.json file:
{
"name": "fly-example",
"version": "1.0.0",
"description": "fly example app",
"main": "index.js",
"dependencies": {
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.11",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"style-loader": "^0.21.0",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3"
},
"scripts": {
"test": "mocha"
},
"repository": {
"type": "git",
"url": "none"
},
"keywords": [
"fly",
"app"
],
and my webpack.config:
const path = require("path");
const webpack = require("webpack");
const bundlePath = path.resolve(__dirname, "dist/");
module.exports = {
entry: "./index.js",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: { presets: ['env'] }
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
resolve: { extensions: ['*', '.js', '.jsx'] },
output: {
publicPath: bundlePath,
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname,'public'),
port: 3000,
publicPath: "http://localhost:3000/dist"
},
plugins: [ new webpack.HotModuleReplacementPlugin() ]
};
.babelrc file:
{
"presets": ["env", "react"]
}
Still fairly new to React, but I love building apps in it, but I really want to learn how to integrate it into other JS frameworks so I can use it more broadly.
Is there something I'm missing in the package.json file or the webpack.config? I have done quite a bit of looking around but haven't found much.
Thanks for your help in advance!
Try specifying babel-loader under use.loader. See below:
const path = require("path");
const webpack = require("webpack");
const bundlePath = path.resolve(__dirname, "dist/");
module.exports = {
entry: "./index.js",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
}
options: { presets: ['env'] }
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
resolve: { extensions: ['*', '.js', '.jsx'] },
output: {
publicPath: bundlePath,
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname,'public'),
port: 3000,
publicPath: "http://localhost:3000/dist"
},
plugins: [ new webpack.HotModuleReplacementPlugin() ]
};
Instead of writing the webpack configuration by yourself, I'd recommend using create-react-app, it is simpler. Also make sure you import jquery.
Try and let me know if this works !
I have a following problem. I setted up a React in my ASP.NET Core application as always, but now I have one irritating problem and I don't know how to fix it.
When I try to import react from 'react', nothing import. In Chrome Developer Tools I see a red underline under the sentene: "import React from 'react';".
I tried to change babel presets to another, change a webpack.config.js file but nothing works. Maybe you will have an idea, where is a bug? Here is my files:
.babelrc
{
"presets":["env", "react"]
}
package.json
{
"name": "MyApp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.10",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"node-sass": "^4.7.2",
"prop-types": "^15.6.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^4.1.1",
"webpack-dev-server": "^3.1.1"
},
"dependencies": {}
}
webpack.config.js
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
devtool: 'source-map',
entry: './ClientApp/index.js',
output: {
publicPath: "/js/",
path: path.join(__dirname, "wwwroot", "js"),
filename: "index-bundle.js"
},
devServer: {
contentBase: "./dist"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 50000,
name: 'assets/[name]_[hash].[ext]'
}
}
]
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin("./bundle.css")
]
}
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './Shared/styles/styles.scss';
import SignIn from './Sign/Shared/Components/Sign'
class App extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
render(){
<div>
<SignIn />
</div>
}
}
ReactDOM.render(<App/>, document.getElementById('App'))
I will be very glad for your help.
import is a es2015 feature and I see no es2015 preset in .babelrc. See: https://www.npmjs.com/package/babel-preset-es2015
Add presets into babel-loader.
Change webpack.config.js in this way.
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use : {
loader : 'babel-loader',
options : {
presets : ['env', 'react'],
}
}
},
Try this : transform-es2015-modules-amd , This plugin transforms ES2015 modules to Asynchronous Module Definition (AMD). in .babelrc file
{
presets: ["env", "react"],
plugins: ["transform-es2015-modules-amd"]
}
more at transform-es2015-modules-amd
This can also occur if you run:
node index.js
instead of
npm start
See also: npm start vs node app.js
I have created a site using Angular 2. I started making my site using the Angular 2 QuickStart Guide as base and it's working like it should if I use the command npm start. Now that the site is finished I need to build/deploy (don't know the correct definition) to production so the site can be access to the client. The question is: how to I build this project for production? (without the need to run npm install)
The best thing I could found was to to try ng build -prod, but it says that my project is not a cli project. How to a generate the independent files to open just the index.htmlpage and access the site? Is it possible?
Update:
Maybe I was not clear: what I'm looking for is a way to get all the TypeScripts files and build it in a pure HTML/JavaScript/CSS site ready to display. No compression or minify needed at the moment. Is it possible? If not, what are other solutions (preferably independent on the host)?
So from what I understand from using Angular2 the last few weeks is what you're essentially creating is a client-side single page app so all you need to deliver is the HTML page with references to the respective JavaScript files.
I've been investigating WebPack for packaging an application (and still in the middle of getting it right), however, WebPack will combine all the compiled typescript files into a single (or multiple, still working on this part) Javascript files while also injecting the reference to the javascript files into your index.html page.
My current project compiles the typescript files (using gulp) using a web pack config to configure the output javascript file (main.ts -> main.js):
gulp.task("build-tsc", function() {
return gulp.src("entry.js")
.pipe(webpack( require("../../../webpack.config.js")))
.pipe(gulp.dest(config.dist));
});
My web pack.config.js looks like (the webpack module ignores the fact I don't have an entry.js):
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
module.exports = {
entry: {
"main": "./src/app/main.ts",
"share": "./src/app/share_main.ts",
"polyfills": "./src/app/polyfills.ts"
},
output: {
path: __dirname,
filename: "[name].js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" },
{ test: /\.ts$/, loader: 'ts-loader' }
]
},
resolve: {
extensions: ['', '.js', '.ts']
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['main', 'share', 'polyfills']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
};
My original codebase is:
src/
index.html
assets/
styles/
main.scss
app/
app.component.ts
app.routes.ts
app.module.ts
share_main.ts
polyfills.ts
dashboard/
dashboard.component.ts
dashboard.html
navbar/
navbar.component.ts
navbar.html
So what I end up with (post build) is a new dist/ directory with the files in place for use:
dist/
index.html
main.js
share.js
polyfill.js
app/
dashboard/
dashboard.html
navbar/
navbar.html
styles/
main.css
Right now I'm using browserSync for now to serve the files for dev purposes, but you theoretically should be able to serve them up as static content via NGINX, Apache or proxy them through NGINX/Apache to lite-server.
The idea behind WebPack is that you give it an entry point (in this case main.ts) and it crawls the import statements ensuring that anything it encounters is added to the resulting Javascript files then adds them to the index.html file automatically.
Like I mentioned I've got a working app but I'm trying to understand the "multiple entry points" better but the above should work just the same.
I'm really bad at dealing with webpack and wasn't able to Anthony Ikeda solution or any other solution I found on web. If anyone get stuck in this like me, my solution was to use Angular Cli. I create a new project with angular cli, create all the pages, components and services with angular cli and copied the code from the old no-cli project to this new cli project. With a cli project, I used the ng build command to build the project and get the files to deploy.
I'm using this solution and it works perfectly for me (only html + css + js files) ... only minification give me some problems.
My webpack.config.js:
/// <binding />
var environment = (process.env.NODE_ENV || "development").trim();
if (environment === "development") {
module.exports = require('./webpack.dev.js');
} else {
module.exports = require('./webpack.prod.js');
}
My webpack.dev.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var CleanWebpackPlugin = require('clean-webpack-plugin');
var path = require('path');
module.exports = {
entry: {
"polyfills": "./polyfills.ts",
"vendor": "./vendor.ts",
"app": "./app/main.ts",
},
resolve: {
extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html']
},
output: {
path: "./app_build",
filename: "js/[name]-[hash:8].bundle.js"
},
devtool: 'source-map',
module: {
loaders: [
{
loader: "babel-loader",
// Skip any files outside of your project's `src` directory
//include: [
// "app_build",
//],
exclude: [
path.resolve(__dirname, "node_modules")
],
// Only run `.js` and `.jsx` files through Babel
test: /\.js/,
// Options to configure babel with
query: {
plugins: ['transform-runtime', 'babel-plugin-transform-async-to-generator'],
presets: ['es2015', 'stage-0'],
}
},
{
test: /\.ts$/,
loader: "ts"
},
{
test: /\.html$/,
loader: "html"
},
//{
// test: /\.(png|jpg|gif|ico|woff|woff2|ttf|svg|eot)$/,
// loader: "file?name=assets/[name]-[hash:6].[ext]",
//},
{
test: /\.(png|jpg|gif|ico)$/,
//include: path.resolve(__dirname, "assets/img"),
loader: 'file?name=/assets/img/[name]-[hash:6].[ext]'
},
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
// exclude: /node_modules/,
loader: 'file?name=/assets/fonts/[name].[ext]'
},
// Load css files which are required in vendor.ts
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
},
]
},
plugins: [
new ExtractTextPlugin("css/[name]-[hash:8].bundle.css", { allChunks: true }),
new webpack.optimize.CommonsChunkPlugin({
name: ["app", "vendor", "polyfills"]
}),
new CleanWebpackPlugin(
[
"./app_build/js/",
"./app_build/css/",
"./app_build/assets/",
"./app_build/index.html"
]
),
// inject in index.html
new HtmlWebpackPlugin({
template: "./index.html",
inject: "body"
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
],
devServer: {
//contentBase: path.resolve(__dirname, "app_build/"),
historyApiFallback: true,
stats: "minimal"
}
};
My webpack.prod.js:
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var CleanWebpackPlugin = require('clean-webpack-plugin');
var path = require('path');
var BabiliPlugin = require("babili-webpack-plugin");
module.exports = {
entry: {
"polyfills": "./polyfills.ts",
"vendor": "./vendor.ts",
"app": "./app/main.ts"
},
resolve: {
extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html']
},
output: {
path: "./app_build",
filename: "js/[name]-[hash:8].bundle.min.js"
},
module: {
loaders: [
{
loader: "babel-loader",
// Skip any files outside of your project's `src` directory
//include: [
// "app_build",
//],
exclude: [
path.resolve(__dirname, "node_modules")
],
// Only run `.js` and `.jsx` files through Babel
test: /\.js/,
// Options to configure babel with
query: {
plugins: ['transform-runtime', 'babel-plugin-transform-async-to-generator'],
presets: ['es2015', 'stage-0'],
}
},
{
test: /\.ts$/,
loader: "ts"
},
{
test: /\.html$/,
loader: "html"
},
//{
// test: /\.(png|jpg|gif|ico|woff|woff2|ttf|svg|eot)$/,
// loader: "file?name=assets/[name]-[hash:6].[ext]",
//},
{
test: /\.(png|jpg|gif|ico)$/,
//include: path.resolve(__dirname, "assets/img"),
loader: 'file?name=assets/img/[name]-[hash:6].[ext]'
},
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
// exclude: /node_modules/,
loader: 'file?name=/assets/fonts/[name].[ext]'
},
// Load css files which are required in vendor.ts
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
},
]
},
plugins: [
new ExtractTextPlugin("css/[name]-[hash:8].bundle.css", { allChunks: true }),
new webpack.optimize.CommonsChunkPlugin({
name: ["app", "vendor", "polyfills"]
}),
new CleanWebpackPlugin(
[
"./app_build/js/",
"./app_build/css/",
"./app_build/assets/",
"./app_build/index.html"
]
),
// inject in index.html
new HtmlWebpackPlugin({
template: "./index.html",
inject: "body"
}),
new BabiliPlugin({ comments: false }),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
],
devServer: {
historyApiFallback: true,
stats: "minimal"
}
};
and then my package.json (with command to build for prod):
{
"name": "dipendentistatali",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"start": "tsc && npm install && npm run build",
"watch": "SET NODE_ENV=development && webpack --watch --color",
"test": "webpack-dev-server --inline --hot",
"build": "SET NODE_ENV=development && webpack -d --color",
"buildProduction": "SET NODE_ENV=production && webpack -d --color",
"lint": "tslint ./app/**/*.ts -t verbose",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"keywords": [],
"author": "",
"dependencies": {
"#angular/common": "2.1.1",
"#angular/compiler": "2.1.1",
"#angular/core": "2.1.1",
"#angular/forms": "2.1.1",
"#angular/http": "2.1.1",
"#angular/platform-browser": "2.1.1",
"#angular/platform-browser-dynamic": "2.1.1",
"#angular/router": "3.0.0",
"#angular/upgrade": "2.0.0",
"#ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.15",
"angular2-cool-http": "^1.2.3",
"angular2-toaster": "^1.0.1",
"babel-plugin-transform-async-to-generator": "^6.16.0",
"bootstrap": "^3.3.6",
"core-js": "^2.4.1",
"jquery": "2.2.4",
"ng2-bs3-modal": "^0.10.4",
"ng2-modal": "0.0.22",
"ng2-resource-rest": "^1.5.3",
"ng2-slim-loading-bar": "^2.0.4",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23"
},
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-plugin-transform-es2015-arrow-functions": "^6.8.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"clean-webpack-plugin": "0.1.10",
"concurrently": "^2.2.0",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.15.0",
"lite-server": "^2.2.2",
"lodash": "^4.11.1",
"node-sass": "^3.13.0",
"raw-loader": "^0.5.1",
"rimraf": "^2.5.2",
"sass-loader": "^3.2.3",
"style-loader": "^0.13.1",
"ts-loader": "^0.8.1",
"tslint": "^3.7.4",
"typescript": "^2.0.2",
"typings": "^1.3.2",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2",
"webpack-merge": "^0.9.0",
"webpack-stream": "^3.2.0"
}
}
So if you launch npm start build it build the prod version in a directory that i called app_build/
Hope it can help you