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
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
- 确认过眼神,你还是没有准备秋招的人?时间仓促。自京东6月8号开启管培生的招聘,就意味着秋招的开始。然而你还在等着秋...