我在操作的时候，参考的是这篇文章：webpack 搭建 vue 项目。也可以参考yugosun的这篇博客你也许不知道的vuejs:工欲善其事必先利其器。但下面有几点需要注意的地方：
1：在安装webpack的时候，如果你使用 webpack 4+ 版本，你还需要安装 CLI。 webpack的安装：
npm install webpack --save-dev
或npm i webpack --save-dev
或用yarn add webpack --save-dev
webpack-cli的安装：
npm install --save-dev webpack-cli。
由于上面是本地安装，不是全局安装，所以在使用webpack编译的时候，如果直接输入webpack不行的话，就需要在命令行中输入 ./node_modules/.bin/webpack,但是这样比较麻烦，可以使用npx webpack，npx可以找到webpack安装的地方。但npx这种方式不稳定,因为如果你的node在安装的时候，如果某个目录有空格，npx就无法正确找到。
另外关于yarn和npm的区别，可以参考这篇文章：yarn vs npm:你需要知道的。
2：安装了vue之后，修改main.js文件里的内容，还要在index.html文件中，向body里面新加一个id为app的div，即
<div id="app">{{msg}}</div>
3：在使用webpack编译的时候，会报错，所以还要安装@babel/core即 npm install --save-dev @babel/core
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
4：文章中还有其他loader以及plugin的使用。其中webpack-dev-server很好用。我们在实际开发中需要将代码部署在server中，而不是在浏览器中直接打开文件。此时我们需要使用webpack的 webpack-dev-server 。它为我们提供了一个简单的web服务器，并且能够实时重新加载（live reloading）。另外可以在package.json的scripts中添加一个script脚本,可以直接运行开发服务器(dev server)：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open",
"build": "webpack"
},
这样直接在终端输入npm run dev代替webpack-dev-server。
5：npm init会生成package.json，npm install会根据package.json文件去下载安装项目所依赖的包等。
6：由于我们在开发环境和生产环境所需要的构建目标差异很大。我们通常建议为每个环境编写彼此独立的 webpack 配置。我们将使用一个名为 webpack-merge 的工具。具体可以参考webpack生产环境构建之配置。也可以直接引入通用的配置文件，使用...，如下面是在开发环境中引入了通用的配置文件webpack.base.config.js
var base = require("./webpack.base.config.js");
module.exports = {
...base,
mode: "development",
devtool: "inline-source-map",
devServer: {
contentBase: "./dist"
},
module: {
rules: [
...base.module.rules,
{
test: /\.css$/i,
use: ["style-loader", "css-loader"]
}
]
}
};
7：在使用npm或者yarn安装依赖的时候，遇到了两个类似的后缀--save-dev和-dev。查阅了很多资料，大家一般都是这样解释的：
--save：将保存配置信息到pacjage.json。默认为dependencies节点中。
--dev：将保存配置信息devDependencies节点中。
--save-dev：将保存配置信息到pacjage.json的devDependencies节点中。
dependencies：运行时的依赖，发布后，即生产环境下还需要用的模块。打包时会将其打包进去。
devDependencies：开发时的依赖。里面的模块是开发时用的，发布时用不到它。打包时不计算在内。 可以参考回答1, 回答2,回答3
所以，所有安装的webpack的loader和pligin，都使用--save-dev即可，用户不需要。而像我们项目中所依赖的vue，需要使用，就不能用--save-dev，而是用--save。
8：理解webpack中filename里的hash的作用，即如果我们在webpack.config.js的配置文件中，这样设置出口文件的名字，filename:[name][contenthash].js，那么在dist的目录下，生成的文件就是main.x.js。这里的x是一串hash数字，这有什么作用呢？
当我们每次去请求访问一个页面的时候，如果每次都要从服务器上把需要的所有文件都请求过来，有时速度会很慢。而且有时候之前已经访问过，内容缓存在本地了，而且这次请求的内容也并没有发生变化，但还是要重新去服务器获取。
使用了hash命名的话，会避免这个问题。即如果css或者js文件有更新改变的话，文件的命名是会发生变化的。所以当改了的话，在使用引入的地方也会有所改变，下次加载会更新，而不是使用本地缓存的。如果没有改变，再次请求的时候，就会使用缓存（这个缓存是http协议中规定的，浏览器必须支持），会直接从本地缓存中读取该文件，节省了时间。但注意index.html页面是不会缓存的，如果首页缓存了话，就无法实时获得更新了。
9：学习到了一个新的知识：热部署。简单的来说就是只想局部刷新修改了的地方，并不是全局刷新。要用到HotModuleReplacementPlugin，即启用热替换模块(Hot Module Replacement)，也被称为 HMR。但在webpack的官网上建议：永远不要在生产环境(production)下启用 HMR，另外这些只是实验性内容，以后可能会被弃用。
10：这是一篇关于node，npm的文章，Node.js 包管理器 NPM 讲解。
11：这是一篇掘金上点赞数很高的关于使用webpack去搭建vue开发环境：面试官：自己搭建过vue开发环境吗？。
12：如果在部署项目的时候，最后输入输入一系列的命令，我们可以创建一个脚本如deploy.sh，直接执行这个脚本sh deploy.sh。
13：yugosun的一系列博客：你也许不知道的vuejs 值得推荐一看。
掘金之路从此开启
