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
npm init -y
Install Vue3
npm i vue
Install Webpack
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
Create src folder and index.html, App.vue, main.js
Install babel-loader
npm i -D @babel/core @babel/preset-env babel-loader
Create file babel.config.json
{
"presets": [
"@babel/preset-env"
]
}
Install vue-loader
npm i -D vue-loader
Create file webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require("vue-loader");
module.exports = {
mode: "production",
devtool: "source-map",
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].chunk.js',
clean: true
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html' // to import index.html file inside index.js
}),
new VueLoaderPlugin(),
],
devServer: {
port: 3039 // you can change the port
},
module: {
rules: [
{
test: /\.vue$/,
exclude: /node_modules/,
use: {
loader: 'vue-loader',
}
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
},
]
},
};
Top comments (0)