本文使用webpack+vue创建项目。本文基于wenpack4.6.0、vue2.x 、node.js 8.11.0.
由于代码中会使用es6的语法,因此需要babel转码器。
1.创建项目。npm init
2.本地安装如下插件。安装完后package.json如下所示:
{
"name": "single-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {},
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-runtime": "^6.26.0",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-plugin": "^0.1.0",
"html-webpack-plugin": "^3.2.0",
"vue": "^2.5.16",
"vue-hot-reload-api": "^2.3.0",
"vue-loader": "^15.0.1",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15",
"webpack-dev-server": "^3.1.3"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open --inline",
"dev": "webpack --mode development"
},
"author": "",
"license": "ISC"
}
3.创建配置文件webpak.config.js实现对。vue文件的和es6的解析,并且配置实时热更新。
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader');
const ExtractTextPlugin=require("extract-text-webpack-plugin");
const webpack = require ("webpack");
const webpackDevServer = require('webpack-dev-server');
module.exports = {
mode: 'development',
entry:{
main:"./main.js"
},
output:{
path:path.join(__dirname,"./dist"),
publicPath:'/dist/',
filename:"main.js"
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude:/node_modules/
},
{
test: /\.css$/,
use:ExtractTextPlugin.extract({
use:'css-loader',
fallback:'style-loader',
})
}
]
},
plugins: [
new VueLoaderPlugin(), //处理vue文件
new ExtractTextPlugin("main.css"), //提取css
new webpack.HotModuleReplacementPlugin() //热更新功能
],
devServer:{ //配置
contentBase: "./",
historyApiFallback:true,
inline:true,
progress:true,
hot:true,
port:8080
},
resolve: {
alias: { 'vue$':'vue/dist/vue.js'} //解析vue.js时必须写这个
}
}
4.创建.babelrc文件。因为要转码es6。
"presets":["es2015"],
"plugins":["transform-runtime"],
"comments":false
}
5.创建入口文件main.js
import Vue from 'vue'
import App from './app.vue'
new Vue({
el: '#app',
template: '<App/>',
components: { App }
});
或者是:
import Vue from 'vue'
import App from './app.vue'
new Vue({
el: '#app',
render:h=>h(App)
});
这两种写法都可以将组件渲染到挂在元素上。注意挂在元素不能时body或html。
6.创建app.vue。由三部分组成:template、script、style。template是组件的模板。script是组件的构造器。style为样式。
<template>
<div class="message">{{name}}</div>
</template>
<script>
export default {
data () {
return {
name: 'Hello from vue-loader'
}
}
}
</script>
<style scoped>
.message{
color:red;
font-size:36px;
font-weight:blod;
}
</style>
7.创建index.html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue example</title>
<link rel="stylesheet" href="dist/main.css">
</head>
<body>
<div id="app"></div>
<script src="dist/main.js"></script>
</body>
</html>
8.运行 npm run dev 打包组件。
显示如下:data-v-381730fa是因为style的scoped所致,该样式只能在该vue组件内使用。
9.改变app.vue内的script内 data对象的name属性值,保存页面,打开刚才的页面,可以看到页面内容更新,但是此时却没有刷新页面。即实现了热更新。
webpack实现热更新请参考我的上篇文章:点击打开链接。