webpack 笔记

1.前言

webpack 可以做到 多入口；

• 安装
• 资源管理：加载css 图片 字体文件 数据 全局资源
• 资源输出： 设定 HtmlWebpackPlugin；解决入口文件名称变更，index。html依旧用旧的名称的问题
• 清理/dist文件夹
• 开发：
  追踪到错误和警告在源代码中的原始位置source map
  自动编译代码
  自动刷新
  模块热替换：运行时局部刷新HMR loader

---

2.明白几个环境

开发环境(development)、生产环境(production)、
在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。
在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。

3.安装

save-g 全局安装
--save 局部安装，运行依赖；发布后还需要依赖的模块 添加到 package.json 文件 dependencies 键下
--save-dev 局部安装，开发依赖。发布后用不上。 则添加到 package.json 文件 devDependencies 键下
例如：

npm install --save-dev html-webpack-plugin
npm install clean-webpack-plugin --save-dev
npm install --save-dev express webpack-dev-middleware // 安装 express 和 webpack-dev-middleware

正常使用npm install时，会下载dependencies和devDependencies中的模块，
当使用npm install --production或者注明NODE_ENV变量值为production时，只会下载dependencies中的模块。

4.source map

source map，将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。

5.webpack-dev-server

每次要编译代码时，手动运行 npm run build 就会变得很麻烦。
webpack 中有几个不同的选项，

webpack's Watch Mode
webpack-dev-server
webpack-dev-middleware

webpack "watch" 可以帮助你在代码发生变化后自动编译代码代码发生变化后自动编译代码。
webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。
webpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。 例如： webpack-dev-middleware 配合 express server

学会了如何自动编译代码，并运行一个简单的开发服务器(development server)，

6.自动编译

"watch": "webpack --watch", // 指示 webpack "watch" 依赖图中的所有文件以进行更改。如果其中一个文件被更新，代码将被重新编译，所以你不必手动运行整个构建。

7.运行webpack

"build": "webpack" // 使用 npm run build 命令，来替代我们之前使用的npx webpack src/index.js --output dist/bundle.js或者 npx webpack --config webpack.config.js

8.tree shaking --精简输出

移除 JavaScript 上下文中的未引用代码(dead-code)
它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。
我们可通过 import and export 语法，标识出了那些“未引用代码(dead code)”，
但从 bundle 中删除它们。要添加一个插件工具 - UglifyJSPlugin

npm install --save-dev uglifyjs-webpack-plugin

工程类：

1.webpack 打包后，如何访问项目。

https://www.cnblogs.com/camil...