01webpack介绍、基础配置

webpack介绍、基础配置

webpack介绍

• webpack可以做的事情
  代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布
• 需要提前掌握的内容
  1、需要node基础，以及npm的使用
  2、掌握es6语法
• 最终掌握的webpack哪些内容？
  1、webpack常见配置
  2、webpack高级配置
  3、webpack优化策略
  4、ast抽象语法树
  5、webpack中的Tapable
  6、掌握webpack流程，手写webpack
  7、手写webpack中常见的loader
  8、手写webpack中常见的plugin

webpack安装

• 安装本地的webpack
• webpack webpack-cli -D（-D是指开发依赖，表示上线不需要这个包）

例如：这里用的是yarn管理工具

1. 初始化：yarn init -y
2. 安装webpack-cli：yarn add webpack webpack-cli -D

webpack可以进行0配置

• 打包工具 -> 输出后的结果（js模块）
• 打包（支持我们的js的模块化）
• 打包命令：npx webpack（webpack5.0以上支持）
  执行原理：这样执行会去找node_modules下的bin文件夹，bin中有webpack.cmd文件，然后就执行webpack/webpack.js文件，然后需要安装webpack-cli
  webpack.cmd

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\..\webpack\bin\webpack.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node  "%~dp0\..\webpack\bin\webpack.js" %*
)

手动配置webpack

• 默认配置文件的名字 webpack.config.js
• 为什么叫webpack.config.js这个名字？
  因为node_moudes下的webpack下会默认调用webpack-cli，webpack-cli里面有解析module.exports对象中的参数，在config-yargs.js里，这里面有解析的关系和说明，你可以搜索关键字webpack.config.js来查找。

webpack.config.js

//webpack 是node写出来的，用node的写法
let path = require('path');

//console.log(path.resolve('dist'));
module.exports = {
    mode: 'development',//模式，默认有两种production / development
    entry: './src/index.js',//入口
    output: {
        filename: 'bundle.js',//打包后的文件名
        path: path.resolve(__dirname,'dist')//路径必须是一个绝对路径
    }
}