webpack的理解和基本使用

理解webpack

1. 是nodejs的一个第三方包

2. 主要功能是构建前端开发环境
   a. 根据commonjs规范打包模块（让浏览器端运行的js代码支持commonjs规范，把commonjs规范的代码转换成浏览器端可以已 识别的代码）
   b. 提供了loader能力可以把非js资源转换成js模块
   c. 在打包过程中提供了自定义插件的接口，理论上可以随意的在打包过程中添加功能

3. 用webpack实现了前端工程化，几乎解决了前端开发中的所有问题，它认为万物皆可模块，可以把所有的资源 dom css 转换成js 并组织到一起通过浏览器执行。

webpack的基本使用

1. 安装 webpack和webpack-cli

npm i webpack webpack-cli -D

webpack安装在开发环境即可，打包完webpack这些东西都不用了

2.在根目录创建webpack.config.js，并编写相应的配置

const path = require('path')
module.exports = {
	//运行环境 开发环境（或者生产环境）
    mode: 'development',
    //入口文件的设置
    entry: path.join(__dirname, './src/index.js'),
    //出口文件的设置
    output: {
        filename: 'main.js',
        path: path.join(__dirname, './dist')
    },
    //
}

3.webpack.config.js被认为是一个模块，需要导出相关要求的配置

4.相关配置遵守官方文档

5.执行打包

npx webpack

打包完会根据webpack.config.js中的出口文件配置自动是生成出口文件，如下：