# webpack-demo

**Repository Path**: liu_qiao_xue/webpack-demo

## Basic Information

- **Project Name**: webpack-demo
- **Description**: webpack基本配置与使用
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-26
- **Last Updated**: 2021-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 配置一个基础的 Webpack

将支持以下功能：

- 分离开发环境、生产环境配置；
- 模块化开发；
- sourceMap 定位警告和错误；
- 动态生成引入 bundle.js 的 HTML5 文件；
- 实时编译；
- 封装编译、打包命令

`npm install webpack webpack-cli --save-dev`

## 新建配置文件

- development(开发环境) 和 production(生产环境),为每个环境编写彼此独立的 webpack 配置。
- 使用 webpack-marge 合并通用配置和特定环境配置
- `npm i webpack-merge -D`

### 入口（entry）

- 以 src/index.js 为起点，查找所有依赖的模块

## 输出（output）

- 生产环境的 output 需要通过 contenthash 值来区分版本和变动，可达到清缓存的效果

### 新增 paths.js，封装路径方法

### 模式（mode）

- 通过 mode 配置选项，告知 webpack 使用相应模式的内置优化

### Source Map(devtool)

- 追踪 error 和 warning，source maps可以将编译后的代码映射回原始源代码

### 打包编译命令

- `npx webpack --config config/webpack.prod.js` 打包编译
- 注意：config下不能用import引入外部模块，要使用require，否则会报错`SyntaxError: Cannot use import statement outside a module`

### HtmlWebpackPlugin

- 引入 HtmlWebpackPlugin 插件，生成一个 HTML5 文件,用来动态引入打包生成的 bundle 文件
- `npm install --save-dev html-webpack-plugin`
- 重新 webpack 编译 `npx webpack --config config/webpack.prod.js`生成html文件并自动引入打包后的bundle文件

### DevServer

- webpack-dev-server 提供了一个基本的 web server，并且具有实时重新加载功能, 默认配置 conpress: true，为每个静态文件开启 gzip compression
- `npm install --save-dev webpack-dev-server`
- 通过 `npx webpack serve --open --config config/webpack.dev.js``npx webpack serve --config config/webpack.dev.js` 实时编译

### 执行命令cross-env

- 通过 cross-env 配置环境变量，区分开发环境和生产环境
- `npm install --save-dev cross-env`
- 修改 package.json中的scripts
- npm run dev：本地构建
- npm run build：生产打包

## 用 Webpack 搭建一个 SASS + TS + React 的项目

### 支持以下功能

1. 加载图片
2. 加载字体
3. 加载 CSS
4. 使用 SASS
5. 使用 PostCSS，引入 css-modules 解决全局命名冲突问题
6. 使用 React
7. 使用 TypeScript

### 加载图片（Image）

- 内置的 Asset Modules，处理images 图像

### 加载字体（font）

- 使用内置的Asset Modules 接收字体文件

### 加载 CSS

- style-loader 用于将 CSS 插入到 DOM 中,<style></style>
- css-loader 对 @import 和 url() 进行处理
- `npm install --save-dev style-loader css-loader`

### 使用 SASS

- sass-loader加载 Sass/SCSS 文件并将他们编译为 CSS
- `npm install --save-dev sass-loader sass`

### 使用 PostCSS

- postcss-loader
- 添加前缀
- css-modules 解决全局命名冲突
- `npm install --save-dev postcss-loader postcss postcss-preset-env`

### 使用 include 字段，仅将 loader 应用在实际需要将其转换的模块

## 使用 React + TypeScript

- 手动搭建 React 对应的配置项
- `npm i react react-dom @types/react @types/react-dom -D`
- `npm i -D typescript esbuild-loader`
- 新增 typescript 配置文件 tsconfig.json
- 如果想在 TypeScript 中保留如import _ from 'lodash';的语法被让它作为一种默认的导入方式，需要在文件 tsconfig.json 中设置 "allowSyntheticDefaultImports" : true 和 "esModuleInterop" : true 

## 新建release_v1分支完成react+typescript

- `git checkout -b release_b1`
- `git push --set-upstream origin release_v1`
- 创建react页面和加载一些资源

### sass-loader版本太高不生效

- `npm uninstall sass-loader `