webpack - day03
命令运行
./node_modules/.bin/webpack
在 node_modules/.bin 目录下，存放着大量的cmd文件，运行 webpack 命令文件
package.json （npm 配置文件 npm init 生成）
scripts:{
"webpack1" : "./node_modules/.bin/webpack ",
"webpack2" :"webpack" // 方式二 与上面是等价的
}
npm run webpack2 ---> npm run 命令，处理路径 “./node_modules/.bin” + path
（scripts中使用 test start restart stop 命名，调用的的时候可以省略 “run” ， 即直接 npm start ）
npm start 构建的文件默认放在 ./dist 目录 （可以通过配置文件更改）
更直接的方式 npx
npx webpack 帮助我们我们定位命令到 “./node_modules/.bin” 目录下
（npm 使用文档 docs.npmjs.com ---> CLI documentation ） command line interface 使用文档
webpack及webpack.config.js
webpack命令在哪个目录下运行，会自动加载目录下的 webpack.config.js 文件；
webpack --config 指定加载配置文件路径、
webpack --help
loaders； 默认只处理 .js 类型的文件，如 图片 css html 等非js类型的文件需要不同的 loader 来实现
plugins： 主要是扩展 webpack 本身的一些功能，它们会运行在各种模块解析完成以后的打包编译阶段，比如文件的压缩等
特点： 功能的扩展 运行在打包编译阶段
webpack.config.js
const path = require("path");
module.exports = { // 抛出一个配置文件
mode: "development", --->默认 production
entry: { aa: "./src/aa.js", bb: "./src/bb.js" },
output: {
path: path.resolve( __dirname, "dist" ), --> 兼容各操作系统
filename: [name]-filename.[hash].js ---> [ hash ] [ chunkhash ] [ name ] [ id ] [ query ]
},
devtool: "source-map", // source-map 开启
}
模块标识符[ hash] [ id ] [ chunkhash ]chunk内容hash
当执行 ./node_modules/.bin/webpack 命令时，自动加载 webpack 配置文件。
webpack --config = configFileName
webpack --mode = development ( 在 development 模式运行 webpack )
webpackDevServer：
代码重新编译打包，刷新浏览器（编译后的代码存在内存中，并虚拟一个地址） ---> 不直接存在硬盘中，更新比较快
webpack-dev-server 提供了一个简单的 web server
npm install --save-dev webpack-dev-server
执行：
npx webpack-dev-server -----> 启动 web server
或 package.json 中 添加 scripts （并修改 webpack.config.js --> 添加 devServer）
module.exports = {
devServer:{
contentBase: "./dist", // 生成虚拟目标路径
open: true, // 自动开启浏览器
port: 8081, // 端口
proxy: { --> 内置了一个代理服务器，把跨域请求转发目标服务器上
"/api":{
target: "http://localhost:8087"
}
}
}
}
启动服务以后，webpack不再会把打包后的文件生成到硬盘真实目录了，而是直接存在了内存中
（同时虚拟了一个存放目录路径），后期更新编译打包和访问大大提升。
proxy: 开发环境下，前端开发过程中代码会运行在一个服务器环境下（webpack-dev-server）,
那么在处理一些后端请求的时候常会出现跨域的问题。
内置了一个代理服务器，把跨域请求转发目标服务器上（webpack-dev-server 内置的代理发送的请求属于后端 node，不受同源策略限制）
HMR webpack内置插件，热更新 --> Hot Module Replacement
不同于 live reload 刷新整个页面，无法保持页面操作状态.。( webpack-dev-server 提供了 live relaod )
HMR核心： 局部更新 或 模块更新，不刷新页面， 只更新变化的部分
（webpack 内置插件）
module.exports = {
devServer:{
contentBase: "/dist",
open: true,
port: 8081,
hot: true, ---> 开启热更新
hotOnly: true // 即使 HMR 不生效，也不刷新整个页面（选择开启）
},
plugins:[ new webpack.hotModuleReplacementPlugin() ] ----> 实例化插件
}
其他热更新：
css热更新， style-loader 中已经集成实现了， 我们只需要 use 中使用就可以了
React热更新 脚手架中集成
Vue热更新 脚手架中集成
执行简要流程：
entry ---> loaders ---> plugins ---> output
entry ---> loaders
loaders ---> plugins
plugins ---> output
Node.js API
webpack提供了 Node.js API，可以在 Node.js 运行时直接使用；
webpack仅仅负责编译的部分； const webpack = require("webpack"); const compiler = webpack({// 配置 }); ----> 获得一个编译实例
compiler.run(function( err , stats){
if( err || stats.hasError()){
// ...
}
})
