这是我参与「第五届青训营 」笔记创作活动的第12天
1、webpack 介绍 什么是webpackhttps://www.webpackjs.com/ Webpack是一个模块打包器(bundler) 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理 它将根据模块的依赖关系进行静态分析，生成对应的静态资源 五个核心概念 Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始 Output：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件 Loader：loader 让 webpack 能够去处理那些非 JavaScript 文件 Plugins：插件则可以用于执行范围更广的任务。例如：打包优化、压缩 Mode：模式，有生产模式 production 和开发模式 development 理解 Loader Webpack 本身只能加载 JS/JSON 模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载 Loader 本身也是运行在 node.js 环境中的 JavaScript 模块 loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 less-loader。 理解 Plugins 插件可以完成一些loader不能完成的功能。 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。 配置文件(默认) webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象 webpack是一个打包机：
1 打包
js-------->js(将多个文件打包成一个，还可以实现压缩处理)
css----->js(也可以单独将css进行分离处理)
2 转换
img----->字符串base64
es6 ts—>js es5 兼容
3 优化项目
开发环境
代理服务，解决跨域 （jsonp使用的不多）
2、webpack 安装 npm inIt -y 初始化
安装 webpack
npm install webpack webpack-cli -g //全局安装,作为指令使用 空格下载多种模块 存放在c:/npm npm install webpack webpack-cli -D //建议本地安装,并将执行文件放置在命令执行目录中 node_modules----->bin 先全局，本地必须安装或者只安装本地
**注意：**本地安装完成之后，查看node_modules----->bin 拥有webpack执行文件
通过npx webpack // 执行node_modules----->bin 1 零配置：
不需要进行任何配置，称为零配置 npx webpack 将当前目录下的src--->index.js打包到命令目录下的dist-mian.js npx webpack --mode production 指定打包的模式为生产模式 去掉警告 npx webpack --mode development 开发模式 1 2 3 里面的文件叫home.js,，将src—>home.js打包到dist---->main.js --entry指的是入口文件 npx webpack --entry ./src/home.js --mode production 1 将多个文件一起打包 npx webpack --entry ./src/home.js ./src/index.js --mode production 1 指定以后打包的名字 自定义文件 --output-filename my.js npx webpack --entry ./src/home.js ./src/index.js --output-filename my.js --mode production 1 文件夹的名字不加默认的dist 指定打包以后存放的目录–output-path wx npx webpack --entry ./src/home.js ./src/index.js --output-filename my.js --output-path wx--mode production 1 命令很长，将命令放置到脚本中 运行自定义的文件夹即可 npm run wx 1 3、编译打包应用(项目) 创建js文件
src/js/app.js src/js/module1.js src/js/module2.js src/js/module3.js 创建json文件
src/json/data.json 创建主页面:
src/index.html 运行指令
开发配置指令
npx webpack --entry ./src/home.js ./src/index.js --output-filename app.bundle.js --output-path build--mode production 1 webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的语法
生产配置指令
npx webpack --entry ./src/home.js ./src/index.js --output-filename app.bundle.js --output-path build --mode=production 1 production 配置能够压缩代码
结论：
webpack能够编译打包 js 和 json 文件 能将 es6 的模块化语法进行代码打包 能压缩代码 缺点：
不能编译打包 css、img 等文件 不能将 js 的 es6 基本语法转化为 es5 语法 打包命令复杂
