vue基础

- webpack

• webpack基本概念

• webpack概述webpack是一个静态模块打包器

• webpack能做什么

• 语法转换

				less/scss ==== css
				高版本语法 ===> 低版本语法
			        2. 打包  代码压缩 合并
			        3. 监听代码的变化，自动打包和刷新
			        4.提取单vue文件里html/css/js

• webpack的基本使用
• yarn init -y初始化项目，生成package.json文件
• 安装webpack包
• 配置打包命令

			"scripts": {"build": "webpack"}

• 新建默认配置文件

			webpack.config.js

• 运行打包命令

                         yarn build
			npm run build

• webpack的配置
• 入口

			entry: './src/main.js'

• 出口

                 output: { filename: 'bundle.js', path: path.join(__dirname, 'dist')  }

	插件
	

                         html-webpack-plugin插件：自动生成html文件
			1. 安装
				yarn add html-webpack-plugin -D
			2. 引入插件
				const HtmlWebpackPlugin = require('html-webpack-plugin')
			3. 配置插件
				plugins: [new HtmlWebpackPlugin({template:                                       './public/index.html'})]
		loader
			webpack默认只能处理js文件，无法处理其他类型的文件
			css-loader处理css
				yarn add css-loader style-loader -D
				module: {  rules: [  {  test: /\.css$/, use: ['style-loader',                      'css-loader'] } ] }
			less-loader处理less
				yarn add less-loader less -D
				{  test: /\.less$/, use: ['style-loader', 'css-loader', 'less-                         loader'] } 
			webpack5_asset module(无需额外包)webpack内置
				{
                     test: /\.(png|jpg|gif|jpeg)$/,
                         type: 'asset'
                             }
			webpack4_url-loader处理图片
				yarn add url-loader file-loader -D
				{
                         test: /\.(png|jpg|gif|jpeg)$/,
                           use: {
                                 loader: 'url-loader',
                             options: { limit: 8 * 1024 }
                               }
                                }
			webpack4_url-loader处理字体图标
				和图片的url-loader是一样的
			babel处理高版本的语法
				安装依赖包
				配置具体规则
				[https://webpack.js.org/loaders/babel-loader/](url)
	        webpack开发服务器
		webpack-dev-server
			启动开发服务器，自动重新打包和刷新浏览器
			安装依赖包
				yarn add webpack-dev-server -D
			配置脚本
				"serve": "webpack server"
			运行脚本
				yarn serve
					开发时启动服务器
				yarn build
					项目打包使用
			额外的配置
				/* 覆盖webpack的配置 */
                                  module.exports = {
                                    devServer: {
                                      open: true,
                                      port: 3000
                                    }
                                  }