# webpack

**Repository Path**: mumu1319/webpack

## Basic Information

- **Project Name**: webpack
- **Description**: webpackage学习，打包代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-29
- **Last Updated**: 2022-04-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: webpack

## README

# webpackage

#### 介绍
webpackage学习，打包代码

- 文字版教程的测试代码:文件夹中的文件是按照文字教程来写的

- webpack文件是按照B站视频写的



#### 安装项目依赖

```
npm install
```



#### 注意事项

```
package.json中配置的脚本执行顺序
	1.优先寻找本地的node_modules/bin路径对应的命令
	2.没找到，才会去全局的环境变量中找

在webpack.config.js文件中进行配置
	1.就能在终端中直接写webpack命令进行打包(使用全局的webpack)
	2.不需要再写 webpack 入口文件 出口文件  命令
```



#### 命令解释

项目有些依赖只在开发中使用：在安装命令后面添加 **--save -dev**

解释：

1. --save：局部安装（只安装在当前项目中）
2. -dev：开发时依赖，打包代码时，不打包该依赖



#### 模块化导出引用方式

##### 	CommentJS	导出

```
//01-weback-起步--mathUtils.js
function add(num1, num2) {
    return num1 + num2
}

function mul(num1, num2) {
    return num1 * num2
}

// CommentJs导出规范
module.exports = {
    add,
    mul
};
```

##### 	ES6 导出

```
//01-weback-起步--info.js

// ES6导出规范
export const name = 'shy';
export const age = '18';
export const height = '1.88';
```

##### 	main.js导入

```
// 01使用commentJS的模块化规范
const {
    add,
    mul
} = require('./js/mathUtils');
console.log(add(99, 155));
console.log(mul(99, 155));

// 02使用ES6的模块化规范
import { name,age,height } from './js/info';
console.log(name,age,height);
```

#### 关于webpack的loader

```
style-loader 将模块的导出作为样式添加到 DOM 中
css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
less-loader 加载和转译 LESS 文件
sass-loader 加载和转译 SASS/SCSS 文件
postcss-loader 使用 PostCSS 加载和转译 CSS/SSS 文件
stylus-loader 加载和转译 Stylus 文件
```



#### 关于webpack配置vue

https://www.bilibili.com/video/BV15741177Eh?p=85

一步步将页面内容抽取出来变成单文件（vue文件），形成组件式开发