最适合新人的-webpack配置实例（1）

这一段时间咱们主要搞一个前端开发的环境的配置，

因为许多同学有这方面的需求。

然后一节课未必讲得完，所以会分成二三次来讲。

webpack这东西配置项比较多，讲起来比较琐碎，整个视频大概一个多小时，放在微信公众号上来发的话，基本上不太可能有人会看得完。

所以就剪辑之后发上来约前十分钟，所以想要下载高清完整视频的同学们，就请付出一点小小的劳动，

（1）、请加我为好友，并把我拉入“你所在的前端微信群”；

（2）、把这篇文章转发到“你拉我进入的那个前端微信群”里，让我看到，五分钟后我会发你下载的网盘链接。

* 注意顺序不要搞错了，一定要先执行第一步，再进行第二步 *

<!-- -->

1、我在本地电脑 的d盘，新建一个目录，test_app，

做为开发的目录。

2、要全局的安装 webpack，

<!--

因为我的电脑已经全局的安装过了webpack，

所以就不再演示webpack全局安装的过程。

-->

全局安装 webpack，npm install webpack -g

在test_app目录中，局部的安装webpack，

npm install webpack --save-dev

咱们现在用的是 webpack 4.x

<!-- 我之前 已经使用 cnpm的源，所以速度会相对快一些。 -->

3、在test_app中，新建三个目录，

- config

- dist

- src

4、初始化

npm init -y，

-y的意思就是package.json里都按默认来设置

5、开始压缩一下试试看效果

。。。。

<!-- -->

webpack 4.x 它的默认的入口是src里面的index.js，

可以先运行webpack来打包。

webpack有二种打包环境，

- 开发环境，development

- 生产环境，production

在打包的时候，输入 webpack --model=development或production，

就没有警告了。

<!-- -->

它们的关系是这样，

webpack.dev.js，主要管一些压缩、打包、入口、服务、输出文件方面的事情；

package.json，主要负责一些依赖项、命令的定义之类的。

就是webpack跟业务有关；

package.json，它跟开发环境的配置有关。

<!-- -->

<!--

如果src里面的index.js，已经被删除，

你要去配置package.json，

"scripts":{

"build" : "webpack --config=config/webpack.dev.js"

}

运行，npm run build

-->

多入口的配置，就是多个入口文件呗，

出口就是，[name].js，

<!-- -->

webpack，它也可以提供服务，提供一个server，

需要全局安装，webpack-dev-server，

npm install webpack-dev-server -g，

<!-- 我之前已经安装过了 -->

<!-- -->

webpack-dev-server，

需要在package.json里做一下配置，

"scripts": {

"server" : "webpack-dev-server --config=config/webpack.dev.js"

}

运行 npm run server

<!-- css打包 -->

- style-loader

- css-loader

本地安装：

npm install style-loader css-loader --save-dev

<!-- JS压缩下次再讲，因为它的npm包好像变了，我试了半天没成功 -->

<!-- 打包Html文件 -->

其实就是自动的生成dist目录中的html文件，

并引入js文件。

其实就是自动化的打包呗

把之前的dist目录中的index.html，

放到src目录中，

做为生成html的模板。

并将其中的引入 的js都删除，webpack会自动生成。

需要安装插件，html-webpack-plugin，

npm install html-webpack-plugin --save-dev

它也需要配置 ，在webpack.dev.js中，

它的输出目录，就是output

<!-- -->

今天的内容就么多，

下次，咱们继续搞，

什么js的压缩啊，css中图片的处理，等等