Dushyant Sabharwal dushyant89

## npm_dependency_types.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                dushyant89
                / npm_dependency_types.md
            
            
              Last active
              June 19, 2019 08:17
            
              
                NPM Dependency types
              
          
    NPM dependency types comparison

Compiled a list of differences between different types of dependencies supported by NPM. If you are someone like who doesn't change package.json often but needs something for a quick reference then the below table might be helpful.
| Dimension                   | Direct                                | Dev                                             | Peer                                                                               | Optional                                                                                                            | Bundled                                                                                                              |
|-----------------------------|---------------------------------------|-------------------------------------------------|------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------

  
## Login.vue
<template>
  <div>
    <h1>This is a WIP login page</h1>
  </div>
</template>

## webpackDevServer.config.js
devServer: {
        // The url you want the webpack-dev-server to use for serving files.
        host: '0.0.0.0',
        // Can be the popular 8080 also.
        port: 8010,
        // gzip compression
        compress: true,
        // Open the browser window, set to false if you are in a headless browser environment.
        open: false,
        watchOptions: {

## module.config.js
module: {
        rules: [
            {
                // vue-loader config to load `.vue` files or single file components.
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        // https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles
                        css: ['vue-style-loader', {

## config.js
entry: {
        // Since we need to load vue in the entry page.
        vue: 'vue',
        // This is where the `main-content` component is
        index: resolve('src/index.js'),
    },
    output: {
        filename: '[name].js',
        // Folder where the output of webpack's result go.
        path: resolve('dist'),

## main-content.vue
<template>
    <div class="main-content">
        <h1> This is your first component in Vue </h1>
        <h3> {{ webpack }} </h3>
    </div>
</template>

<script>
    export default {
        name: "main-content",

## webpack.config.js
const path = require('path');
const webpack = require('webpack');
// `..` since this config file is in the config folder.
const resolve = relativePath => path.resolve(__dirname, '..', relativePath);

module.exports = {
    mode: 'development',
    entry: {
        // since we need to load view in the entry page.
        vue: 'vue',

## package.json
"dependencies": {
    "vue": "^2.5.16"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.11",
    "vue-loader": "^14.2.2",

## package.json
{
  "dependencies": {
    "vue": "^2.5.16"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "^4.11.1",

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue Webpack Demo</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
        <div id="mainContent">
            {{ message }}
	<template>
	<div>
	<h1>This is a WIP login page</h1>
	</div>
	</template>
	devServer: {
	// The url you want the webpack-dev-server to use for serving files.
	host: '0.0.0.0',
	// Can be the popular 8080 also.
	port: 8010,
	// gzip compression
	compress: true,
	// Open the browser window, set to false if you are in a headless browser environment.
	open: false,
	watchOptions: {
	module: {
	rules: [
	{
	// vue-loader config to load `.vue` files or single file components.
	test: /\.vue$/,
	loader: 'vue-loader',
	options: {
	loaders: {
	// https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles
	css: ['vue-style-loader', {
	entry: {
	// Since we need to load vue in the entry page.
	vue: 'vue',
	// This is where the `main-content` component is
	index: resolve('src/index.js'),
	},
	output: {
	filename: '[name].js',
	// Folder where the output of webpack's result go.
	path: resolve('dist'),
	<template>
	<div class="main-content">
	<h1> This is your first component in Vue </h1>
	<h3> {{ webpack }} </h3>
	</div>
	</template>

	<script>
	export default {
	name: "main-content",
	const path = require('path');
	const webpack = require('webpack');
	// `..` since this config file is in the config folder.
	const resolve = relativePath => path.resolve(__dirname, '..', relativePath);

	module.exports = {
	mode: 'development',
	entry: {
	// since we need to load view in the entry page.
	vue: 'vue',
	"dependencies": {
	"vue": "^2.5.16"
	},
	"devDependencies": {
	"babel-core": "^6.26.0",
	"babel-loader": "^7.1.4",
	"babel-preset-env": "^1.6.1",
	"babel-preset-stage-2": "^6.24.1",
	"css-loader": "^0.28.11",
	"vue-loader": "^14.2.2",
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Vue Webpack Demo</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	</head>
	<body>
	<div id="mainContent">
	{{ message }}