webpack入门认知

webpack 是什么？

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

主要概念，及作用，及使用方式？

主要概念：entry，output，loader，plugins

 

entry（输入）：

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

指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

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

在entry中可以配置多个入口（多页面应用），使用CommonsChunkPlugin可以为每个页面间的应用程序共享代码创建bundle，多页应用能够复用入口起点之间的大量代码/模块。

 

output（输出）：

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。

output的属性是一个包含filename，path 的对象

• filename ：输出文件的文件名

• path：目标输出目录的绝对路径

用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用占位符(substitutions)来确保每个文件具有唯一的名称

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js', // 确保每个文件具有唯一的名称
    path: __dirname + '/dist'
  }
}

 

loader

loader 用于对模块的源代码进行转换，更加灵活地引入细粒度逻辑，例如压缩、打包、语言翻译。。。

三种使用方式：

• 配置（推荐）：在 webpack.config.js 文件中指定 loader。

• 内联：在每个 import 语句中显式指定 loader。

• CLI：在 shell 命令中指定它们。

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

 

plugins（插件）：

插件目的在于解决 loader 无法实现的其他事，webpack 插件是一个具有 apply 属性的 JavaScript 对象。

插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例

 const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
 plugins: [
   new HtmlWebpackPlugin({template: './src/index.html'})
 ]