webpack核心概念

一、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）模块路径