来来，我们不要鸡汤，只要干货，其实撸了几天ng发现，真的越发佩服尤大大，你说Angluar指令好，他说React组件化方便，好了，不争了，我造个vue出来。说下为啥最近转撸ng，而且还是1.x的，说白了，为了工作，为了生活，为了美好的明天~618快到了, 想剁手组机子，赶紧来个人阻止我，不然就吃土了~

        好了，开始撸，webpack更新真特么的快啊，都4.12了，虽然我3.x都没玩6啊，这。。。T T, 照这速度，过两个月webpack5就出现了。

        之前可能我们都是用vue-cli啊，react-create-app这些脚手架，然后自动拉了一整个工程下来，感觉好牛逼啊，配置也是很复杂，看不懂。今天我们来自己从零开始搭一个基于webpack4的开发环境，脚手架目前默认好像还是3.6的老版本。

工程目录

最精简的目录结构，发现gulp乱入了，无视之。滑稽表情~首先，npm init -y先变一个package.json出来，然后开始撸，好了，安装主角，webpack，npm  i  webpack -D，-D是--save-dev缩写，少打好多字母啊，大家以后可以这么撸，程序员都是懒癌晚期没办法的~

然后就是，新建一个webpack.config.js。直接上图

基本配置

首先，引入node的path模块，接着modules.exports暴露一个对象，这里说下webpack的作用，可能有些同学还不是很明白，一说webpack都是压缩合并啊，都没有错，但是最重要的就是模块化，然后原本在node里才能用的CommonJS规范在前端也能用了。好了，不扯远了，接下来开始配置项，首先入口文件，entry:好了这里就用到之前的path了,__dirname是node自带变量就是当前文件的路径，比如我们这里就是angular/下，下面就是自己制定的位置了，比如这里我们在src下script下新建一个app.js。

app.js

其他的先不看，只看app.js就行。

然后配置输出output,这里有两个选项，一个filename，就是输出文件名，我这里是[name]就是你原本啥样就是原样输出，当然你也可以自己写死，比如写个tqq.js，或者加个[hash]这个主要针对缓存巴拉巴拉的，先不管这么多，第二个和entry一样，也是配一个path，我们就指定dist吧。

mode

接下来就是mode，webpack4的特有选项，指定模式，有两个值，development和production分别对应开发和生产环境，生产环境会自动帮你压缩代码和其他的一些优化，这些在3.x以前的版本都是要我们手动配置的，比如压缩js的插件uglifyJS，在4以上的版本，webpack自动帮我们做了，我们这里是选择开发环境。

loaders

接下来，最重要的loaders,这就是webpack的核心，加载你的各种文件然后打包，这里配置的就是针对不同文件分别对于用什么loader去加载，至于loader底层的工作原理这个就比较高深了，哈哈~

举个🌰，最常见的js，我们如果写了es6代码，有些浏览器还是不识别的，为了兼容性，我们用babel用编译成es5或es3的代码，这样就确保万无一失了。这里test是个正则，匹配所有以.js结尾的文件，然后，loader设置成babel-loader,最后一步，node_modules这个无底洞实在太可怕了，赶紧把它扔掉。exclude干掉他！说了这么多，你肯定在想卧槽，babel-loader这么牛逼，他在哪。还没有装~哈哈，npm i babel-loader -D记住这玩意我们只在开发环境需要。装好之后其他的css和url-loader我就不细说了，还有一个关键点就是chunks,webpack是简化了太多太多，直接上图吧~就这样

chunks

webpack4会自动把公共代码和第三方依赖代码给你拆分打包成vendor和runtime了，非常良心了。

好了，切到app.js，我们输入一个let a = 2018，撸下es6.

然后打开命令行，webpack发现command not found,没错，因为我们没有全局安装~尴尬，这里你可以重新全局装一下，npm i webpack -g或者就是我要说的，打开package.json.看这里。。

script

看script，这里简单理解就是我们是懒癌晚期，打不了这么多字母了，没救了。比如我们配一个build命令，后面写上webpack --mode production这里--mode我们制定他们的模式为生产环境，就会打包输出到dist目录下面。不信你可以试一下npm run xxx，xxx就是我们前面配置的命令，build，那我们就打npm run xxx，或者你更懒，可以换成start命令，run都可以不用打了。

打包

等几秒就打包完成了，看下目录下多了个dist，进去看下

dist

点开再看下，都是压缩过了，哇，牛逼

main.js

好了，就这样吧，最最最最最简单的webpack4搭建。下回讲解webpack-dev-server的使用~