webpack2.+入门概念

webpack2.+

webpack核心概念

webpack是一种JavaScript应用模块化打包工具，它配置起来简单易上手，因此很多企业工程化代码都使用它来打包。在具体介绍如何使用webpack之前，先来介绍下webpack的四个核心概念。

Entry

Entry是webpack的入口，简单来讲，你可以想象成webpack会为JavaScript应用的依赖关系维护一个复杂的图，而entry则是这个图的入口，它会告诉webpack从哪里开始打包你的项目，并且打包什么（where and what）。
Entry在webpack的配置文件中通过entry属性定义，一个最简单的定义如下：

module.exports = {
  entry: __dirname+'/index.js'
};

tips：

• __dirname是项目的根目录

Output

通过entry你已经可以开始打包模块化的JavaScript项目，但是webpack还不知道如何打包，例如打包出来的文件如何命名，打包出来的文件放在哪里等等。
上述问题都通过webpack配置文件的output属性来定义，其语法如下：

module.exports = {
  entry: __dirname+'/index.js',
  output: {
    path: __dirname+'/dist',
    filename: 'bundle.js'
  }
};

webpack在即将开始打包的时候读取上面的配置文件，从根目录下的index.js开始打包，打包出来的文件命名为bundle.js，并将其放在根目录的dist文件夹里。

Loaders

webpack会将JavaScript项目里的文件全部视为模块（module），但是webpack自身只能识别js，因此不同的文件(.css, .html, .styl, .jpeg, etc.)需要不同的解析器。Loaders在webpack中的作用就是将JavaScript项目中的不同文件解析成模块，以便于不同文件能够在项目中统一处理。
loaders在webpack配置文件中语法规则如下：

const config = {
  entry: __dirname+'/index.js',
  output: {
    path: __dirname+'/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {test: /\.css$/, use: 'css-loader'}
    ]
  }
};

module.exports = config;

在上面的配置文件中我们定义了rules属性，它有两个子属性.test和.use。值得一提的是，当你定义rules的时候，必须定义在module.rules下面而非直接定义rules，否则webpack的语法检查会报错。
新增的rules规则告诉了编译程序，当碰到以.css结尾的文件并且是通过require或者import引入的时候，首先使用css-loader对文件进行解析，之后将解析完成的文件视为标准化模块统一处理。

tips：

• *-loader需要先安装才可使用
• 此处loaders语法规则为webpack2.+的语法规则，老版本的语法规则不同。

Plugins

配置了以上三个属性之后，webpack已经可以对简单项目进行正常打包了。但是对于打包过程中的不同需求，webpack提供了Plugins功能，它可以满足很多个性化需求。例如，我想要对webpack打包的文件进行压缩，那么可以引入具有压缩功能的插件，代码如下。

const webpack = require('webpack'); 

const config = {
  entry: __dirname+'/index.js',
  output: {
    path: __dirname+'/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {test: /\.css$/, use: 'css-loader'}
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin()  ]
};

module.exports = config; 

为了使用相应的插件，我们需要现将插件进行require，由于压缩是webpack内部的插件因此直接require就可以，如果是一些第三方插件，需要先安装，安装之后再通过require引入。