Webpack安装及使用

发表于 | 分类于 | 阅读次数:
字数统计: 343 | 阅读时长 ≈ 1

简单了解~环境搭建，安装及配置

中文文档 英文文档

含义

主要用于模块打包工具（ES Module，CommonJS，CMD，ADM）

安装

nodejs

1
2
node -v
npm -v

webpack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#前提
$ mkdir webpack-demo
$ cd webpack-demo
$ npm init

#全局安装
$ npm install webpack webpack-cli -g
$ npm uninstall webpack webpack-cli -g

#项目中安装
~/Desktop/webpack-demo
$ npm install webpack webpack-cli -D

#项目中不同版本安装
~/Desktop/webpack-demo2
$ npm info webpack
$ npm install webpack@3.10.0 webpack-cli -D

#检查项目安装webpack是否成功
~/Desktop/webpack-demo2
$ npx webpack -v

package.json文件修改

1
2
3
4
5
6
7
8
9
10
11
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
  	"bundle": "webpack"				//npm run bundle
  }
  "author": "liupeng",
  "license": "ISC"
}

配置文件

webpack.config.js //文件名默认就行，最好不要改

1
2
3
4
5
6
7
8
9
10
11
12
const path = require('path');

module.exports ={
    mode: 'production',								//模式配置（pro,dev）正式环境压缩
	entry: {										//打包入口
     main: './src/index.js'   
    },						
	output: {
		filename: 'bundle.js',					    //打包输出名
		path: path.resolve(__dirname, 'dist')		//打包输出地址
	}
}

运行打包

1
2
3
4
5
6
7
8
#指定配置文件打包(webpackcongfig.js)
npx webpack --config webpackcongfig.js
#全局安装打包
webpack index.js
#项目安装打包
npx webpack index.js
#配置文件json:scripts打包
npm run bundle

打包的一些日志输出知识

1
2
3
4
5
6
7
Hash: 打包的唯一标识
Version: webpack版本号
Time: 打包时间
Asset: 打包的文件名
Size: 包的大小
Chunk: 项目中所有打包的文件id
Chunk: 打包生成的文件入口名