Many Vue beginners who tried the framework were put off by webPack’s overly complex configuration and ended up unable to produce the desired Hello Word effect. Today I wrote down all the steps I took to package a Vue Hello World application using WebPack for the first time for beginners of Vue.
- Install NodeJS and NPM, not to mention these two, there are many tutorials online.
- Create a local folder, run NPM init, go to next, and automatically generate package.json.
Run the NPM install -save-dev webpack-dev-server command to install a lightweight server for local testing after the VUE application is developed.
Repeat the command NPM install -save-dev to paste the following command into CMD:
NPM install - save-dev CSS-loader NPM install - save-dev vue-template-compiler NPM install - save-dev webpack NPM install - Save-dev vue-loader NPM install - save-devvue-routerCopy the codeThe -save-dev argument causes the installed modules to appear in the devDependencies section of package.json, as shown in red below:
These are development time dependencies. We install the runtime dependencies again with the following command:
NPM install -- save vue vuexCopy the codeThen manually add the following content to package.json:
The purpose is to start webpack-dev-server with the command NPM run dev and run our vue application with the parameter — inline –hot.
- Create a folder named SRC under the root of the project folder. Create a new file named index.vue inside the folder and copy the following contents into it:
<style>
h2{
color: red;
}
</style>
<template>
<h2>Jerry: Hello, World!</h2>
</template>
<script>
module.exports = {
data: function(){
return{}; }}</script>
Copy the codeGo back to the root directory and create a new file main.js:
import Vue from 'vue';
import AppJerry from './src/index.vue'
new Vue({
el: "#demo".components: {
app: AppJerry
}
});
Copy the codeThis code first exports the application we implemented in the SRC folder index.vue, stores it in the variable AppJerry, and installs the application in the DIV tag of the HTML page with the id demo. Installation is done by creating a Vue instance and passing the ID of the div element into the constructor. Of course, we haven’t created an HTML file yet, so create a file called index.html immediately:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
<div id="demo">
<app></app>
</div>
<script src="dist/build.js"></script>
</body>
</html>
Copy the codeWe noticed that the index.html file references a dist/build.js file. What is this file used for?
This brings us to the important role webPack plays in modern front-end development techniques. WebPack can be viewed as a module baler: What it does is analyze our front-end project structure, find JavaScript modules and other extensions that browsers don’t run directly, such as Scss, TypeScript, etc., and package them into appropriate formats for browsers to use. In our case, webpack packs the index.vue file in our SRC folder into a browser recognized JS file. The output of Webpack is the build.js file in our dist folder.
To give WebPack a clear idea of what it is trying to accomplish, we complete the WebPack task specification by creating a configuration file, webpack.config.js.
The contents of this configuration file:
var path = require('path');
module.exports = {
entry: './main.js'.output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/'.filename: 'build.js'
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'}},module: {
loaders: [{test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(png|jpg|eot|svg|ttf|woff)/,
loader: 'url? limit=40000'}}}]Copy the codeIt defines that the entry for Webpack to execute tasks is main.js file, the folder of task output is dist directory in the project folder, and the output file is build.js. The files scanned by Webpack are specified by vue-loader, and the features are files ending in.vue.
So far, the development and configuration of the Vue-based Hello World application is complete, isn’t it?
We’re ready to test it.
- Type the webpack command directly from the command line, and the package will be automatically executed and you will see a successful build.js message on the console:
This packed file is quite large, 323KB, and contains both the content of vue.js itself and the converted content of our index.vue. The highlighted area below is the JavaScript code generated by our index.vue implementation after webpack processing.
Start webpack-dev-server with NPM run dev and see a message indicating that our application is now accessible on localhost:8080.
Browser access, see Hello World output, it shows that we successfully completed a Vue application development process based on Webpack.
For more of Jerry’s original articles, please follow the public account “Wang Zixi “:
