[JavaScript知识库]Webpack笔记 相关知识

1.Webpack概念及使用

• webpack概念：现代 javascript 应用程序的静态模块打包器 (module bundler)
• 可以分析、压缩、打包代码
• 好处：减少文件数量，缩减代码体积
• 安装依赖包：yarn add webpack@5.31.2 webpack-cli@4.6.0 -D
• 在package.json中, 配置scripts(自定义命令)

scripts: {
	"build": "webpack"
}

• 运行打包命令：yarn build

2.Webpack配置修改

• 修改默认入口和出口

const path = require("path")
module.exports = {
    entry: "./src/main.js", // enter: 默认入口
    output: { 
        path: path.join(__dirname, "dist"), //出口"文件夹"名
        filename: "bundle.js"// 出口"文件"名
    }
}

3.Webpack-打包流程图

• 敲击命令，代码执行过程
  
• 代码源文件和webpack之间关系图
  

4.Webpack自动复制html

• 下载插件：yarn add html-webpack-plugin@5.3.1 -D
• webpack.config.js配置：

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin') 
module.exports = {
    plugins: [//自动从指定的位置复制HTML到dist目录
        new HtmlWebpackPlugin({
            // 以此为基准生成打包后html文件
            template: './public/index.html' 
        })
    ]
}

5.Webpack-加载器-处理css文件

• 下载模块包：yarn add css-loader@5.2.1 style-loader@2.0.0 -D
• webpack.config.js配置：

module.exporte = {
	module:{//配置loader的属性
		rules:[{//配置loader的规则
			test:/\.css$/i
			use:["style-loader","css-loader"]//从右往左执行
		}]
	}
}

6.Webpack-加载器-处理less文件

• 下载模块包：yarn add less@4.1.1 less-loader@8.1.0 -D
• 把less文件翻译成css，还是要用css加载器
• webpack.config.js配置：

module.exporte = {
	module:{//配置loader的属性
		rules:[{//配置loader的规则
			test:/\.less$/i
			use:["style-loader","css-loader","less-loader"]//从右往左执行
		}]
	}
}

7.Webpack-加载器-处理图片

• 转base64会减少网络请求次数，但占空间多30%左右
• webpack.config.js配置：

module.exporte = {
	module:{//配置loader的属性
		rules:[//使用 loader 来处理 img 文件
        	test:/\.(png|jpg|gif|jpeg)/i,
            type:'asset'//自动处理图片，小于 8k 打包成 base64 ，否则直接复制图片]
	}
}

8.Webpack-加载器-处理字体图标

• 直接打包
• webpack.config.js配置：

module.exporte = {
	module:{//配置loader的属性
		rules:[//使用 loader 来处理 img 文件
        	test:/\.(eot|svg|ttf|woff|woff2)/i,
            type:'asset/resource',//永远不会转成 base64 ，直接复制文件到出口
            generator:{//生成器
            	//[name]:占位符变量，最终会被替换成原来的文件名
                //[hash]：生成hash值，：4代表几位
                //[ext]:原先的后缀名
                filename:'fonts/[name].[hash:6][ext]'
          }
	}
}

9.Webpack-加载器-处理高版本js语法

• 下载安装包，yarn add babel-loader@8.2.2 @babel/core@7.13.15@babel/preset-env@7.13.15 -D
• webpack.config.js配置：

module.exporte = {
	module:{//配置loader的属性
		rules:[//使用 loader 来处理 img 文件
        	test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
        }
}

10.Webpack开发服务器

• 下载安装包，yarn add webpack-dev-server@3.11.2 -D
• webpack.config.js配置：

"scripts":{"serve":"webpack serve"}
module.exporte = {
	devServer:{
        port:3000,//端口号
        open:true//自动唤起浏览器，不需要手动刷新
    }
}