webpack 学习笔记一（安装及配置文件）

最新推荐文章于 2023-02-21 16:25:12 发布

原创最新推荐文章于 2023-02-21 16:25:12 发布 · 254 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

工具专栏收录该内容

16 篇文章

订阅专栏

本文深入讲解了ESModule和CommonJS的引入与导出规范，对比了两种模块化方式的语法差异，并详细介绍了webpack的安装、配置及使用方法，包括如何通过webpack进行模块打包，以及如何在项目中正确引用打包后的文件。

ES Module  引入规范

导入
import   Head from  './head.js'

导出
functoun Head() {
	// ....
}
export default  Head

commonJS 模块引入规范

引入
var Head  = requre('./dead.js)

导出
function Head () {
	// ...
}
module.exports  = Head

webpack 模块打包工具

安装webpack时，可输入 npm install webpack webpack-cli -D 等同于 npm install webpack webpack-cli --save-dev

webpack-cli 是能够在命令行运行webpack 或者 npx webpak 命令

安装webpack 指定版本号

npm install webpack@4.15.1

webpack 安装在当前项目时，用npx webpack -v 查看版本
查看npm 的版本好 npm info webpack
webpack 不建议装全局。因为多个项目时会有问题

初始化项目时，可直接输入 npm init -y

webpack 的配置文件

webpack.confin.js 文件配置

    // webpack 模块
	var path = require('path')
	module.exports = {
	 // 默认为 production, 值有production（压缩版） 和 development（开发版）  
         mode: 'production',
	     // 入口文件 可多个，用对象方法实现
		entry: './index.js',
		// 出口文件及路径
		output: {
			filename: 'bundle.js',
			// __dirname 文件当前目录 注意是两个下划线(_ _) __
			path: path.resolve(__dirname, 'bundle')
		}
	}

在这里插入图片描述

在命令行输入 npx webpack 进行打包，没有webpack.config.js时，默认入口文件为根目录下得index.js , 输出文件为 dist文件下得main.js

文件名 webpack.confin.js 文件名不可错, （webpackconfin.js 报错结果）

ERROR in Entry module not found: Error: Can't resolve './src' in 'F:\hezs\webpack\code'

使用npm script 进行打包
在package.json 文件中。修改script对象
在这里插入图片描述
当运行 bundle命令时，会自动执行 webpack 这个命令，效果

bundle 文件加下会有一个bundle.js 文件

bundle.js 就是打包好的文件，直接在项目中引用即可

webpack 打包知识点

在这里插入图片描述