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

posted @ 2017-06-20 14:17  我是来搞笑的  阅读(230)  评论(0编辑  收藏  举报