webpack5-基础入门-05-处理Html资源 开发服务器&自动化 打包配置

安装包 npm i html-webpack-plugin -D  自动引入打包资源

		<!-- public /index.html-->
					<!-- 手动引入的JS 不需要了 通过插件自动引入 -->
	<!--	<script src="../dist/static/js/main.js"></script> -->

  webpack.config.js

引入

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugin:[

    new HtmlWebpackPlugin(
         // 以 public/index.html 为模板创建文件
         // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
         {
             template:path.resolve(__dirname,"public/index.html"),
         }
        )

]

开发服务器&自动化  

每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化
安装：npm i webpack-dev-server -D

  // 开发服务器    webpack.config.js
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },

npx webpack server

开发模式生产模式配置

修改配置文件目录  新建 

config  把根目录  webpack.config.js    修改   webpack.dev.js     配置成开发环境 修改绝对路径

const path = require("path");
const ESLintPlugin = require('eslint-webpack-plugin'); //引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { template } = require("lodash");

module.exports = {
	entry: "./src/main.js",
	output: {
		// path: path.resolve(__dirname, "../dist"),
		path:undefined, //开发模式没有输出
		filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
		//自動清空上次打包结果
		//原理:在打包前，将path整个目录内容清空，再进行打包
		// clean: true,
	},
	module: {
		rules: [{
				// 用来匹配 .css 结尾的文件
				test: /\.css$/,
				// use 数组里面 Loader 执行顺序是从右到左
				use: ["style-loader", "css-loader"],
			},
			{
				test: /\.less$/,
				use: ["style-loader", "css-loader", "less-loader"],
			},
			{
				test: /\.s[ac]ss$/,
				use: ["style-loader", "css-loader", "sass-loader"],
			},
			{
				test: /\.styl$/,
				use: ["style-loader", "css-loader", "stylus-loader"],
			},
			{
				test: /\.(png|jpe?g|gif|webp)$/,
				type: "asset",
				parser: {
					dataUrlCondition: {
						maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
					},
				},
				generator: {
					// 将图片文件输出到 static/imgs 目录中
					// 将图片文件命名 [hash:8][ext][query]
					// [hash:8]: hash值取8位
					// [ext]: 使用之前的文件扩展名
					// [query]: 添加之前的query参数
					filename: "static/imgs/[hash:8][ext][query]",
				},
			},
			//配置字体
			{
				test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
				type: "asset/resource",
				generator: {
					filename: "static/media/[hash:8][ext][query]",
				},
			},
			  {
			      test: /\.m?js$/,
			      exclude: /node_modules/, //排除node包中的js文件不处理
			      use: {
			        loader: 'babel-loader',
			        // options: {
			        //   presets: ['@babel/preset-env']
			        // }
			      }
			    }
		],
	},
	plugins: [
		new ESLintPlugin({
			//检测哪些文件
			context: path.resolve(__dirname, "../src"),
		}),
		new HtmlWebpackPlugin(
		 // 以 public/index.html 为模板创建文件
	     // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
		 {
			 template:path.resolve(__dirname,"../public/index.html"),
		 }
		)
	],
	
  // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
//模式
	mode: "development",
};

启动：npx  webpack server --config ./config/webpack.dev.js

生产模式配置  生产模式不需要devServer

const path = require("path");
const ESLintPlugin = require('eslint-webpack-plugin'); //引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { template } = require("lodash");

module.exports = {
	entry: "./src/main.js",
	output: {
		path: path.resolve(__dirname, "../dist"),
		filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
		//自動清空上次打包结果
		//原理:在打包前，将path整个目录内容清空，再进行打包
		clean: true,
	},
	module: {
		rules: [{
				// 用来匹配 .css 结尾的文件
				test: /\.css$/,
				// use 数组里面 Loader 执行顺序是从右到左
				use: ["style-loader", "css-loader"],
			},
			{
				test: /\.less$/,
				use: ["style-loader", "css-loader", "less-loader"],
			},
			{
				test: /\.s[ac]ss$/,
				use: ["style-loader", "css-loader", "sass-loader"],
			},
			{
				test: /\.styl$/,
				use: ["style-loader", "css-loader", "stylus-loader"],
			},
			{
				test: /\.(png|jpe?g|gif|webp)$/,
				type: "asset",
				parser: {
					dataUrlCondition: {
						maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
					},
				},
				generator: {
					// 将图片文件输出到 static/imgs 目录中
					// 将图片文件命名 [hash:8][ext][query]
					// [hash:8]: hash值取8位
					// [ext]: 使用之前的文件扩展名
					// [query]: 添加之前的query参数
					filename: "static/imgs/[hash:8][ext][query]",
				},
			},
			//配置字体
			{
				test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
				type: "asset/resource",
				generator: {
					filename: "static/media/[hash:8][ext][query]",
				},
			},
			  {
			      test: /\.m?js$/,
			      exclude: /node_modules/, //排除node包中的js文件不处理
			      use: {
			        loader: 'babel-loader',
			        // options: {
			        //   presets: ['@babel/preset-env']
			        // }
			      }
			    }
		],
	},
	plugins: [
		new ESLintPlugin({
			//检测哪些文件
			context: path.resolve(__dirname, "../src"),
		}),
		new HtmlWebpackPlugin(
		 // 以 public/index.html 为模板创建文件
	     // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
		 {
			 template:path.resolve(__dirname,"../public/index.html"),
		 }
		)
	],
	
//模式
	mode: "production",
};

运行:npx  webpack --config ./config/webpack.prod.js

配置 运行简写

package.json

  "scripts": {

	"start": "npm run dev",
	"dev":"webpack server --config ./config/webpack.dev.js",
	"build": "webpack --config ./config/webpack.prod.js"
  },