webpack的基本使用

webpack的基本使用

打包需要 node 环境支持
初始化环境 npm init -y

生产环境配置

打包js文件

创建webpac环境
npm install webpack webpack-cli -D

1.新建 webpack 配置文件 在更目录下
2.名字一般为 webpack.config.js
3.文件内容如下（配置项）

const paht = require('paht') 引入寻找文件的包，这个node 自带的
	module.exports = {
	mode : ' development'   // 开发模式（ production： 线上模式）
	entry : path. join (_dirname，'src', 'index.js')  //通过文件查找包 查找文件入口（一般源代码都放在src里）
//打包后的出口
output: {
	filename: ' bundle. js', //打包生成的文件
	path: path. join(__ dirname ,'dist' ) //打包后的文件夹目录
	}
}

运行打包时候需要在根目录 package.json
scripts 内容里添加 build 命令 内容为

//这是生产环境下
build :  "webpack  -- config  webpack.config.js" //（配置打包所启用的规则，这里可以不填默启动文件的名字为 webpack.config.js ）

打包html

安装webpack 关于html 插件
npm install htmL -webpack-plugin -D //用于解析 html 文件
npm install webpack - dev-server -D //用于启动html 服务器（虚拟服务器）

const paht = require('paht') 引入寻找文件的包，这个node 自带的
const HtmlWebpackPlugin =require( 'html-webpack-plugin' ) //引入html插件
module.exports = {
	mode : ' development'   // 开发模式（ production： 线上模式）
	entry : path. join (_dirname，'src', 'index.js')  //通过文件查找包 查找文件入口（一般源代码都放在src里）
	//打包后的出口
	output: {
		filename: ' bundle. js', //打包生成的文件
		path: path. join(__ dirname ,'dist' ) //打包后的文件夹目录
	}，
	//配置插件相关配置
	plugins: [
	//
	new  HtmlWebpackPlugin ({
		template: path. join(__ dirname, 'src', ' index. html' ) , //寻找模板
		filename:' index. html '	// 产出的文件 默认为上面打包出口位置
		})
	],
	//配置启动的服务端口
	devServer: {
		port: 3000，//端口
		contentBase: path. join(_dirname, 'dist') //启动的文件目录 ，默认自动查找文件的index.html 文件
	}
}

运行服务时候需要在根目录 package.json
scripts 内容里添加 dev 命令 内容为

"dev"  : "webpack-dev-server"

运行命令 npm run dev

ES6 转ES5 语法

npm install babel // 安装babel 语法转义包 经常与webpack 结合使用
npm install @babel/ core @babel/preset-env babel-loader -D //安装 babel 核心插件
1.新建 bable 配置文件 在更目录下
2.名字为 .babelrc 文件 (配置内容为json 格式)
3.配置内容如下

{
	"presets": [ "babel / preset-env" ]
}

4.在刚刚创建的webpack.js 文件添加模块化解析内容

const paht = require('paht') 引入寻找文件的包，这个node 自带的
const HtmlWebpackPlugin =require( 'html-webpack-plugin' ) //引入html插件
module.exports = {
	mode : ' development'   // 开发模式（ production： 线上模式）
	entry : path. join (_dirname，'src', 'index.js')  //通过文件查找包 查找文件入口（一般源代码都放在src里）
	//打包后的出口
	output: {
		filename: ' bundle. js', //打包生成的文件
		path: path. join(__ dirname ,'dist' ) //打包后的文件夹目录
	}，
	module: {
	//配置规则
		rules : [
			{
			//以js结尾的文件都走 babel-loader 规则
			test: /\ .js$/ ,
			loader: ['babel-loader'] ,
			include:|path.join(__ dirname ,'src') , //哪个路径
			exclude: / node_ modules/
			}
		]
	},
	//配置插件相关配置
	plugins: [
	//
		new  HtmlWebpackPlugin ({
			template: path. join(__ dirname, 'src', ' index. html' ) , //寻找模板
			filename:' index. html '	// 产出的文件 默认为上面打包出口位置
		})
	],
	//配置启动的服务端口
	devServer: {
		port: 3000，//端口
		contentBase: path. join(_dirname, 'dist') //启动的文件目录 ，默认自动查找文件的index.html 文件
	}
}

线上环境配置

在根目录新建 webpack.prod.js 文件
配置内容如下：

const paht = require('paht') 引入寻找文件的包，这个node 自带的
const HtmlWebpackPlugin =require( 'html-webpack-plugin' ) //引入html插件
module.exports = {
	mode :  ' production'      // 线上模式 ('development'   // 开发模式)
	entry : path. join (_dirname，'src', 'index.js')  //通过文件查找包 查找文件入口（一般源代码都放在src里）
	//打包后的出口
	output: {
		filename: ' bundle[contenthash]. js', //打包生成的文件 [contenthash]计算打包后的文件大小 用于看文件是否变化，如过变化那么打包后的文件名字也会相应的修改，而且这个可以让代码最大程度命中http缓存，优化页面缓存性能，
		//◆静态资源加hash后缀,根据文件内容计算hash
		//◆文件内容不变,则hash不变，则url不变
		//◆url 和文件不变,则会自动触发http缓存机制,返回304
		path: path. join(__ dirname ,'dist' ) //打包后的文件夹目录
	}，
	module: {
	//配置规则
		rules : [
			{
			//以js结尾的文件都走 babel-loader 规则
			test: /\ .js$/ ,
			loader: ['babel-loader'] ,
			include:|path.join(__ dirname ,'src') , //哪个路径
			exclude: / node_ modules/
			}
		]
	},
	//配置插件相关配置
	plugins: [
		new  HtmlWebpackPlugin ({
		template: path. join(__ dirname, 'src', ' index. html' ) , //寻找模板
		filename:' index. html '	// 产出的文件 默认为上面打包出口位置
		})
	],
//配置启动的服务端口 下面这里删除因为是线上环境
	/*devServer: {
		port: 3000，//端口
		contentBase: path. join(_dirname, 'dist') //启动的文件目录 ，默认自动查找文件的index.html 文件
	}*/
}

注意！因为新建的规则文件命为webpack.prod.js，所以修改打包配置后，需要在package.json 文件修改所要启动规则。（文件的文件名字内容如）

	//这是原生产环境下
	//build :  "webpack  -- config  webpack.config.js" //（配置打包所启用的规则，这里可以不填默启动文件的名字为 webpack.config.js ）
	//这是线上环境
	"build": "webpack --config webpack.prod.js",