webpack安装及环境搭建（详细步骤）webpack是什么？vuereactangular使用webpackwebpa

webpack是什么？

vue react angular 使用webpack

webpack 4 速度更快，大型项目节约90%构建时间 ---> 内置了更多默认配置，变更了许多API

核心定义：模块打包工具（代码管理工具）

发展：js模块打包工具 --> 所有模块打包工具

注：Webpack官方文档一定要看英文版，英文版是最新的文档

webpack-cli作用：分析命令参数，对各个参数进行转换，统一组成新的编译配置项

Node.js安装

Node下载官网：nodejs.org/en/

建议下载LTS最新版本，比较稳定

命令行检测

node- v //检测node版本
npm -v	//检测npm版本

webpack安装

全局安装：npm install webpack-cli -g

问题：下载的是最新的版本，但是之前的webpack项目不兼容

2.项目中安装webpack ：npm install webpack webpack-cli -D

版本号安装：npm install webpack@4.16.5 webpack-cli -D

安装成功后项目文件夹中多了一个node_modules文件夹

webpack环境搭建

  1. 创建文件夹 --- > 打开文件夹所在命令行 --- > npm init初始化
  2. 编辑器打开package.json 
  3. 加一行代码 ```"private":true```表示私有webpack不会被发布
  4. 删除main配置、scripts中配置项去掉

配置webpack文件

1.创建dist文件夹 --> 创建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标题</title>
</head>
<body>
	<p>网页内容</p>
</body>
<script src="./bundle.js"></script> //后面打包后的js文件
</html>

2.创建src文件夹

将index.js放入

3.项目文件夹中创建webppack.config.js

const path = require('path');

modele.exports = {
	entry:'./index.js',  //默认打包index.js
	output:{  //出口文件
		filename:'bundle.js',
		path:path.resolve(_dirname,'bundle')
	}
}

4.简化打包代码

//打开package.json文件 --> 修改
"scripts":{
	“bundle”:"webpack"
}
// 命令行打包模块：npm run bundle

打包过程中遇到的问题

关于打包过程中的警告

//在webpack.config.js文件中
module.exports = {
	mode:'production',//指定生产环境 production压缩  development不被压缩
}