WebPack Everyday Guid

1. Install NodeJs

Install NodeJs from official website https://nodejs.org/en/

2. Add package.json with content to the project

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "source-map-loader": "^0.2.4",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@vue/test-utils": "^1.0.0-beta.28",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.0.0",
    "babel-loader": "^8.0.5",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^2.1.0",
    "eslint": "^5.12.1",
    "eslint-config-standard": "^12.0.0",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-import": "^2.15.0",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^5.1.0",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^24.0.0",
    "jest-serializer-vue": "^2.0.2",
    "mini-css-extract-plugin": "^0.5.0",
    "style-loader": "^0.23.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "uglify-es": "^3.3.9",
    "url-loader": "^1.1.2",
    "vue-jest": "^3.0.2",
    "vue-loader": "^15.6.2",
    "vue-server-renderer": "^2.5.22",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.22",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14",
    "webpack-merge": "^4.2.1",
    "cpy-cli": "^1.0.1",
    "framework7": "^4.0.0",
    "framework7-icons": "^2.2.0",
    "framework7-vue": "^4.0.0",
    "http-server": "^0.10.0",
    "material-design-icons": "^3.0.1",
    "vue": "^2.6.3"
  },
  "scripts": {
    "build": "webpack -p",
    "watch": "webpack --watch"
  }
}

3. Add webpack.config with content to the project

/// <binding />

"use strict";

const path = require('path');

const VueLoaderPlugin = require('vue-loader/lib/plugin');



module.exports = {

    entry: "./wwwroot/js/site.js",

    output: {

        filename: './wwwroot/js/dist/bundle.js',

        path: __dirname

        //path: path.join(__dirname+"/wwwroot/js", ""),

        //path: path.resolve(__dirname, 'dist')

    },

    devtool: 'source-map',

    //devServer: {

    //    contentBase: ".",

    //    host: "localhost",

    //    port: 9000

    //},







    module: {

        loaders: [

            {

                test: /\.jsx?$/,

                loader: "babel-loader"

            }

        ],

        rules: [

            {

                test: /\.js$/,

                use: ["source-map-loader"],

                enforce: "pre"

            },

            {

                test: /\.vue$/,

                loader: 'vue-loader'

            },

            // for  `.js`

            // and inline `<script>` in `.vue`

            {

                test: /\.js$/,

                loader: 'babel-loader'

            },

            // this is for `.css`

            // and inline `<style>` in `.vue`

            {

                test: /\.css$/,

                use: [

                    'vue-style-loader',

                    'css-loader'

                ]

            }

        ]



    },

    plugins: [

        // plugin for

        new VueLoaderPlugin()

    ],

    resolve: {

        alias: {

            'vue$': './wwwroot/lib/vue/vue.js'

            //'vue$': 'C:/SAS/Projects/Vue/scripts/vue.js' // 'vue/dist/vue.common.js' for webpack 1

        },

        extensions: ['*', '.js', '.vue', '.json']

    }

};

4. Install global packages via the console

npm install webpack -g

npm install webpack-dev-server -g

//npm install babel-core --save-dev

//npm install -D vue-loader vue-template-compiler

//npm install --save-dev webpack-cli

npm -g install webpack-cli

P.S Another Examples See in My GitHub https://github.com/k2moz/WebPackConfigExamples


P.S 2. For VisualStudio use https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebPackTaskRunner