webpack

公司去年使用了react，做项目，需要用到webpack打包构建工具，后面自己自学了webpack，遇到了很多坑，在这里总结一下。

首先，webpack需要一个自定义的webpack.config.js的配置文件，里面会告诉webpack干些什么事情，需要我们指定入口文件和输出文件，以及依赖的模块有哪些等。明白这个以后，我们从头开始吧。

命令集合：

1：npm init -y(这会生成一个packjson包，这个包的作用我个人觉得可以清楚的显示出来，你目前安装了那些依赖包以及他们的版本，ps：如果你能清楚的记得自己需要的有那些第三方的插件，你可以在packjson文件里写上，然后在控制台写上npm install,就可以全部安装上了.......)

2：npm install webpack webpack-cli  webpack-dev-server html-webpack-plugin -D (这一步能全局安装webpack以及webpack需要的插件，之前自己试过只运行了npm install webpack -d的时候，webpack4升级以后会自动提示你还需要安装webpack-cli，原因是什么呢?因为webpack4，已经将webpack命令行相关的内容的内容迁移到了webpack-cli上)

3:配置webpack.config.js文件，最简单的配置就是指定入口文件（默认的是根目录下面的index.js），输出文件，有路径path和filename两项，一般情况下打包编译成功后，是在根目录下生成一个dist文件，里面包含一个css文件和js文件以及图片相关的image文件，其他配置项可自己查询webpack配置的详情介绍。

4：需要在package.json文件里，script对象里面指定是什么环境，是生产环境还是上线环境，例如，配置为dev："webpack-dev-server",你在终端运行npm run dev，这个时候，你的代码不会压缩，而是会帮你打包好并且帮你运行一个开发服务器，而npm run build就是把代码压缩了以及做了图片转码的工作。

坑：刚开始在公司安装webpack的时候，明明安装成功了，可是运行相关的webpack命令就是提示不是内部命令，输入webpack -v也是如此，后来才知道，要配置自己的电脑环境变量，首先找到node的存放路径，在终端输入path，即可显示路径，粘贴，出来设置一下npm的路径，让和node统一，输入npm config sex presfix +路径。然后右键我的电脑 - 属性 - 高级系统设置 - 高级 - 环境设置，把node的路径放进去即可。