1.webpack是什么
- webpack是一个模块化构建打包工具
- vue,react用的脚手架底层都是基于webpack搭建的
- webpack在公司中主要用于公司内部搭建前端环境
- 掌握node,webpack可以说是晋升架构师升的重要一环!
- 如果你会了webpack,你在vue脚手架中也可以轻松的配置
- 构建工具除了webpack之处,还有grunt,gulp,rollup…
2.webpack使用
webpack中文文档:https://webpack.docschina.org/concepts/
学习目标:用webpack,node,vue手动搭建一个前端环境
2.1 创建package.json
npm init -y
2.2 安装webpack,webpack-cli
npm install webpack webpack-cli -D
2.3 写点测试代码测试
webpack对原生JS和json文件默认支持
webpack支持的模块规范:CommonJS(require,module.exports),ES6(export ,import),AMD(require.js)
2.4运行 npm scripts脚本
{
....
"scripts": {
"build": "webpack --watch"
},
.....
}
2.5 loader
loader:webpack资源加载器,因为webpack只支持js,json文件,对其他格式文件不支持,如果想要支持其他类型的文件,必须通过