Yarn 和 webpack 的介绍 与安装（mac和windows一样）

 一. Yarn介绍

  先安装node.js

 

二. webpack安装

 

webpack的配置过程：命令号窗口

1. 进入项目目录：（admin-v2-fe）

   项目初始化 ： yarn init

会出现如下两个文件：

2. 安装webpack

安装完成界面：

3.打开webpack官方文档

https://www.webpackjs.com/concepts/

• 项目目录新建文件：webpack.config.js  

复制官方文档下面的代码：

• 新建文件夹：src

1.    src下创建 app.js文件
2. 切回webpack.config.js文件： 修改内容

    3.  src下app.js

4.  打开命令行，查看webpack打包成什么样

•    window下： 命令为反斜杠  ‘  \ ’  ------------------------node_modules\.bin\webpack
• 结果如下：

三、html-webpack配置

1. 基础配置

• 增加配置信息，在 webpack.config.js ：

• 命令行安装html-webpack

• 命令行执行，结果会生成html文件

windows下：反斜杠

生成html文件内容为：

2. 配置自己的html模板

打开下面的链接

结果： 可根据参数配置自己的html

例如：增加下面一行，命令行窗口运行命令 

  

再次打开，html文件就和模板一样了

 

四、处理脚本

1. 配置

 

可修改部分信息

2. 安装

3. 查看配置信息

4. 

 

5. 再次运行看看

五、react的处理

1. 安装

2. 配置

3. react 安装

修改后缀名为 jsx

重新打包：

六、CSS的配置

1. 安装

2. 配置

3. 新建index.css,并添加内容

4. app.jsx中引入css文件

5. 命令行再次打包

七、extract textwebpackplugin

 

1. 安装

2. 配置

3. 命令行 再次打包运行

4. 结果

八、sass

1. 安装

2. 配置

3. 在scss文件添加内容，并运行

九、url-loader

1. 配置

2. 安装

3. 运行

4. 结果

    

十、字体库

1. 安装

2. 配置