打包 bundle 文件

内部就是实现了一个__webpack_require__函数，递归导入依赖关系

1. 新建项目，新建 bin 目录

#!/usr/bin/env node
const path = require('path')
const config = require(path.resolve('webpack.config.js'))
const Compiler = require('../lib/compiler')
new Compiler(config).start()

production 模块打包自带优化

1. tree shaking 打包时移除JS中未引用的代码，依赖于import和export的静态结构特性
2. scope hoisting 将模块之间的关系进行结果推测，让打包出来的代码文件更小、运行更快
3. 代码压缩 所有代码使用UglifyJsPlugin插件进行压缩、混淆

CSS 优化

mini-css-extract-plugin是用于将CSS提取为独立的文件的插件，对每个包含CSS的js文件都会创建一个CSS文件，支持按需加载CSS和sourceMap。异步加载，不重复编译，只针对CSS 安装 -D

html-withimg-loader

只需在html文件中正常引用图片即可，webpack会找到对应的资源进行打包并修改html中的引用路径 安装 添加 loader

rules: [
  {
    test: /\.(jpg|png|gif)$/i,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 5 * 1024,
          outputPath: 'images',
          name: '[name]-[hash:6].[ext]',
          esModule: false,
        },
      },
    ],
  },
  {
    test: /\.(htm|html)$/i,
    loader: 'html-withimg-loader',
  },
]

Webpack

一个基于 Node 的前端构建工具，可以实现对项目的打包，主要解决文件(模块)之间的依赖，文件(模块)和压缩等问题

• webpack <需要打包的文件路径> <输出文件的路径>
• webpack推荐在项目中安装-D，npm5.2以上版本使用npx命令执行
• webpack4.0之后可以实现0配置打包构建，0配置限制较多，无法自定义很多配置