webpack入门篇

1、webpack是什么?

• webpack是一个模块化构建打包工具
• vue,react用的脚手架底层都是基于webpack搭建的
• webpack在公司中主要用于公司内部搭建前端环境
• 掌握node,webpack可以说是晋升架构师升的重要一环！
• 如果你会了webpack,你在vue脚手架中也可以轻松的配置
• 构建工具除了webpack之处，还有grunt,gulp,rollup…

2.webpack使用

webpack中文文档：https://webpack.docschina.org/concepts/

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文件，对其他格式文件不支持，如果想要支持其他类型的文件，必须通过loader去转换这些文件，从而让webpack支持

经典的loader没有的错误：
You may need an appropriate loader to handle this file type, currently no loaders are