01webpack介绍、基础配置

webpack介绍、基础配置

webpack介绍

Webpack是一种前端资源构建工具，一个静态模块打包器（module bundler）

• webpack可以做的事情
  代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布

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
ode.exe" (
  "%~dp0
ode.exe"  "%~dp0..webpackinwebpack.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node  "%~dp0..webpackinwebpack.js" %*
)

手动配置webpack

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

Webpack 五个核心概念

1. Entry：入口
2. Output：输出
3. Loader：让Webpack能够去处理那些非JavaScript文件
4. Plugins：插件
5. Mode：Webpack使用相应模式的配置

webpack.config.js

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

//console.log(path.resolve('dist'));
module.exports = {
	// node配置
    mode: 'development',//模式，默认有两种production / development
	// entry 入口配置
    entry: './src/index.js',//入口
	// output 输出配置
    output: {
        filename: 'bundle.js',//打包后的文件名
		// __dirname nodejs的变量，代表当前文件的目录绝对路径
        path: path.resolve(__dirname,'dist')//路径必须是一个绝对路径
    },
    module: {
	rules: [
		// 详细loader配置
	]
    },
    // plugins 插件配置
    pugins:[
      // 详细plugins的配置
    ]
}