vue+webpack搭建基础项目（非vue-cli）

Posted 2021-01-02 寒筱洱

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue+webpack搭建基础项目（非vue-cli）相关的知识，希望对你有一定的参考价值。

yarn add vue
yarn add webpack
yarn add webpack-cli
yarn add html-webpack-plugin
yarn add webpack-dev-server
创建build、src文件夹

创建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

创建src/index.js文件

import Vue from ‘vue‘
new Vue({
  el:‘#app‘,
  render(h){
    return h(‘div‘,‘hello world！‘)
  }
})

创建build/webpack.dev.conf.js文件

const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
module.exports = {
  entry: ‘./src/index‘,
  output: {
    filename:‘./dist/main.js‘
  },
  plugins:[new HtmlWebpackPlugin({
    filename:‘index.html‘,
    template:‘./src/index.html‘,
    inject:true //true夹在在文件尾部
  })],
  devServer: {
    port:1222,
    open:true//自动打开浏览器
  }
}

在package.json中添加scripts
yarn start 启动项目

gitHub

以上是关于vue+webpack搭建基础项目（非vue-cli）的主要内容，如果未能解决你的问题，请参考以下文章

webpack+vue搭建基础

Vue+webpack从零搭建工程项目

node+webpack环境搭建 vue.js 2.0 基础学习笔记

原创从零开始搭建Electron+Vue+Webpack项目框架预加载和Electron自动更新

# Webpack 学习Webpack 搭建 Vue项目