webpack是什么？它有何作用
webback是一个第三方的包，来识别压缩和翻译代码，打包或者管理项目，提高打开网站的速度
npm i yarn -g 安装全局yarn 利用yarn更快
1).安装和使用webpack 安装 yarn add webpack webpack-cli -D 使用 初始化包环境，得到package.json文件，在package.json自定义命令，为打包做准备（使用scripts）
2).webpack设置入口，出口
默认入口：src/index.js
默认出口：dist/main.js
在webpack中修改默认的入口，出口
-
新建webpack.config.js（webpack默认配置文件名）
-
通过entry设置入口文件路径
-
通过output对象设置出口路径和文件名
3).webpack打包流程大致做了什么？
执行webpack命令，找到配置文件，入口和依赖的关系，打包的代码会出现在指定的位置
4).webpack打包js文件
前提：package.json文件初始化成功，webpack安装成功，且快捷命令写入成功，webpack.config.js文件创建成功
1.同级新建新建 - src/main.js，main.js中写入要执行的代码
2.设置js的入口文件，在webpack.config.js中设置entry导出的主入口，output导出的路径和导出的文件名称
5).webpack插件_自动生成html文件
前提：package.json文件初始化成功 webpack安装成功，且快捷命令写入成功，webpack.config.js文件创建成功，已经默认入口和导出路径
1.下载插件
yarn add html-webpack-plugin -D
2.webpack.config.js配置
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html' // 以此为基准生成打包后html文件
})
]
3.webpack打包
5).webpack打包css文件
前提：package.json文件初始化成功，webpack安装成功，且快捷命令写入成功，webpack.config.js文件创建成功，已经默认入口和导出路径
1.新建 - src/css/index.css，并写入样式代码
2.在入口中用import涌入样式文件
3.安装依赖(webpack只默认打包js文件)
yarn add style-loader css-loader -D
4.在webpack.config.js中配置 (看官方文档)
module: {
rules: [ // loader的规则
{
test: /\.css$/, // 匹配所有的css文件
// use数组里从右向左运行
// 先用 css-loader 让webpack能够识别 css 文件的内容并打包
// 再用 style-loader 将样式, 把css插入到dom中
use: [ "style-loader", "css-loader"]
}
]
}
5.webpack打包
6).webpack打包less文件
前提：package.json文件初始化成功，webpack安装成功，且快捷命令写入成功，webpack.config.js文件创建成功， 已经默认入口和导出路径
1.新建src/less/index.less，并写入样式代码
2.在入口中用import涌入样式文件
3.安装依赖
yarn add less less-loader -D
4.在webpack.config.js中配置 (看官方文档)
{
test: /\.less$/,
// 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
use: [ "style-loader", "css-loader", 'less-loader']
}
5.webpack打包
