webpack打包方法总结
第一次使用webpack进行打包，遇到了很多的坑，老是报错，经过这个查查查，终于打包成功，这里的打包就是单纯打包js，没有和任何的框架配合使用，但是在执行过程中出现了很多的问题，现在已经逐步解决，大概流程了解了，但是还没有和深刻的理解，这里就是先做个笔记，以免以后遇到相同的情况，浪费时间。
1.webpack打包基于node
先下载node，下载地址：https://nodejs.org/en/download/
根据自己电脑的不同型号进行下载即可，下载完之后，根据提示一步一步进行安装就好，有疑问的可以参考这篇文章：https://blog.csdn.net/qq_26562641/article/details/72235585
这篇文章的步骤8以后不需要执行了，因为目前下载的node版本都比较高，所以环境变量不需要手动配置环境变量
打开命令行工具直接查看版本检查是否安装成功,如下
（2）安装成功之后就可以进行webpack的使用和下载了
1.进入到要打包文件所在的目录下执行 npm init，这样就会初始化一个项目包，里面就有了一个package.json的文件生成
2.然后安装一下webpack，既然我们想打包，就要把webpack这个工具安装好，安装方式有两种，一个是全局安装一个是安装在项目中，在项目的package.json目录下执行的命令分别是npm install -g webpack 和 npm install --save-dev webpack，在这里我们安装在项目里面，使用第二种安装方式
3.安装完成之后我们能看到项目目录下有一个node_module的文件夹，然后我们就可以写自己的项目了，我们首先建立一个src和public的文件夹，在src中新建两个文件，分别是test.js和index.js，在pulic中新建一个index.html文件，这样我们的基本项目雏形就产生了
注意：因为我用的是webpack4.0以上的版本，因为webpack4.0以上写法有所改变，打包时会去找src路径下的index.js文件去打包（这里的index.js的命名应该可以在配置中进行改，还没有测），如果不把打包的文件写在src下打包时会报一个./src的错误
4.我们在index.html中写入一下片段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>
5.我们在index.js中把test.js的方法导入进来：
var test= require('./test.js');
document.getElementById('root').appendChild(test());
6.下面我们就可以使用webpack工具进行打包了，在项目的根目录，也就是包含node_module的目录下执行下面这个命令node_modules/.bin/webpack src/index.js，这条命令的是使用webpack4.0以上的版本把打包后的文件命名为main.js放在list文件夹下，其中src/index.js是项目的入口。
注意：这里又会出现问题，会报错，如下：
The CLI moved into a separate package:webpack-cli.Please install 'webpack-cli' in addition to webpack itself to use the CLI.->when using npm: npm install webpack-cli -D->when using yarn: yarn add webpack-cli -D
翻译成中文：
CLI（命令行工具）已经转移到了一个单独的包webpack-cli中。
除了webpack自身外，请额外安装webpack-cli来使用CLI。
-> 使用npm安装：npm install webpack-cli -D
->使用yarn安装：yarn add webpack-cli -D
其实我们在执行步骤6中的打包命令时，就会提示安装webpack-cli，但是执行yes进行安装后还是会报错，因为旧版本的webpack中， webpack指令要能在命令行中使用，需要全局安装webpack，而不是本地安装，因此这里的webpack-cli也应该是同理。
解决办法就是全局安装一个webpack-cli
我们卸载本地安装的webpack-cli，全局安装webpack-cli：
npm uninstall webpack-cli
npm install -g webpack-cli
然后尝试再次打包，发现又会报错（此处的我已经崩溃，蓝瘦，香菇，不过生活还要继续，坚强！继续看这个错误是什么）。
WARNING in configurationThe 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this enviroment.ERROR in multi ./hello.js bundle.jsModule not found:ERROR:Can't resolve 'bundle.js' in 'C:/Users/你的用户名/Desktop/webpack-test'@ multi ./hello.js bundle.js
配置警告：
“mode”选项尚未设置。将“mode”选项设为“development”或“production”以启用此环境的默认设置。
multi错误 ./ hello.js bundle.js
未发现模块：错误：无法解析’C:/Users/你的用户名/Desktop/webpack-test’中的bundle.js
@ multi ./hello.js bundle.js
这里提示我们存在的第一个问题是没有配置webpack的mode选项，默认有production和development两种模式可以设置，因此我们尝试设为development模式，在命令行输入：
webpack --mode development
或者
webpack --mode production。
这样便能够实现将'./src/index.js'打包成'./dist/main.js'。
不过每次都要输入这个命令，非常麻烦，我们在package.json中scripts中加入两个成员：
"dev":"webpack --mode development",
"build":"webpack --mode production"
以后我们只需要在命令行执行npm run dev便相当于执行webpack --mode development，执行npm run build便相当于执行webpack --mode production。
我们在根目录执行：
npm run dev
然后就终于可以打包好了。这篇只是自己在打包的时候遇到的一些情况做的笔记，所以可能有一些问题，欢迎各路大神指教。
在进行打包的时候参考了三篇博客
https://blog.csdn.net/u012443286/article/details/79504289
https://segmentfault.com/a/1190000013699050
https://blog.csdn.net/u012631731/article/details/73716951/