01-Webpack简介

Webpack简介

Webpack是一个基于nodejs的模块打包工具

安装Webpack

首先使用npm init构建一个node项目，再使用npm install webpack webpack-cli -D本地安装webpack和webpack命令行工具

使用Webpack

• 使用npx webpack index.js即可对index.js文件进行打包
• 直接运行npx webpack会找到当前目录下找webpack.config.js配置文件的配置进行打包
• 若不想使用默认配置文件的名字，则可使用webpack --config config.js指定配置文件名为config.js
• 使用webpack --env.xxx可像webpack配置中传递环境变量，在webpage配置文件中获取到该变量（若不指定变量的值则该变量默认为true）

Webpack概念

• entry：入口文件，webpack会按照入口文件构建一张依赖图，遍历完所有依赖文件进行打包

• output：输出指示，webpack打包后的资源输出位置，以及命名

• loader：webpack能够处理非js文件的加载器工具，默认情况下webpack只能处理js文件和json文件

  • 对于json文件，CommandJS规范需要使用require.ensure() 或require.cache()方法引入，这些方法有的是webpack独有的，有的是兼容性较差的，而且还会报警告
  • 官方推荐ES6模块化规范

• plugins：webpack的插件，用于执行除啦打包以外的工作，即在webpack运行到某个时刻时，做的一些事情

• mode：指定环境，开发环境（development）或生产环境（production）