1.新建web项目
2.npm init -y 生成package.json
复制package.json包的依赖
"vue": "^2.6.12",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3",
"html-webpack-plugin": "^2.30.1"
{
"name": "02-teach-webpack-study02",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open --port 4000 --hot"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"vue": "^2.6.12",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3",
"html-webpack-plugin": "^2.30.1"
}
}
3.安装需要的依赖包,进入项目文件目录下的cmd
cnpm install
4 .修改package.json文件,使用webpack热启动
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open --port 4000 --hot"
},
5.新建webpack.config.js文件,并修改关键路径信息
可以复制后再修改关键信息,比如入口文件路径和出口文件路径
// 由于 webpack 是基于Node进行构建的，所有，webpack的配置文件中，任何合法的Node代码都是支持的
var path = require('path')
var VueLoaderPlugin=require('vue-loader/lib/plugin')
// 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部
// 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点
var htmlWebpackPlugin = require('html-webpack-plugin')
// 当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，我们并没有提供 要打包 的文件的 入口 和 出口文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个 配置对象，然后根据这个对象，进行打包构建
module.exports = {
entry: path.join(__dirname, './main.js'), // 入口文件
output: { // 指定输出选项
path: path.join(__dirname, './dist'), // 输出路径
filename: 'bundle.js' // 指定输出文件的名称
},
plugins: [ // 所有webpack 插件的配置节点
new htmlWebpackPlugin({
template: path.join(__dirname, './index.html'), // 指定模板文件路径
filename: 'index.html' // 设置生成的内存页面的名称
}),
new VueLoaderPlugin()
],
module: { // 配置所有第三方loader 模块的
rules: [ // 第三方模块的匹配规则
{ test: /\.vue$/, use: 'vue-loader' }
]
}
}
6.新建login.vue文件
<template>
<div>
<h1>登录页面:{{message}}</h1>
</div>
</template>
<script>
export default {
data(){
return {message:'这是login.vue创建的组件'}
},
methods:{
show(){
console.log('方法:'+this.message);
}
},
created(){
this.show();
}
}
</script>
<style>
</style>
7.修改index.html
<body>
<div id="app">
<h1>AAAA</h1>
</div>
</body>
8.修改main.js文件
import Vue from 'vue'
import login from './login.vue'
var vue=new Vue({
el:'#app',
render:c=>c(login)
});