Webpack构建Vue项目(非Vuecli)

我们平时构建Vue项目，经常是用Vue官方提供的Vue-Cli脚手架，搭建起来非常方便。而Cli是基于webpack的工具，这里我要直接用webpack来搭建一个vue项目。

前提
请确保安装了 Node.js 的最新版本,Node-v查看版本号

开始构建项目

创建项目目录(myVuecli)
生成package.json

npm init

在项目中安装webpack

    npm install --save-dev webpack

（如果你使用 webpack 4+ 版本）在项目中安装 webpack-cli

   npm install --save-dev webpack

src 中创建 index.html
src 中创建 main.js（主入口文件）
src 中创建 components (components 存放 vue 组件)
src中创建App.vue文件
在根路径中创建 webpack.config.js

6.安装依赖

npm install --save vue
npm install --save vue-router
npm install --save-dev webpack-dev-server
npm install --save-dev babel-core babel-loader@7.1.5 babel-preset-env
npm install --save-dev css-loader style-loader
npm install --save-dev less less-loader
npm install --save-dev url-loader
npm install --save-dev html-webpack-plugin
npm install --save-dev vue-loader vue-template-compiler

vue-loader 用于解析.vue文件
vue-template-compiler 用于编译模板配置如下

let VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    module:{
        rules:[{
            test:/\.vue$/,
            use:['vue-loader']
        },]
     },
   plugins:[
        new vueLoaderPlugin()
   ]
}

配置webpack-dev-server进行热更新

let Webpack = require('webpack');
module.exports = {
    devServer:{
        contentBase: './src',
        port:8001,
        hot:true,//热更新
        open:true,//自动启动浏览器
        inline:true,//文件内容修改，浏览器自动刷新
        historyApiFallback:true,// 单页面应用切路由不刷新（history模式）
        proxy:{
        //配置跨域
            'api':{
                target:'http://localhost:8000',
                changeOrigin:true,
                secure:false
            }
        }
    },
    plugins:[
        new Webpack.HotModuleReplacementPlugin();
    ]
}

7.配置打包命令

在package.json中的scripts中配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "build": "webpack",
    "cmdBuild": "webpack-cli --entry ./app/main.js --output ./public/bundle.js"
}

8.配置Vue文件

//App.vue
<template>
  <div id="app">
      This is my Vue!!
  </div>
</template>

//index.html
<body>
    <div id="app"></div>
</body>

//main.js
import Vue from 'vue';
import App from './App.vue'
new Vue({
    render: h => h(App)
}).$mount('#app');

最后

npm run dev 项目运行起来
npm run build 打包项目

在这里插入图片描述

来源：CSDN

作者：MrHouuu

链接：https://blog.csdn.net/weixin_43721741/article/details/103731808

标签

Webpack

vue

dev

webpack-dev-server