webpack打包示例

webpack打包示例

1. 下载的东西
   1. webpack
   2. webpack-cli
   3. typescript
   4. ts-loader
   5. html-webpack-plugin：webpack构建后生成html文件，同时把构建好入口js文件引入到生成的html文件中。
   6. webpack-dev-server：创建一个服务器（http://localhost:8080），服务器监听指定目录下的文件，自动打包文件，默认将输出文件bundle.js存于服务器的根目录中，并具有实时更新加载页面的功能
      需要在package.json中配置：
      "start": "webpack serve --open chrome.exe
      然后就可以npm start了
   7. clean-webpack-plugin：每次构建前，清空dist文件夹，保证dist中的文件都是最新的，不存留历史遗存文件
   8. babel
      npm i -D @babel/core @babel/preset-env babel-loader core-js

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
	entry: './src/index.ts',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js',
		environment: {
			// webpack打包不用箭头函数，否则即使有Babel，老版本ie浏览器依然识别不了
			arrowFunction: false
		}
	},
	// 指定webpack打包要使用的模块
	module: {
		// 指定要加载的规则
		rules: [
			{
				// 指定规则生效的文件
				test: /\.ts$/,
				use: [
					// 配置babel
					{
						// 指定加载器
						loader: "babel-loader",
						// 设置babel
						options: {
							// 设置预定义的环境
							presets: [
								[
									//指定环境的插件
									"@babel/preset-env",
									// 配置信息
									{
										// 要兼容的目标浏览器
										targets: {
											"chrome": "88"
										},
										// 指定corejs的版本
										"corejs": "3",
										// 使用corejs的方式,"usage"表示按需加载
										"useBuiltIns": "usage"
									}
								]
							]	
						}
					}
					'ts-loader'
				],
				exclude: /node-modules/
			}
		]
	},
	// 配置webpack的插件
	plugins: [
		new CleanWebpackPlugin (),
		new HTMLWebpackPlugin({
			// 模板
			template: "./src/index.html"
		}),
	],
	// 用来设置引用模块
	resolve: {
		extensions: ['.ts', 'js']
	}
}