menu
more_vert

webpack核心概念

作者:dayu

一、webpack四个核心概念


1、入口【Entry】

webpack将创建所有应用程序 依赖关系图表。图表的起点被称之为 入口起点。入口起点告诉webpack从哪里开始,并遵循着依赖关系图表知道打包什么。可以将您的应用入口起点认为是跟上下文或app的第一个启动文件。

const config = {
  entry: {
    app: ‘./src/app.js‘
  }
}

module.exports = config;
2、出口【Output】

将所有资源打包在一起,仍然告诉webpack在哪里打包我们的应用,即将打包资源输出到什么地方。

const config = {
  entry: {
    app: ‘./src/app.js‘
  },
  output: {
    filename: ‘webpack.bundle.js‘,
    path: ‘./dist‘
  }
}

module.exports = config;
3、加载器【Loader】

webpack的目标是,让项目中的所有资源都成为webpack的关注点,而浏览器不需要考虑这些(这并不意味着资源都必须打包在一起)。webpack把每个文件(.css, .html, .scss, .jpg, .etc)都作为模块处理。然而webpack只了解JavaScript,所有需要加载器来处理其它类型的文件。
因为文件已被添加到了依赖图表,所有webpack加载器会将这些文件转换为模块。
loader属性要实现的两个目标:
(1)识别出应该被特定的加载器转换的文件;
(2)转换能够被添加到依赖图表的文件(并且最终打包)

const config = {
  entry: {
    app: ‘./src/app.js‘
  },
  output: {
    filename: ‘webpack.bundle.js‘,
    path: ‘./dist‘
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loader: ‘babel-loader‘
      },
      {
        test: /\.css$/,
        loaders: [‘style‘, ‘css‘]
      }
    ]
  }
}

module.exports = config;

loader的两个必选属性test和loader告诉了webpack如下行为:webpack编译器,当你碰到在require()/import语句中被解析为.js.jsx的路径时,在你把它们添加并打包之前,要先使用babel-loader去转换。同理,css也是这个样子,只不过使用的loader模块不同。

4、插件【Plugins]

加载器仅基于单个文件执行转换,插件最常用于(但不限于)在打包模块的“编译”和“组块”时执行操作和自定义功能。webpack的插件系统极其强大和可定制。
为了使用插件,需要require它们,并且把它们添加到plugins数组。多数插件可以通过potion来自定义。由于你可以在一个配置多次使用插件用于不同的目的,因此你需要使用new来创建插件的实例,并且调用插件。

const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
const htmlWP = new HtmlWebpackPlugin({template: ‘./src/index.html‘});
const config = {
  entry: {
    app: ‘./src/app.js‘
  },
  output: {
    filename: ‘webpack.bundle.js‘,
    path: ‘./dist‘
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loader: ‘babel-loader‘
      },
      {
        test: /\.css$/,
        loaders: [‘style‘, ‘css‘]
      }
    ]
  },
  plugins: [
    htmlWP
  ]
}

module.exports = config;

二、webpack解析三种文件路径

(1)绝对路径
(2)相对路径
(3)模块路径

webpack核心概念

原文地址:http://www.cnblogs.com/zhumingzhenhao/p/7239742.html