这一段时间咱们主要搞一个前端开发的环境的配置,
因为许多同学有这方面的需求。
然后一节课未必讲得完,所以会分成二三次来讲。
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中图片的处理,等等