# webpack

**Repository Path**: wangyuandong/webpack

## Basic Information

- **Project Name**: webpack
- **Description**: 学习webpack的基础知识
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-04-05
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack
### [webpack官方文档](https://www.webpackjs.com/)

#### 介绍
本项目主要是对webpack4.0的详细学习。
#### 安装
* yarn init -y 
* yarn add webpack webpack-cli -D  
#### 手动配置 webpack
- 默认的配置文件名为 webpack.config.js
#### 安装本地服务器
* yarn add webpack-dev-server -D
#### 自动建立html打包到内存中
* yarn add html-webpack-plugin -D
#### webpack打包css模块
* yarn add style-loader css-loader -D
这种方式是通过style标签的方式，放入html中
#### 抽离css插件
* yarn add mini-css-extract-plugin -D
这是将css样式抽离出来，通过link的方式引入
#### 为css自动加前缀
* yarn add  postcss-loader autoprefixer
#### 压缩css和js
* yarn add optimize-css-assets-webpack-plugin -D
* yarn add uglifyjs-webpack-plugin -D
#### es6->es5
* yarn add babel-loader @babel/core @babel/preset-env -D
@babel/preset-env 是一个转化插件库 
#### es6+ -> es5 
//calss
* yarn add @babel/plugin-proposal-class-properties -D
//装饰器
* yarn add @babel/plugin-proposal-decorators -D
### 全局变量引入
jquery 引入
yarn add jquary -S