DEV Community

roggc
roggc

Posted on

Setting up a development environment with Vue, JSX and Webpack

In this post, I will show you how to set up a development environment for Vue with JSX and webpack.

We will be using npm package manager. You start by creating a folder and inside it, you do in console npm init -y to create package.json project file, wich the dependencies of the project and much more are set.

These are the dependencies to be installed with npm:

    "@babel/core": "^7.8.3",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
    "@vue/babel-preset-jsx": "^1.1.2",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^1.1.3",
    "vue": "^2.6.11",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
Enter fullscreen mode Exit fullscreen mode

You install each of the dependencies above by doing npm i name_of_the_dependency, so one command that should install all of the dependencies above will be:

npm i @babel/core @vue/babel-helper-vue-jsx-merge-props @vue/babel-preset-jsx babel-loader css-loader html-webpack-plugin style-loader vue webpack webpack-cli webpack-dev-server

Once done that, a node_modules folder will be created inside the project containing all the source code of the dependencies installed and much more. Now, you are able to proceed.

Next thing to do it is to set up webpack configuration file. This will be webpack.config.js. You create this file in the project and set its content to the next:

const HtmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
    entry:'./src/index.js',
    plugins:[
        new HtmlWebpackPlugin({
            template:'src/public/index.html',
            favicon:'src/public/favicon.ico'
        })
    ],
  module: {
    rules: [
      {
        test: /\.js?$/,
        loader: "babel-loader"
      },
      {
        test: /\.css$/i,
        use: [
          'style-loader', 
          { 
            loader: 'css-loader', 
            options: { 
              modules: true 
            } 
          },
        ],
      },
    ]
}
}
Enter fullscreen mode Exit fullscreen mode

Next thing to do it is to create .babelrc configuration file:

{
    "presets": ["@vue/babel-preset-jsx"]
}
Enter fullscreen mode Exit fullscreen mode

Now you create a src folder where all your content will be put. Inside of the src folder, you create index.js file. This will be the entry point for webpack. In index.js you put the following content:

import App from './components/app/app'

new App({
    el:'#app'
})
Enter fullscreen mode Exit fullscreen mode

You must create another folder, inside src, named public where you will put your index.html file and your favicon.ico.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>title</title>
    </head>
    <body>
        <div id='app'></div>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now, you create, inside src folder, another folder named components. Inside of the components folder, you create a folder named app. Inside of it, you create two files, app.css and app.js.

app.css

.app{
    font-family:sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

app.js

import Vue from 'vue'
import s from './app.css'

export default Vue.extend({
    name:'app',
    render(){
        return (
            <div class={s.app}>
                hello
            </div>
        )
    }
})
Enter fullscreen mode Exit fullscreen mode

With this setup, we will have scoped styles (styles or CSS class names scoped to this component instances only).

And you are ready to go. The next thing to do is to type in console npx webpack-dev-server to start the development server and browse to page localhost:8080 in your browser to see the page (app) in action.

When you want to build it, you type in console npx webpack. This will produce a dist folder which you can deploy to your hosting service.

Top comments (0)