webpack-demo

webpack基本使用

第一步：

1.初始化项目
	npm init
   
2.安装依赖包(-D 开发环境 -S 生产环境)
	npm install webpack webpack-cli -D
	
3.创建webpack.config.js配置文件
	"build": "webpack --config webpack.config.js"
	
	配置webpack配置
	
	运行webpack配置，进行打包
	
	npm run build
	
4.配置entry入口文件，output出口文件以及mode打包后的文件格式

5.配置自动html文件的插件
	npm install html-webpack-plugin -D
	
	//引入自动生成html的插件
	const HtmlWebpackPlugin=require('html-webpack-plugin');
	
	new HtmlWebpackPlugin({template:'./public/index.html'})
	
5.2自动删除打包编译后的旧dist文件
	npm install clean-webpack-plugin -D
	
	//引入自动清楚dist的插件
	const {CleanWebpackPlugin}=require('clean-webpack-plugin');
	
	//自动清除dist的插件
	new CleanWebpackPlugin(),
	
	等价于webpack5
	output: {
	    clean: true,
	},
	
	
6.由于webpack只能处理js，json文件，所以需要引入第三方包，打包处理其他文件；webpack
	处理css文件,
	npm install style-loader css-loader -D
	
7.处理less文件,把less文件编译成css文件
	npm install less less-loader -D
	
8.处理scss文件，把scss文件编译成css文件
	npm install sass sass-loader -D
	
9.分离css文件
	npm install mini-css-extract-plugin -D
	
	引入分离 css 文件的模块
	const MiniCssExtractPlugin = require("mini-css-extract-plugin");
	
	//分离css的插件，定义打包好的文件的存放路径和文件名称
	new MiniCssExtractPlugin({filename: './css/bundle.[name].css'})
	
10.处理图片， url-loader 中部分功能要用到file-loader
	npm install url-loader file-loader -D
	
	webpack5 之前我们处理静态资源比如。图片字体之类的资源的时候等，需要用到url-loader，file-loader，raw-loader，
	webpack5则放弃了这三个loader，这三个loader在github上也停止了更新。
	
	webpack5使用四种新增的资源模块（Asset Modules）替代了这些loader的功能。
	
	asset/resource 将资源分割为单独的文件，并导出url，就是之前的 file-loader的功能.
	asset/inline 将资源导出为dataURL（url(data:)）的形式，之前的 url-loader的功能.
	asset/source 将资源导出为源码（source code）. 之前的 raw-loader 功能.
	asset 自动选择导出为单独文件或者 dataURL形式（默认为8KB）. 之前有url-loader设置asset size limit 限制实现
	
11.配置对于高版本js的兼容性处理
	npm install -D babel-loader @babel/core @babel/preset-env
	
12.webpack-dev-server自动刷新
	npm install webpack-dev-server -D
	
13.使用webpack-merge工具对拆分后的webpack.config.js文件进行合并
	npm install webpack-merge -D
	
	拆分webpack.config.js
	--config 存放配置文件的文件夹
	webpack.base.js 公共配置
	webpack.dev.js  开发环境配置
	webpack.pro.js  生产环境配置

第二步：引入一些第三方包

1.引入jquery包
	npm install jquery -S
	
	使用jquery
	const $=require('jquery')

webpack.config.js

// 配置webpack的配置文件，需要将配置的对象导出，给webpack使用
const path=require('path');
//引入自动生成html的插件
const HtmlWebpackPlugin=require('html-webpack-plugin');
//引入自动清楚dist的插件
const {CleanWebpackPlugin}=require('clean-webpack-plugin');
//引入分离 css 文件的模块
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports={
	//1.入口entry,从那个文件开始打包
	entry:"./src/main.js",
	//2.出口output，打包到哪里去
	output:{
		//打包输出的目录
		path:path.resolve(__dirname,'dist'),
		//打包后生成的文件名
		filename:'js/bundle.[name].js',
	},
	//3.模式mode development 未压缩 production 已压缩
	mode:'development',
	//4.配置module模块加载规则
	module:{
		rules:[
			{
				//正则表达式，匹配所有以.css结尾的文件
				test:/\.css$/,
				//实际处理顺序：从右向左
				//css-loader 让webpack能够识别解析 css 文件
				//style-loader 通过动态的创建style标签的方式(通过js方式)，让解析后的css内容，能够作用到页面中
				//MiniCssExtractPlugin.loader 让css样式代码分离开，通过link引入css文件，作用到页面中
				use:[{
					loader: MiniCssExtractPlugin.loader,
					options: {
						publicPath: "../",
					},
				},'css-loader'],
			},
			{
				//正则表达式，匹配所有以.less结尾的文件
				test:/\.less$/,
				use: [{
					loader: MiniCssExtractPlugin.loader,
					options: {
						publicPath: "../",
					},
				}, 'css-loader', 'less-loader'],
			},
			{
				//正则表达式，匹配所有以.scss结尾的文件
				test:/\.scss$/,
				use:[{
					loader: MiniCssExtractPlugin.loader,
					options: {
						publicPath: "../",
					},
				},'css-loader','sass-loader']
			},
			{
				//正则表达式，匹配所有以.jpg|.png|.gif结尾的文件
				test:/\.(png|jpg|gif)$/i,
				type: 'asset/resource',
				generator:{
				    //geneator中是个对象，配置下filename，和output中设置assetModuleFilename一样，将资源打包至imgs文件夹
				    filename:"images/[name].[hash][ext][query]"  //[name]指原来的名字，[hash:6]取哈希的前六位，[ext]指原来的扩展名
				}
			},
			//配置对于高版本js的兼容性处理
			{
			    test: /\.js$/,
				//忽略的文件
			    exclude: /(node_modules|bower_components)/,
			    use: {
			        loader: 'babel-loader',
			        options: {
			          presets: ['@babel/preset-env']
			        }
			    }
			}
		]
	},
	//5.配置插件
	plugins:[
		//自动生成html的插件
		new HtmlWebpackPlugin({template:'./public/index.html'}),
		//自动清除dist的插件
		new CleanWebpackPlugin(),
		//分离css的插件，定义打包好的文件的存放路径和文件名称
		new MiniCssExtractPlugin({filename: './css/bundle.[name].css'})
	],
	//配置开发服务器
	devServer:{
		host:'127.0.0.1',
		port: 9595,
		static: {
			directory: path.join(__dirname, 'public'),
		},
		compress: true,
		open:true,
		proxy:{
			[process.env.VUE_APP_BASE_API]:{
				target:'http://localhost:9595',
				changeOrigin: true,
				pathRewrite: { 
					 ['^' + process.env.VUE_APP_BASE_API]: '',
			    },
			}
		}
	}
}