一.项目初始化
1.创建项目,初始化项目
npm init -y
2.安装webpack
npm install webpack webpack-cli -D
- install :安装
- -D :安装开发环境依赖,是 -save-dev的缩写
二.编写项目入目
1.在根目录下编写index文件,作为项目主页文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>从零打造一个tudo应用</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
2.编写vue根实例
创建src目录,在src目录下创建main.js作为程序主入口文件
安装vue
npm install vue
挂载App组件
编写App.vue文件
挂载app实例 在man.js
//1.创建Vue根实例
import Vue from 'vue'
//导入app组件
import App from './App.vue'
new Vue({
el:'#app',
components:{
//组件名,组件对象
App:App
},
template:'<App/>'
})
```三.webpack基本配置
1.创建webpackconfig文件
在根目录编写webpack.config.js
//引入模块
const path = require('path');
module.exports = {
//打包文件是否为压缩格式
mode: "production",
entry: {
//打包文件的入口
main: './src/main.js',
}
output: {
//打包生成文件的名字
filename: 'bundle.js',
//打包生成文件的绝对路径
path: path.resolve(__dirname, 'dist')
}
}
2.编写webpack脚本
在pagejson中,创建脚本
这样就可以通过 npm run build
来执行webpack打包了
四。使用Vue-loder打包vue文件
1.安装vue-loder
官网:vue-loder
安装
npm install -D vue-loader vue-template-compiler
2.安装css-loader
npm install -D css-loader
3.配置webconfig脚本
//引入模块
const path = require('path');
// 引入'vue-loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
//打包文件是否为压缩格式,开发development
mode: "production",
entry: {
//打包文件的入口
main: './src/main.js',
},
output: {
//打包生成文件的名字
filename: 'bundle.js',
//打包生成文件的绝对路径
path: path.resolve(__dirname, 'dist')
},
//打包规则
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件来施展魔法
new VueLoaderPlugin()
],
//添加别名配置
resolve:{
alias:{
'vue':'vue/dist/vue.js'
}
}
}
五.测试
1.打包
npm run build
2.index测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>从零打造一个tudo应用</title>
</head>
<body>
<div id="app">
</div>
<script src="dist/bundle.js"></script>
</body>
</html>