webpack

webpack安装 功能 打包、编译 功能

 npm ini
 1.安装本地webpack
 2.webpack webpack -cli -D
 3.运行指令:
   开发环境:webpack ./src/index.js -o ./build/built.js  --mode=development
    webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到  ./build/built.js
   生产环境:
 4. 在 html5 文件中引入打包后的资源
结论：
 5. webpack 能处理 js/json, 不能处理 css/img 等其他资源。

webpack.config.js

 module.exports={
	 mode:'development',//模式 默认两种 production 
	 entry:'./src/index.js', //入口
	 output:{
		 filename:'bundle.js' //打包后的文件
		 path: path.resolve(__dirname,'dist'),//路径必须是一个绝对路经
	 }
 }

3.webpack 五个概念

   3.1 Entry
   3.2 Output
   4.2 Loader   翻译 css png...
   4.3 Plugins  优化，压缩，定义环境变量
   4.4 Mode development  production

4.打包样式资源 需要loader
webpack.config.js webpack的配置文件，指示webpack能做哪些活。
所有构建工具都是基于nodejs平台运行的。

下载 npm i css-loader style-loader -D
const {resolve } = require('path');
module.exports = {
	//webpack配置
	//入口起点
	entry:'./src/index.js',
	//输出
	output:{
		//输出文件名
		filename:'built.js',
		//输出路径
		//__dirname 代表，当前文件目录的绝对路径
		path:resolve(__dirname,'build')
	},
	//loader的配置
	module:{
		rules:[
			//详细loader配置
			{
			  //匹配哪些文件
			  test:/\.css$/,
			  //使用哪些loader进行处理
			  use:[
				  //use数组中loader执行顺序
				  //创建一个style标签，将js中的样式资源插入进行，添加到header中生效。
				  'style-loader',
				  //将 css文件变成commonjs模块加载js中，里面内容是样式字符串
				  'css-loader'
			  ]
			},
			{
			   test:/\.less$/,
			   use:[
				   'style-loader',
				   'css-loader',
				   //将less文件编译成css文件
				   //需要下载 less-loader 和 less
				   'less-loader'
			   ]
			}
		]
	},
	// plugins的配置
	plugins:[
		//详细plugins的配置
	],
	//模式
	mode:'development',
	mode:'production'
}

打包 html资源

/*
loader: 1.下载 2.使用 (配置loader)
plugins:1.下载 2.引入 3.使用 npm i html-webpack-plugin -D
*/

const resolve = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.export={
	entry:'./src/index.js',
	output:{
		filename:'built.js',
		path:resolve(__dirname,'build')
	},
	module:{
		rules:[
			//loader的配置
		]
	},
	plugins:[
		//plugins的配置
		//功能： 生成一个index.html文件，引入打包输出的所有资源。
		//需求：需要有结构的HTML文件
		new HtmlWebpackPlugin({
			// 复制'./src/index.html'文件，并自动引入所有资源。
			template:'./src/index.html'
			})
	],
	mode:'development'
}

5.打包图片资源

const resolve = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.export={
	entry:'./src/index.js',
	output:{
		filename:'built.js',
		path:resolve(__dirname,'build')
	},
	module:{
		rules:[
			//loader的配置
			{
				text:/\.less$/,
				use:[
					'style-loader',
					'css-loader',
					'less-loader'
				]
			},
			{
				//处理不了html中的文件
				//处理图片资源
				test:/\.(jpg|png|gif)$/,
				//需要下载 url-loader file-loader
				loader:'url-loader',
				option:{
					//图片大小小于8kb,就会被base64处理。
					//优点：减少请求数量(减轻服务器压力)。
					//缺点：图片体积会更大(文件请求速度更慢)。
					limit:8*1024,
					//问题：因为 url-loader默认使用es6模块解析，
					//而'html-loader'引入图片是commonjs,解析时会出问题
					//问题：【object Module】
					//解决：关闭url-loader的es6模块化，使用commonjs解析。
				    esModule:false
				}
			},
			{
				test:'/\.html$/,
				//处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
				loader:'html-loader'
			}
		]
	},
	plugins:[
		//plugins的配置
		//功能： 生成一个index.html文件，引入打包输出的所有资源。
		//需求：需要有结构的HTML文件
		new HtmlWebpackPlugin({
			// 复制'./src/index.html'文件，并自动引入所有资源。
			template:'./src/index.html'
			})
	],
	mode:'development'
}

6.打包其他资源。字体图标

const resolve = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.export={
	entry:'./src/index.js',
	output:{
		filename:'built.js',
		path:resolve(__dirname,'build')
	},
	module:{
		rules:[
			//loader的配置
			{
				text:/\.less$/,
				use:[
					'style-loader',
					'css-loader'
				]
			},
			//打包其他资源(除了 html/js/css资源以外的资源)
			{
				//排除css/js/html资源
				exclude:/\.(css|js|html|less)$/,
				loader:'file-loader',
				option:{
					name:'[hash:10].[ext]'
				}
			}
		]
	},
	plugins:[
		new HtmlWebpackPlugin({
			template:'./src/index.html'
			})
	],
	mode:'development'
};

devServer 热加载

module.export={
	mode:'development',
	//开发服务器 devServer:用来自动化(自动编译，自动打开浏览器，自动刷新浏览器)
	//特点：只会在内存中编译打包，不会有任何输出
	//先安装 npm i webpack-dev-server -D
	//启动devServer指令为:npx webpack-dev-server
	devServer:{
		//项目构建后路径
		contentBase:resolve(__dirname,'build'),
		//启动gzip压缩
		compress:true,
		//端口号
		port:3000,
		//自动打开浏览器
		open:true
	}
}

开发环境基本配置
运行项目指令：
webpack 会将打包结果输出出去
npx webpack-dev-server 只会在内存中编译打包，没有输出

const {resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
	entry:'./src/index.js',
	output:{
		filename:'js/built.js',
		path:resolve(__dirname,'build')
	},
	module:{
		rules:[
			{
			 //处理 less资源
			  test:/\.less$/,
			  use:[
				  'style-loader',
				  'css-loader',
				  'less-loader'
			  ]
			}
			{
			  //处理css资源
			  test:/\.css$/,
			  use:['style-loader','css-loader']
			},
			{
			  //处理图片资源
			  test:/\.(jpg|png|gif)$/,
			  loader:'url-loader',
			  option:{
				  limit:8 * 1024,
				  name:'[hash:10].[ext]',
				  //关闭es6模块化
				  esModule:false,
				  outputPath:'imgs'
			  }
			},
			{
			   //处理html中img资源
				test:/\.html$/,
				loader:'html-loader'
			},
			{
				//处理其他资源
				exclude:/\.(html|js|css|less|jpg|png|gif)/,
				loader:'file-loader',
				options:{
					name:'[hash:10].[ext]',
					outputPath:'media'
				}
			}
		]
	},
	plugins:[
		//plugins的配置
		new HtmlWebPlugin({
			template:'./src/index.html'
		})
	],
	node:'development',
	devServer:{
		contentBase:resolve(__dirname,'build'),
		compress:true,
		port:3000,
		open:true
	}
}

构建环境介绍
提取css成单独文件，解决闪屏和提速。
npm i mini-css-extract-plugin -D

const {resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//设置 nodejs环境变量
process.env.NODE_ENV = 'development';
module.exports = {
	entry:'./src/js/index.js',
	output:{
		filename:'js/built.js',
		path:resolve(__dirname,'build')
	},
	module:{
		rules:[
			{
				test:/\.css$/,
				use:[
					//创建style标签,将样式放入
					//'style-loader', 
					//这个loader取代style-loader. 作用：提取js中的css成单独文件。
					MiniCssExtractPlugin.loader,
					//将css文件整合到js文件中
					'css-loader',
					/*
					 css兼容性处理：postcss  --> postcss-loader postcss-preset-env
					 需要 npm i postcss-loader postcss-preset-env
					 帮 postcss 找到package.json中browserslist里面的配置，通过配置
					 加载制定的css兼容性样式。
					 文件：package.json
					 "browserslist":{
						 // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development
						 "development":[
							 "last 1 chrome version",
							 "last 1 firfox version",
							 "last 1 safair version",
						 ],
						 "production":[
							 ">0.2％",
							 "not dead",
							 "not op_mini all"
						 ]
					 }
					*/
				   //使用 loader的默认配置
				   //'postcss-loader',
				   //修改loader的配置
				   {
				   loader:'postcss-loader',
				   option:{
					   ident:'postcss',
					   plugins:() => [
						   // postcss 的插件
						   require('postcss-preset-env')()
					   ]
				   }
				   }
				]
			}
		]
	},
	plugins:[
		new HtmlWebpackPlugin({
			template:'./src/index.html'
		}),
		new MiniCssExtractPlugin({
			//对输出的文件进行重新命名。
			filename:'css/built.css'
		})
	],
	mode:'development'
}

CSS 兼容性处理
压缩 CSS npm i optimize-css-assets-webpack-plugin

const {resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
//设置 nodejs环境变量
process.env.NODE_ENV = 'development';
module.exports = {
	entry:'./src/js/index.js',
	output:{
		filename:'js/built.js',
		path:resolve(__dirname,'build')
	},
	module:{
		rules:[
			{
				test:/\.css$/,
				use:[
					'css-loader',
				   {
				   loader:'postcss-loader',
				   option:{
					   ident:'postcss',
					   plugins:() => [
						   // postcss 的插件
						   require('postcss-preset-env')()
					   ]
				   }
				   }
				]
			}
		]
	},
	plugins:[
		new HtmlWebpackPlugin({
			template:'./src/index.html'
		}),
		new MiniCssExtractPlugin({
			//对输出的文件进行重新命名。
			filename:'css/built.css'
		})
		// 压缩 css
		new OptimizeCssAssetsWebpackPlugin()
	],
	mode:'development'
}

js 语法检查 eslint

const {resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.export = {
	entry:'./src/js/index.js',
	output:{
		filename:'js/built.js',
		path:resolve(__dirname,'build')
	},
	module:{
		rules:[
			/*
			  语法检查 eslint-loader eslint
			  注意：只检查自己写的源代码，第三方库是不用检查的
			  设置检擦规则
			   package.json中eslintConfig中设置
			   airbnb -->eslint-config-airbnb-base eslint eslint-plugin-import
			   文件：package.json
			   "eslintConfig":{
				   "extends":"airbnb-base"
			   }
			*/
		   {
			  test:/\.js$/,
			  exclude: /node_modules/,
			  loader:'eslint-loader',
			  options:{
				  //自动修复eslint的错误
				  fix:true
			  }
		   }
		]
	},
	plugins:[
		new HtmlWebpackPlugin({
			template:'./src/index.html'
		})
	],
	mode:'development'
}