faker-webpack-demo v1.0.0

1、webpack命令默认使用webpack.config.js文件，可以通过--config webpack配置文件名 来进行打包

2、npm的scripts和npx作用一样，可以通过模块名引用本地安装的npm包

3、npm run build -- --colors 通过向npm run build命令和你的参数之间添加两个中横线，可以将自定义参数传递给webpack

4、webpack会动态打包所有依赖项，创建依赖图，这样的好处是所有模块都可以明确表述自身的依赖，避免打包未使用的模块

5、webpack除了JS以外，还可以通过loader引入任何其他类型的文件

6、webpack通过正则表达式来查找对应的文件并将这些文件提供给指定loader

7、在多数情况下，可以进行css分离，以便在生产环境中节省加载时间。现有的loader可以支持任何你可以想到的css处理器风格 postcss sass less

8、使用file-loader来处理图片及图标，打包之后的图片将被添加到output目录。 import MyIcon form './icon.png', MyIcon将包含icon.png被file-loader处理之后的最终url地址。

9、如何压缩和优化图像？ image-webpack-loader 和 url-loader

10、file-loader和url-loader可以接收并加载任何文件，然后将其输出到构建目录。（包括像字体这样的其他资源）

11、类似于NodeJS,JSON支持实际上是内置的，也就是说 import Data from './data.json' 默认将正常运行

12、要导入CSV、TSV和XML，可以使用csv-loader和xml-loader

13、import Data from './data.xml' Data为可直接使用的JSON对象

14、在使用d3等工具来实现数据可视化的时候，预加载数据会非常有用。我们不用再发送ajax请求并在运行时解析数据，而是在构建过程中将数据提前载入并打包到模块中，以便浏览器加载模块后可以立即从模块中解析数据。

15、这种配置方式会使你的代码更具备可移植性，因为现有的统一放置的方式会造成所有资源紧密耦合在一起。假如你想在另一个项目中使用 /my-component，只需将其复制或移动到 /components 目录下。只要你已经安装了任何扩展依赖(external dependencies)，并且你已经在配置中定义过相同的 loader，那么项目应该能够良好运行。

• |- /assets

• |– /components
• | |– /my-component
• | | |– index.jsx
• | | |– index.css
• | | |– icon.svg
• | | |– img.png

16、name.bundle.js name表示入口起点名称

17、HtmlWebpackPlugin 会默认生成index.html文件，并将所有的bundle文件自动添加到html文件中

18、clean-webpack-plugin 用于每次构建前清除dist目录，这样做可以只生成用到的文件，比较推荐

19、使用webpack构建的典型应用程序中，主要有三种类型代码： （1）开发源码 （2）依赖的第三方library或'vendor' （3）webpack的runtime和manifest，管理所有模块的交互

20、Runtime主要是指在浏览器运行时，webpack用来连接模块化应用程序的所有代码。runtime包含：在模块交互时，连接模块所需的加载和解析逻辑。包括浏览器中已加载模块的连接以及懒加载模块的执行逻辑

21、Manifest Webpack通过Manifest数据来管理所有模块之间的交互。当编译器开始执行、解析和映射应用程序时，它会保留所有模块的详细要点。这个数据集合称为manifest，当完成打包并发送到浏览器时，会在运行时通过manifest来解析和加载模块，无论你选择哪一种模块语法，那些import或者require语句都已经转换为webpack_require方法，此方法指向模块标识符，通过使用manifest中的数据，runtime能够查询模块标识符，检索出背后对应的模块。

22、Source Map 用于将编译后的代码映射到源代码

23、实现在代码发生变化时自动编译方法： （1）webpack --watch 监听依赖图中的所有文件，如果一个文件被更新，则代码将被重新编译 （2）webpack-dev-server使得在代码修改后重新编译并自动刷新浏览器,在webpack.config.js中配置devServer: { contentBase: './dist' } ，告知webpack-dev-server，在localhost:8080下建立服务器，将dist目录下的文件作为可访问文件 (3)webpack-dev-middleware 是一个容器，它可以把webpack处理后的文件传递给一个服务器。webpack-dev-server在内部使用了webpack-dev-middleware,同时，webpack-dev-middleware可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多需求

24、webpack-dev-middleware + express

(1)webpack.config.js中 output: { publicPath: '/' } publicPath 也会在服务器脚本用到，以确保文件资源能够在localhost:3000下正确访问

25、模块热替换（HMR） 会在应用程序运行过程中替换、添加或删除模块，而无需加载整个页面。好处如下：

（1）保留在完全加载页面时丢失的应用程序状态 （2）只更新变更内容，节省开发时间 （3）调整样式更加快速，相当于在浏览器调试器中更改样式

26、模块热更新只适用于开发环境，不适用于生产环境。开启HMR的时候建议使用NamedModulesPlugin插件，该插件的作用是显示模块的相对路径

27、使用HotModuleReplacementPlugin启用模块热替换之后，它的接口会暴露在module.hot属性下面

28、Tree Shaking用于描述移除JS上下文中未引用的代码。Tree Shaking依赖于ES6中的静态结构特性。它兴起于ES6的模块打包工具rollup

29、sideEffects属性向webpack编译器提供哪些文件无副作用。如果所有代码都不包含副作用，我们就可以简单地将该属性标记为false,来告知webpack可以进行未引用代码的删除。如果你的代码确实有一些副作用，那么可以改为提供一个数组来标明哪些文件含有副作用，这样webpack就不会对指定文件进行Tree Shaking操作

{
    name: '',
    sideEffects: [
        './src/some-side-effectful-file.js',
        '*.css'
    ]
}
  数组方式支持相关文件的相对路径、绝对路径和 glob 模式。它在内部使用 micromatch

30、副作用的定义：在导入时会执行特殊行为的代码，而不仅仅是暴露一个export或多个export,如：polyfill，它影响全局作用域，并且通常不提供export

31、使用UglifyJsPlugin插件对bundle.js进行Tree Shaking。可以通过如下几种方式来启用UglifyJsPlugin

(1)配置mode: production
(2)命令行接口中使用 --optimize-minimize

32、Tree Shaking三步：

（1）使用ES6 import/export
（2）在package.json文件中，添加一个sideEffects入口
（3）引入一个删除未引用代码的压缩工具

33、开发环境和生产环境的构建目标差异很大，需要做逻辑区分，同时抽离出两者公共逻辑代码。在生产环境中关注于更小的bundle、更轻量的source map以及更优化的资源以改善加载时间。

34、避免在生产环境中使用值为inline-和eval-,因为它们可以增加bundle的大小，并降低整体性能。

35、许多library通过与process.env.NODE_ENV环境变量关联，以决定library应该引用哪些内容。例如： 当不出与生产环境时，某些library为了调试变得容易，可能会添加额外的日志记录和测试。当使用process.env.NODE_ENV === 'production'时，一些library可能针对具体用户的环境进行代码优化，从而删除或者增加一些重要的代码。我们可以使用webpack内置的DefinePlugin为所有的依赖定义这个变量

36、NODE_ENV是一个由Node.js暴露给执行脚本的系统环境变量，通常用于决定在开发环境与生产环境下服务器工具、构建脚本和客户端library的行为。

这里需要注意的是在webapck的配置文件中无法使用process.env.NODE_ENV,例如 process.env.NODE_ENV === 'production' ? 'name.hash.bundle.js' : 'name.bundle.js', 原因：NODE_ENV is set in the compiled code, not in the webpack.config.js file

还需要注意 任何位于/src的本地代码都可以关联到process.env.NODE_ENV环境变量

37、代码分离就是将代码分离到不同的bundle中，然后可以按需加载或并行加载这些文件。 代码分离用于获取更小的bundle，以及控制资源加载优先级，如果使用合理会极大的优化加载时间。

38、三种常用的代码分离方法：（1）入口起点：entry 配置手动地分离代码 （2）防止重复 使用CommonsChunkPlugin去重和分离chunk （3）动态导入：通过模块的内联函数调用来分离代码

39、入口起点：entry配置缺点

entry: { app: './src/index.js', another: './src/another.js' } （1）如果入口文件之间引入重复的模块，那些重复模块都会被引入到各个bundle中

（2）这种方法不够灵活，并且不能将核心应用程序逻辑进行动态拆分

40、CommonsChunkPlugin用于移除重复的模块，抽取出公共部分。但是由于它无法进一步优化，目前已经被移除，改为使用

optimization: { splitChunks: { chunks: 'all', minChunks: 2, } }, 推荐的代码分离插件：bundle-loader 用于分离代码和延迟加载生成的bundle promise-loader 类似于bundle-loader，但是使用的是promises

41、对于动态代码拆分，webpack提供了两种技术：

（1）ES6的import() 这里需要注意的是由于webpack4本身不支持import动态加载，建议使用babel-plugin-dynamic-import-webpack来解决 (2) webpack特定的require.ensure

42、output.chunkFilename 用于定义非入口chunk的名称，可以通过webpackChunkName来覆盖chunkFileName定义的名称

43、利用webpack-bundle-analyzer等插件对输出结果进行分析。 webpack-chart 数据交互饼图 webpack-visualizer 可视化并分析bundle，检查哪些模块占用空间，哪些可能是重复使用的 webpack-bundle-analyzer 一款分析 bundle 内容的插件及 CLI 工具，以便捷的、交互式、可缩放的树状图形式展现给用户。

44、注意当调用ES6模块的import()方法引入模块时，必须指向模块的.default值，因为它才是promise被处理后返回的实际的module对象

45、懒加载是一种很好的优化网页的方式，这种方式实际上是先把你的代码在一些逻辑断点处分开，然后在一些代码块中完成某些操作后立即引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了代码总体体积。

46、在使用webpack时，要确保webpack编译生成的文件能够被客户端缓存，而文件内容发生改变后能够请求到新的文件。配置方法如下：

（1）通过使用output.filename进行文件名替换，可以确保浏览器获取到修改后的文件 
    [hash] 替换可以用于在文件名中包含一个构建相关的hash
    [chunkhash]替换在文件名中包含一个chunk内容相关的hash (推荐) 使用这种替换时，chunk内容发生变化时hash值也会变化，就算不变化有时hash也会变，这是因为webpack在入口chunk中包含了webpack 运行时的引导代码

47、提取manifest和样板 webpack4通过配置optimization.runtimeChunk选项中进行配置

48、SplitChunksPlugin 默认情况下只影响按需模块，因为如果改变初始模块会影响运行在项目中的html文件应包含的script标签。

49、SpitChunksPlugin 默认根据以下条件自动分割块

（1）被共享的或者来自node_modules目录中的模块
（2）在压缩（min+gz）前体积大于20kb的模块
（3）按需加载块时的最大并行请求数小于或等于30的时候
（4）初始页面加载时的最大并行请求数小于或等于30的时候

当试图满足最后两个条件时，更大的块是首选的

50、splitChunks的cacheGroups选项可以继承或覆盖splitChunks的任何选项

51、使用HashedModuleIdsPlugin插件解决hash频繁变动的问题

52、webpack不推荐使用全局的东西，webpack的整个概念就是让前端开发更加模块化。也就是说需要编写具有良好的封闭性、彼此隔离的模块，以及不要依赖于那些隐藏的依赖模块。（例如： 全局变量）

53、对于全局变量，利用ProvidePlugin进行shimming,它可以让每个模块中通过一个变量来获取到包。如果变量在某一个模块中被使用了，那么webpack在编译的时候会将该模块引入最终bundle内。也可以通过ProvidePlugin暴露某个模块中的单个导出值，只需通过一个数组路径进行配置

54、一些模块依赖的this指向的是window对象，但是当模块运行在CommonJS环境下，this就指向了module.exports，针对这种问题可以使用imports-loader覆写this

55、使用exports-loader将一个全局变量作为一个普通的模块来导出