一直以来vue项目都是直接使用vue提供的脚手架进行搭建，非常简单方便，但是对于webpack的很多细节不清楚，所以通过手动使用webpack来搭建vue项目，深入了解webpack，以方便日后可快速定位部分问题以及做一些优化。
构建步骤
一. 安装node环境
node官网下载 .msi 安装包。
然后双击打开，下一步安装即可。
安装界面
安装完成后，命令行输入node -v 和 npm -v 查看到安装的版本，即安装成功。
>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即可。
