0、什么是webpack ?
简单来说就是一个工具。是一个前端开发人员用来打包、压缩、测试的工具。webpack是基于node的npm里面的。
npm是什么?
n 是node
p 是page 包
m 是manager管理器
npm 和webpack 是什么关系?
还记得吗,npm install 的时候,工程里多了这么个玩意 node_modules,里面有自己下载的依赖或其它的包。无数个npm包中的一个是就是一个 webpack。
webpack封装了node的方法,有时候你使用就一个字 “爽”。
1、webpack只认识js,如果有css、style那么需要下载 loader(转化器)转成js供webpack识别。此外,可以通过webpack命令下载,也可以在webpack.config.js配置上补上。
2、可以在终端上玩:例如输入 webpack -p
3、可能在终端上不怎么使用,那么实际开发中,我们通常是在webpack.config.js中配置的。
注:
entry 是入口,
output 是输出(编译过后输出的文件名,可以自己自定义)
devtool 是可以定义然开发者可以在浏览器查看webpack编译更新的后的文件。
devServer 是热更新,如果是当个需要每次都到终端运行 webpack-dev-server --port 2432 开启一个端口。还不如这样配置到配置文件里来的方面。
module 是模块,例如loaders是转化器,webpack是不认识css的需要配置loader,写正则匹配/.css/$$ ,匹配.css 文件,‘$’ 是表示结束。(排版只有一个美元符哈)
还记得 npm run dev 这个每次都跑起项目的终端相信你们都非常熟悉了吧。我们也可以配置的。
注:
我们可以在 scripts里,修改dev 和对应的key值 webpack-dev-server ,就可以轻松的实现, npm run dev 的操作了。其实就是使用webpack跑起一个项目服务而已。