最适合新人的-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中图片的处理,等等

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2018-12-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券