Introduction
In the implementation of componentization in vue, we use the vue-specific file format.vue. In each .vue file is a component. In the component, we write all html, css, and js, and then configure vue-loader in webpack.
Create vue components
Create components folder in the src directory and create files in it. In this way, the directory structure of our project is as follows:
|--dist //Folder generated after webpack is packaged| |-- |--node_modules //The folder where the project depends|--src //File Entry| |--components //Component storage folder| |-- //Component| |-- //Main JS file|-- //Main html file|-- |-- //webpackConfiguration File
First write the code in:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue example</title> </head> <body> <app></app> <script src="dist/"></script> </body> </html>
Open the file in the editor and write the following code:
<template>
<div class="message">{{msg}}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello from vue-loader'
}
}
}
</script>
<style>
.message{
color:red;
font-size:36px;
font-weight:blod;
}
</style>
Write in:
import Vue from 'vue'
import App from './components/'
new Vue({
el: 'body',
components:{App}
});
This way, you can see the effect by running the command webpack
The ES6 module is used here—import，export
exportOrder
The export command is used to specify the external interface of the module. A module is an independent file. All variables in this file cannot be retrieved externally. If you want to be able to read a variable inside the module externally, you must use the export keyword to expose the variable externally. For example:
// export var firstName = 'Michael'; export var lastName = 'Jackson'; export var year = 1958;
This way, three variables can be output to the outside world.
importOrder
useexportAfter the interface is exposed to the outside world, other js files passimportThe command loads this module file. The three variables exposed above are introduced in another js file as follows:
//
import {firstName,lastName,year} from './export';
function setName(element){
= firstName + ' ' + lastName;
}
webpack's hot-reload
Automatic front-end refresh is now very common, that is, the browser will automatically refresh after changing the page, but this function will be very difficult to use when we make single-page applications. Therefore, webpack supports hot-reload (hot replacement). When we modify the module, the page will not be refreshed, and it will take effect directly on the page.
The basis of hot-reload—webpack-dev-server
webpack-dev-server supports two modes of automatic page refresh:
iframe mode (the page embeds an iframe and renders the page's changes in it)
inline mode (a small webpack-dev-server client will be packaged as an entry file, and this client will refresh the page when the backend code changes)
iframe mode
No additional configuration is required when using iframe mode. Enter the command under dos
$ webpack-dev-server
Enter in the browserhttp://loacalhost:8080/webpack-dev-server/
inline mode
Enter the command under dos
$ webpack-dev-server --inline --hot
Start the server and open it in the browser http://loacalhost:8080You can see our page. At this time, the modified css and the text in the html can be displayed immediately in the browser.
For detailed instructions on webpack-dev-server, you can refer to the official documentation or blog WEBPACK DEV SERVER.
Here is a question that needs to be explained
In many articles, it is said that modifying the msg text in the script tag in the file will immediately present the effect in the browser. However, in fact, this effect did not appear when I was doing demo. Googled a lot and found the answer. You Da said: "data is the initial value, but it will retain the current state when hot updates."
At this point, the basic ending of webpack+vue is simple, but since we encountered some pitfalls in the process, we can summarize that the research on vue is just the beginning...
Attached:
My webpack configuration file:
var path = require('path');
= {
entry: './src/',
output: {
path: './dist',
publicPath:'dist/',
filename: ''
},
//Configuration automatically refreshes, if opened, the browser will refresh instead of hot replacement /*devServer: {
historyApiFallback: true,
hot: false,
inline: true,
grogress: true
},*/
module: {
loaders: [
//Convert ES6 syntax {
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
//Parse .vue file {
test:/\.vue$/,
loader:'vue'
},
//Image conversion, encoding that is automatically converted to base64 if it is less than 8K {
test: /\.(png|jpg|gif)$/,
loader:'url-loader?limit=8192'
}
]
},
vue:{
loaders:{
js:'babel'
}
},
resolve: {
// Extensions omitted when requiring, such as: require('app') are not required extensions: ['', '.js', '.vue'],
// Alias, you can directly use alias to represent the set path and other alias: {
filter: (__dirname, './src/filters'),
components: (__dirname, './src/components')
}
}
}
document:
{
"name": "webpackvue",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.9.1",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.9.2",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue":"^1.0.24",
"vue-router":"^0.7.13",
"vue-hot-reload-api": "^1.3.2",
"vue-html-loader": "^1.2.2",
"vue-loader": "^8.5.2",
"vue-style-loader": "^1.0.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.13.0"
}
}
Summarize
The above is the entire content of this article. I hope the content of this article will be of some help to your study or work. If you have any questions, you can leave a message to communicate.