/vue-webpack-config

Configuration of Webpack to work with VueJS

Primary LanguageJavaScript

Vue 3

Demo: GitHub Pages

Vue Lifecycle

  1. Vue.createApp().mount()
    • beforeCreate Hook
  2. Init data & methods
  3. Instance created
    • created Hook
  4. Compile Template (el property) - [String HTML => JS Object] - Virtual DOM (is a JS Object, copy of actual DOM)
    • beforeMount Hook
  5. Replace el property with compiled template
  6. MOUNTED #1
  7. Data changes
    • beforeUpdate Hook (used for debugging)
  8. Apply changes to the template
    • updated Hook (used for debugging)
  9. MOUNTED #2
  10. .unmount()
    • beforeUnmount Hook
  11. Vue instance destroyed
    • unmounted Hook

Vue builds

  • Vue global is a full build (compiler + runtime)

    • <script src="https://unpkg.com/vue@next"></script>
    • <script src="https://unpkg.com/vue@3.2.21/dist/vue.global.js"></script>

  • Vue runtime (without compiler)

    • <script src="https://unpkg.com/vue@3.2.21/dist/vue.runtime.global.js"></script>

Webpack

npm install -g npm
npm audit fix
npm init 
npm i webpack webpack-cli --save-dev

webpack.config.js

module.exports = {
    entry: "./index.js",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    mode: "development"
}

Run:

./node_modules/.bin/webpack

or

npm run dev
npm run prod

Babel Presets:

  • @babel/preset-env for compiling ES2015+ syntax
  • @babel/preset-typescript for TypeScript
  • @babel/preset-react for React
  • @babel/preset-flow for Flow
npm i @babel/core @babel/preset-env babel-loader --save-dev

webpack.config.js

module.exports = {
    entry: "./index.js",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    mode: "development",
    module: {
        rules: [
            {
                test: /\.js%/,
                exclude: /(node_modules)/,
                use: 'babel-loader'
            }
        ]
    }
}

.babelrc

{
  "presets": [
    "@babel/preset-env"
  ]
}

SASS

npm i node-sass sass-loader css-loader style-loader --save-dev

webpack.config.js

module.exports = {
    entry: "./index.js",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    mode: "production",
    module: {
        rules: [
            {
                test: /\.js%/,
                exclude: /(node_modules)/,
                use: 'babel-loader'
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    }
}

MiniCssExtractPlugin

npm i mini-css-extract-plugin --save-dev

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    entry: "./index.js",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    mode: "production",
    module: {
        rules: [
            {
                test: /\.js%/,
                exclude: /(node_modules)/,
                use: 'babel-loader'
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // Uncomment 'style-loader' to add style to HTML Head
                    // 'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'main.css'
        })
    ],
    watch: true
}

Post CSS + PostCSS.parts

npm i postcss postcss-loader --save-dev
npm i autoprefixer --save-dev

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    entry: "./index.js",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    mode: "production",
    module: {
        rules: [
            {
                test: /\.js%/,
                exclude: /(node_modules)/,
                use: 'babel-loader'
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // Uncomment 'style-loader' to add style to HTML Head
                    // 'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'main.css'
        })
    ],
    watch: true
}

postcss.config.js

module.exports = {
    plugins: {
        autoprefixer: {
            // Options
        }
    }
}

package.json

{{
...
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

ESLint rules + demo rules config

npm i eslint -g

eslint --version
eslint dist/bundle.js
eslint index.js

eslint --init

.eslintrc.json

{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  }
}