本文共 1282 字，大约阅读时间需要 4 分钟。

ES Module  引入规范导入import   Head from  './head.js'导出functoun Head() {
   	// ....}export default  Head

commonJS 模块引入规范引入var Head  = requre('./dead.js)导出function Head () {
   	// ...}module.exports  = Headwebpack 模块打包工具

安装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 打包知识点

转载地址：http://xjxxi.baihongyu.com/