详细 webpack( 二 ) _vue

5:
的使用一、的基本使用
1、创建一个.json文件，可以在其中添加或修改项目的配置和依赖项信息
npm init -y //创建一个package.json文件
2、安装
npm install webpack webpack-cli --save-dev //开发者模式
3.在.json文件中配置
将"scripts":{"test":"echo \ "Error: no test specified\" && exit 1"替换成："build":"webpack" //在build中执行webpack这条命令//每次打包都使用npm run build 进行打包文件
4、在项目根目录下创建一个名为..js文件，用来定义入口文件出口文件、输出文件目录、加载器、插件等。
（配置文件一定要于项目根部，文件名不能写错否则找不到该文件)
三、大核心概念:
1、entry(入口)//指令从哪个文件开始打包，解析导入的其他模块依赖关系。
2、(输出)//指令打包完之后输出文件的路径、文件名等。
3、(加载器)//加载器允许去处理非文件，并将它们转换为可以识别和处理的模块。
4、(插件)//扩展功能，压缩、文件合并、代码分离、自动生成HTML文件等
5、mode(模式)【主要有两种模式】打包环境
四、打包/配置文件
1.1.打包一个简单的js文件首先创建一个index.js文件，并且没有引入任何模块（文件名随便起）
const path = require("path");//path 模块是内置的核心模块之一，path模块的主要作用是帮助你处理路径相关的操作，比如拼接路径、解析路径、获取路径的绝对路径等。module.export={entry: path.join(__dirname, 'src', 'index.js'), //打包单个文件，__dirname绝对路径，在那个文件夹，要打包文件output: {//定义打包后的文件输出路径、文件名以及其他输出相关的选项，他是一个绝对路径。path: path.join(__dirname, "dist"),//path指定输出文件的存放路径，path.join函数来拼接目录路径；名称为dist打包后存放的文件夹//代表当前模块文件所在的目录的绝对路径，是一个全局变量，返回的是一个字符串//文件名filename: "index.js"// '[name].[ext]' 占位符允许动态生成文件名,//指定输出的文件名},//mode模式分开发模式生产模式mode: "development"}
使用npm run build 进行打包文件
1.2.打包多个js文件首先创建.js文件和.js文件，没有引入任何模块（文件名随便起）
【详细webpack】const path = require("path");//path 模块是内置的核心模块之一，path模块的主要作用是帮助你处理路径相关的操作，比如拼接路径、解析路径、获取路径的绝对路径等。module.export={entry: {//打包多个文件 a1\a2打包后生成的文件，分别对应的是index1.js/index2.jsa1:path.join(__dirname, 'src', 'index1.js'), //__dirname绝对路径，在那个文件夹，要打包的文件1a2:path.join(__dirname, 'src', 'index2.js'), //__dirname绝对路径，在那个文件夹，要打包的文件2}output: {//定义打包后的文件输出路径、文件名以及其他输出相关的选项，绝对路径。path: path.join(__dirname, "dist"),//path指定输出文件的存放路径，path.join函数来拼接目录路径；名称为dist打包后存放的文件夹//代表当前模块文件所在的目录的绝对路径，是一个全局变量，返回的是一个字符串//文件名filename: "[name].js"// 动态生成文件名，根据a1/a2决定},//mode模式分开发模式生产模式mode: "development"}
使用npm run build 进行打包文件
2.1, 打包一个js文件其中引入了css文件
本身只能识别js文件，其他文件都需要通过loder加载器进行编译成能识别的js语言
首先创建一个js文件并且引入一个css文件