白告王旋的前端开发笔记——Webpack

wabpack能够处理 JS文件的相互依赖关系

wabpack能够处理JS的兼容问题，把 高级的、浏览器不识别的语法，转为 低级的，浏览器能识别的语法

命令格式

wabpack .\src\main.js 	.\dist\bundle.js

webpack 要打包的文件的路径  打包好的输出的文件的路径

创建 wabpack.config.js 文件，对wabpack进行配置

//通过Node中的模块操作，向外暴露了一个 配置对象
const path = require('path')

//启动热更新第2步
const webpack = require('webpack')
module.exports = {
   
// 手动指定 入口 和 出口
 	entry: path.join(_dirname, './src/main.js')  //入口，表示 要使用 webpack打包哪个文件
	output: {
    //输出文件相关的配置
        path: path.join(_dirname, './dist'), //指定 打包好的文件，输出到哪个目录中去
        filename: 'bundle.js'//指定输出的文件的名称
    }
}

//配置好后可直接使用命令 wabpack 来进行打包

使用 webpack-dev-server 这个工具来实现自动打包编译的功能

1.运行 npm install webpack-dev-server -D 把这个工具安装到项目的本地开发依赖

2.安装完毕后，这个工具的用法和 webpack 命令的用法完全一样

3.由于是在项目中本地安装的 webpack-dev-server， 所以，无法把它当做 脚本命令，在 powershell终端中直接运行 （只有那些 安装到 全局 -g 的工具，才能在 终端中正常运行）

4.注意： webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中，必须安装webpack

cnpm i webpack -D

在 package.json 文件 “scripts” 对象中添加命令

"dev": "webpack-dev-server"

npm run dev

5.webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到 实际的 物理磁盘上，而是直接托管到了 电脑的内存中，所以，我们在 项目根目录中，根本找不到 这个打包好的 bundle.js

6.我们可以认为，webpack-dev-server 把打包好的文件，以一种虚拟的形势，托管到了项目的根目录中，虽然看不到，但是可以任务 ，和 dist src node_module 平级，有一个看不见的文件 叫做 bundle.js

webpack-dev-server的常用命令参数

"scripts"