webpack（2）webpack核心概念

前言

  本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。接下来我们就会使用webpack来进行打包
 

webpack的概念

在开始前我们需要先理解一些核心概念：

• 入口(entry)
• 输出(output)
• loader
• 插件(plugin)
• 模式(mode)
• 浏览器兼容性(browser compatibility)
• 环境(environment)
   

入口(entry)

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

默认值是 ./src/index.js，但你可以通过在 webpack.config.js 文件中配置 entry 属性，来指定一个（或多个）不同的入口起点。例如：

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

 

单个入口（简写）语法

entry 属性的单个入口语法，参考下面的简写：

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

 

我们也可以将一个文件路径数组传递给 entry 属性，这将创建一个所谓的 "multi-main entry"。在你想要一次注入多个依赖文件，并且将它们的依赖关系绘制在一个 "chunk" 中时，这种方式就很有用。

// webpack.config.js
module.exports = {
  entry: ['./src/file_1.js', './src/file_2.js'],
  output: {
    filename: 'bundle.js',
  },
};

总结：当你希望通过一个入口为应用程序或工具快速设置 webpack 配置时，单一入口的语法方式是不错的选择。然而，使用这种语法方式来扩展或调整配置的灵活性不大。
 

对象语法

module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js',
  },
};

对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式。

对象可以使用如下属性：

• dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。
• filename: 指定要输出的文件名称。
• import: 启动时需加载的模块。
• library: 指定 library 选项，为当前 entry 构建一个 library。
• runtime: 运行时 chunk 的名字。如果设置了，就会创建一个以这个名字命名的运行时 chunk，否则将使用现有的入口作为运行时。
• publicPath: 当该入口的输出文件在浏览器中被引用时，为它们指定一个公共 URL 地址。

// webpack.config.js
module.exports = {
  entry: {
    a2: 'dependingfile.js',
    b2: {
      dependOn: 'a2',
      import: './src/app.js',
    },
  },
};

 

输出(output)

可以通过配置 output 选项，告知 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个 entry 起点，但只能指定一个 output 配置。
 

用法

在 webpack 配置中，output 属性的最低要求是，将它的值设置为一个对象，然后为将输出文件的文件名配置为一个 output.filename：

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

此配置将一个单独的 bundle.js 文件输出到 dist 目录中。
 

多个入口起点

如果配置中创建出多于一个 "chunk"（例如，使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。

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

// 写入到硬盘：./dist/app.js, ./dist/search.js

 

loader

什么是loader?

• loader是webpack中非常核心的一个概念
• webpack用来做什么？
  • 在我们之前的实例中，我们主要是用webpack来处理js代码，并且webpack会自动处理js中的依赖
  • 但是，在开发中我们不仅仅有js代码要处理，我们也需要加载css、图片，也包括一些高级的将es6转成es5的代码，将Ts转成es5的代码，将scss、less转成css代码等等
  • 对于webpack本身的能力来说，对于这些转化是不支持的
  • 但是我们给webpack扩展对应的loader即可
• loader的使用过程
  • 步骤一：通过npm安装对应使用的loader
  • 步骤二：在webpack.config.js中的modules关键字进行配置
• 大部分loader我们都可以在官网中找到，并学习对应的用法