Windows环境 vue+webpack构建前端项目

  一直以来vue项目都是直接使用vue提供的脚手架进行搭建，非常简单方便，但是对于webpack的很多细节不清楚，所以通过手动使用webpack来搭建vue项目，深入了解webpack，以方便日后可快速定位部分问题以及做一些优化。

构建步骤

一. 安装node环境

node官网下载 .msi 安装包。
然后双击打开，下一步安装即可。

安装界面

>node -v
v14.4.0
>npm -v
6.14.5

二、初始化项目

// 新建目录 vue+webpack
md vue+webpack
// 进入目录
cd vue+webpack
// 初始化项目
npm init

输入项目初始化信息，输入yes完初始化。
目录下会生成package.json文件，记录了刚刚输入的项目信息。

三、安装webpack

npm install webpack webpack-cli -D

此时执行webpack命令会报错，因为我们不是全局安装的webpack，我们修改package.json文件，在scripts下增加"build": "webpack"。 然后执行 npm run build就会在项目内执行webpack命令。
但此时执行npm run build还是会报错，因为没有配置打包入口文件和输出文件。

四、配置webpack（webpack.config.js）

根目录下新建webpack.config.js配置文件。
配置打包入口文件和输出文件：

const path = require("path");

module.exports = {
  entry: path.resolve(__dirname, "./src/index.js"),
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "index-bundle.js"
  }
}

五、安装vue和相关依赖

npm install vue -S
npm install -D vue-loader vue-loader-plugin vue-template-compiler

增加vue-loader配置，在webpack.config.js中增加配置：

const path = require("path");
const VueLoaderPlugin = require('vue-loader-plugin');

module.exports = {
 entry: path.resolve(__dirname, "./src/index.js"), //入口文件
// 打包输出位置
 output: {
   path: path.resolve(__dirname, "./dist"),
   filename: "index-bundle.js"
 },
 module: {
   rules: [
     {
       // 配置vue文件的loader
       test: /\.vue$/,
       loader: 'vue-loader',
       exclude:/node_modules/
     }
   ]
 },
 plugins: [
   new VueLoaderPlugin(),
  ]
}

六、项目代码编写

index.html

<div id="app"></div>
  <script src="./dist/index-bundle.js"></script>

src/index.js

import Vue from "vue";
import App from "./App.vue"

new Vue({
  render: h => h(App)
}).$mount("#app");

src/App.vue

<template>
<div>
  {{message}}
</div>
</template>

<script>
export default {
  data(){
    return{
      message: "hello world!"
    }
  }
}
</script>

至此基本配置已完成，执行npm run build后，打开index.html即可。