webpack2入门概念

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

Entry

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

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

　　

__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对文件进行解析，以后将解析完成的文件视为标准化模块统一处理。

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

Plugins

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

onst 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引入。