【前端】webpack

一 Webpack概念

静态模块打包器，当Webpack处理程序时，它会构建一个包含应用程序所有模块的依赖关系图，然后将它们打包成一个或多个bundle。
从Webpack4.0开始，我们可以不引入配置文件，但它依旧是高度可配置的。
webpack处理文件的过程可以分为两个维度：文件间的关系和文件的内容。文件间的关系处理，主要是通过文件和模块标记方法来实现；文件内容的处理主要通过loaders和plugins来处理。

二 入口

入口(一个或多个)即依赖关系图的开始，webpack会找到和其直接或者间接依赖的，输出到bundles文件中。

1.单个入口简写语法(灵活性差)

entry: string|Array<string>

例如:

module.exports = {
  entry: './path/to/my/entry/file.js'
};

• 暂时还不理解下面的:
  当你向 entry 传入一个数组时会发生什么？向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时，传入数组的方式就很有用。

2. 对象语法(扩展性好)

entry: {[entryChunkName: string]: string|Array<string>}

例1 分离 应用程序(app) 和 第三方库(vendor) 入口

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

• 不理解:
  这是什么？从表面上看，这告诉我们 webpack 从 app.js 和 vendors.js 开始创建依赖图(dependency graph)。这些依赖图是彼此完全分离、互相独立的（每个 bundle 中都有一个 webpack 引导(bootstrap)）。这种方式比较常见于，只有一个入口起点（不包括 vendor）的单页应用程序(single page application)中。
  为什么？此设置允许你使用 CommonsChunkPlugin 从「应用程序 bundle」中提取 vendor 引用(vendor reference) 到 vendor bundle，并把引用 vendor 的部分替换为 webpack_require() 调用。如果应用程序 bundle 中没有 vendor 代码，那么你可以在 webpack 中实现被称为长效缓存的通用模式。

例2 多页面应用程序

const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

• 不理解:
  这是什么？我们告诉 webpack 需要 3 个独立分离的依赖图（如上面的示例）。
  为什么？在多页应用中，（译注：每当页面跳转时）服务器将为你获取一个新的 HTML 文档。页面重新加载新文档，并且资源被重新下载。然而，这给了我们特殊的机会去做很多事：
  使用 CommonsChunkPlugin 为每个页面间的应用程序共享代码创建 bundle。由于入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益。
  根据经验：每个 HTML 文档只使用一个入口起点。

三 输出(output)

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件,输出只有一个。包含以下两点:
⑴filename:文件名
⑵path:绝对路径
例子1:

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};
module.exports = config;

此配置将一个单独的 bundle.js 文件输出到 /home/proj/public/assets 目录中。
例子2:
如果配置创建了多个单独的 “chunk”（例如，使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

四 Chunk

chunk是一个很重要的概念，所以这里单独拿出来说明一下。
就是打包后的代码块的意思，chunkname就是打包后代码的名字。

五 模式(mode)

告诉package使用相应的模式优化。
待研究

六 loader

webpack只能打包js文件。因此像css文件等就需要loader将资源转化，加载进来。
我们先需要通过命令行安装loader:

npm install --save-dev css-loader
npm install --save-dev ts-loader

然后通过配置文件的方式对每个 .css 使用 css-loader，以及对所有 .ts 文件使用 ts-loader：

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

七 插件

想像一下，你使用 webpack 将你的文件 bundle 在一起，然后你发现到 bundle 后的结果是 900KB。这是个问题，但是你可以通过 minify 你的 bundle 文件来做改善。要做到这一点，可以使用UglifyJsPlugin plugin。

// webpack.config.js
var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: ['./src/index'],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },

  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      },
    })
  ]
}

常用插件

八 targets

webpack可以为js的各种不同的宿主环境提供编译功能，为了能正确的进行编译，就需要开发人员在配置里面正确的进行配置。

默认情况下，target的值是web，也就是为类浏览器的环境提供编译。
target的具体常用值可以去网上查。