In this article, let’s create a Vue3 template project, it involves Vue3, Webpack.
https://github.com/markliu2013/vue3-template-js
Create a folder and initialize NPM
Install Vue3
Install Webpack
Create src folder and index.html, App.vue, main.js
Install babel-loader
Create file babel.config.json
“presets“: [
“@babel/preset-env“
]
}
Install vue-loader
Create file webpack.config.js
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports = {
entry: ‘./src/index.js‘,
output: {
path: path.resolve(__dirname, ‘dist‘),
filename: ‘main.js‘ // the name of the bundle
},
// import App from ‘./App’;
resolve: {
modules: [__dirname, ‘src‘, ‘node_modules‘],
extensions: [‘*‘, ‘.js‘, ‘.jsx‘]
},
plugins: [
new HtmlWebpackPlugin({
template: ‘src/index.html‘ // to import index.html file inside index.js
})
],
devServer: {
port: 3036 // you can change the port
},
module: {
rules: [
{
test: /.(js)x?$/,
exclude: /node_modules/,
use: {
loader: ‘babel-loader‘,
}
}
]
}
};
