【Webpack基础】Webpack的定义、配置文件_python

1 Webpack的定义
- 1.1 定义
- 1.2 模块
- 1.3 支持的模块类型
2 配置文件
- 2.1 基础
- 2.2 基本配置
- - 2.2.1 入口文件
  - 2.2.2 目录名字
  - 2.2.3 配置文件起别名
- 2.3 build命令执行webpack
3 目录整理

1 Webpack的定义 1.1 定义

Webpack 只知道模块相关的事情（模块导入和导出）

webpack 是一个模块打包的工具

常见的模块化规范有ES Module、CommonJS、AMD、CMD，而 Webpack 可以对这些模块化规范进行打包

官网解释：

1.2 模块

JS文件就是一个模块

而webpack可以把多个模块打包在一起，然后生成一个文件（dist/main.js），然后这个文件可以在浏览器上直接运行

1.3 支持的模块类型

支持的模块类型：js、css、vue、png、jpg

Webpack默认配置的模块类型就是JS，要想支持其他的模块需要做额外的配置

const style = require('./index.css');
import App from './App.vue';

2 配置文件 2.1 基础

npx webpack

直接这样写会报错，因为找不到入口文件，必须要在后面加上入口文件

npx webpack index.js

这种打包方式功能比较单一，想要复杂的功能就需要配置文件进行配置

2.2 基本配置 2.2.1 入口文件

创建一个配置文件，命名为：webpack.config.js

在文件里写入如下代码：

// ebpack底层是用node写的，所有这里导出是用的commonJS规范
// 在导出对象里面可以设置一些配置
module.exports = {
	// 设置入口文件
	entry: './index.js'
}

现在在命令行直接敲 npx webpack 就可以翻译文件了

2.2.2 目录名字

// 导入node的path模块
const path = require('path');

module.exports = {
	// 设置入口文件
	entry: './index.js',
	output: {
		// 生成文件名
		filename: 'bundle.js',
		// 所在目录名       根目录路径  目录名
		path: path.resolve(__dirname, 'dist') 
	}
}

2.2.3 配置文件起别名

如果配置文件名不是webpack.config.js，就需要在命令行进行配置，否则就会报错

npx webpack --config ./webpack.dev.config.js

2.3 build命令执行webpack

在写vue或react项目的时候，很少看到使用npx这样的命令，而build命令使用的较多

在package.json里面配置一下build命令：

{
  "name": "test_code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    // "test": "echo \"Error: no test specified\" && exit 1"
    "build": "webpack"  // 配置可执行文件
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  }
}