2018-12-13 ,手动搭建webpack + vue

1.创建文件夹,然后在该文件夹内创建src文件夹
2.输入命令行生成package.json文件 npm init -y
3.在src文件夹里面新建一个入口文件main.js 和一个vue文件 , app.vue
4.配置webpack.config.dev.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode:'development',
entry: './src/mian.js',
module: {
rules: [
{test: /.vue$/, use: ['vue-loader']}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template:'./template.html'
})
]
}
测试环境 ,所以没有配置出口,主要用了两个插件,一个是vue-loader的插件,需要安装依赖,vue-template-compiler 和 vue-loader , 想要运行html文件,需要安装两个包, 一个是webpack-dev-server 和 html-webpack-plugin ,第一个是在我们开发阶段内部会开启一个node服务,使用本地打开的方式打开html文件,第二个使用来生成页面插件
5.在跟页面创建temple.html文件,然后创建一个id为app的div标签
最后在package.json配置运行脚本 ,手动搭建完成

你可能感兴趣的:(2018-12-13 ,手动搭建webpack + vue)