Webpack打包步骤

配置webpack的自动打包文件

• 运行npm install webpack-dev-serve -D 命令，安装支持项目打包的工具
• 修改pakage.json ->scripts中的dev命令如下

"scripts":{
"dev":"webpack-dev-server" //script节点下的脚本，可以通过npm run 执行

• 将src ->index.html中，script脚本中的路径，修改为buldle.js“”
• 运行npm run dev 命令，重新就行打包
• 在浏览器中访问 http://localhost:8080地址，查看自动打包效果

得到的页面是跟目录，如果想要把呈现的页面展示出来，需要先配置html-webpack-plugin生成预览页面
配置html-webpack-plugin生成预览页面

 - 1 运行npm install html-webpack-plugin -D 命令，安装在预览生成页面的插件
 - 2 修改webpack.json.js 头部文件区域，添加如下配置
导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin=require('html-webpack-plugin')
//创建插件实例对象
const htmlPlugin =new HtmlWebpackPlugin({ 
template:'./src/index.html'//指定用到的模板文件 即复制那个模板文件
filename:'index.html' //指定生成的文件名称，该文件存在于内存中，在目录中不显示
})
 - 3 修改webpack.config.js 文件中向外暴露的配置对象，新增如下配置节点
 modle.exports={
plugins:[htmlPlugin] //plugin数组是webpack打包期间会用到的一些插件表
}

需求：点击完页面自动呈现页面 webpack配置自动打包相关的参数

//package.json中的配置
//--open打包完成后自动打开浏览器
//--host配置IP地址
//--port配置端口
"scripts"{
"dev":"webpack-dev-server --open --host:127.0.0.1 --post 8888"
},

webpack加载器
通过loader打包非js模块
在实际开发中，webpack默认只能以打包处理以.js后缀名结束的模块，其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错。
loader加载器可以协助webpack打包处理.less先关的文件
比如 less-loader可以打包.less先关的文件
scss-loader可以打包处理.scss先关的文件
url-loader可以打包处理css中与url路径相关的文件

webpack中加载器的基本使用

打包处理css文件步骤

 1. 运行npm i style-loader  css-loader -D 命令，安装处理css文件的loader
 2. 在webpack.config.js的moudle ->rules数组中，添加loader规则如下：
 //所有第三方文件模块匹配规则
 module:{
	rules:[
	{text:/\.css$/,use:['style-loader','css-loader']}
]
}
其中，test表示配置文件类型，use表示对应调用的loader， $代表以css结尾的文件类型
注意：use数组中指定的loader顺序时固定的   
     多个loader的顺序是从后往前调用

打包处理less文件

 1. 运行npm i less-loader -D命令
 2. 在webpack。config.js的module ->rules数组中，添加loader规则如下：
 //所以第三方文件模板匹配规则
 moudle:{
 	rules:[{
	{tets:/\.less$/,use:['style-loader','css-loader','less-loader']}
}]运
}

webpack打包scss文件

 1. 运行npm i sass-loader node-sass -D 命令
 2. 在webpack.config.js的moudle ->rules数组中，添加loader规则如下：
 	//所有第三方文件模块匹配规则
 	moudle:{
	rules:[
		{test://.scss/,use:['style-loader','cass-loader','']}
	]
}

配置postCSS自动添加css的兼容前缀

 1. 运行npm i postcss-loader autoprefixar -D命令
 2. 在项目根目录中创建postcss.config.js,并初始化如下配置：

 //导入自动添加前缀的插件
 	const autoprefixer=require('autoprefixer')
 	moudle.export={
	plugins:[autoprefixer] //挂载插件
}
 3. 在webpack。config.js的moudle ->rules数组中，修改css的loader的规则如下：
 	moudle:{
 	rules:[
 	{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
 	]
 	}

打包样式表中的图片和字体文件

 1. 运行npm i  url-loader file-loader -D命令
 2. 在webpack.config.js的moudle- >rules的数组中，添加loader规则如下：
 	moudle:{
 	rules:[
 	{
 	test:/\.jpg|gif|bmp|ttf|eot|svg|woff|woff2$/,
 	use:'url-loader?limit=16940'
 	}
 	]
 	}
 	其中？之后是loader的参数项
 	limit用来指定图片的大小，单位是字节（byte）,只有小于limit大小的图片，才会被转化为base64图片

打包js文件中的高级语法

 1. 安装babal转化器相关的包：
  npm i babel-loader @babel/core @babel/runtime -D
 2.安装babel语法插件相关的包：
 npm i @balel/preset-env @babel/plugin/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3.在项目根目录中，创建babel配置文件babel.config.js并初始化基本配置如下：
	moudle.exports:{
	presets:['@babel/preset-env'],
	plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
	}
4.在webpack.config.js的moudle ->rules数组中，添加loader规则如下：
	//exclude为排除项 表示babel-loader不需要处理node-modules中的js文件
{test:/\.js$/,use:'babel-loader',exclude:/node_moudles/}
	

webpack中配置vue组件的加载器

 1. 运行npm i vue-loader Vue-template-compiler -D命令
 2. 在webpack.config.js配置文件中，添加Vue-loader的配置项如下：
 	const VueLoaderPlugin=require('Vue-loader/lib/plugin')
 	moudle:{
 	rules:[
 	//其他规则
 	{test:/\.Vue$/,loader:'vue-loader'}
 	]
 	},
 	plaugins:[
 	//其他插件
 	new VueLoaderPlugin() //确保引入这个插件
 	]

在webpack项目中使用Vue

 1. npm i vue -s  安装vue
 2. 在src -> index.js入口文件中，通过inport Vue form  'Vue' 来导入vue构造函数
 3. 创建vue的实例对象，并要指定控制的el区域
 4. 通过render函数渲染APP根组件
 	//导入vue构造函数
 	import Vue form 'Vue'
 	//导入App根组件
 	import App form './components/App.vue'
	const vm=new Vue({
 	//指定vm实例要控制的页面区域
 	el:'#app',
 	//通过render函数，把指定的数组渲染到el区域中
 	render: h=>h(App)
	})

webpack打包发布

上线之前需要通过webpack将应用进行整体打包，可以通过package.json文件配置打包命令：

 - //在package.json文件配置webpack.json打包命令
 - //该命令默认加载项目根目录中的webpack.config.js配置文件
"script":{
//用于打包的命令
"builde":"webpack -p"
//用于开发调试的命令
"dev":"webpack-dev-server --open --host 127.0.0.1 --post 3000",
}