webpack4系列教程（一）：初识webpack

1. 什么是webpack

先来看看官网对webpack的介绍 ：

本质上， webpack是一个现代 JavaScript 应用程序的 静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个 依赖关系图(dependency graph)，其中包含应用程序须要的每一个模块，而后将全部这些模块打包成一个或多个 bundle。

简单来讲webpack就是一个JavaScript的打包器，将各类模块（module）打包成资源文件；还能够经过 Code Spliting 来把代码分离到不一样的 bundle 中，而后能够按需加载或并行加载这些文件；webpack 可使用 loader 来预处理文件，这容许你打包除了JavaScript 以外的任何静态资源。

官网首页很清晰的展现了webpack的主要功能：

​

咱们能够看到，一堆 modules 通过 webpack 打包处理成了各类静态资源。这就是 webpack

2. webpack核心概念

在开始学习 webpack 以前，你须要了解 webpack 的四个核心概念： 

• 入口（entry）
• 出口（output）
• loader
• 插件（plugins） 

 2.1 入口（entry）

入口指示 webpack 应该使用哪一个模块，来开始构建其内部依赖。进入入口后，webpack 会找出有哪些模块和库是与入口相依赖的。

咱们能够在webpack配置中配置entry属性，来设置一个或多个入口起点。如下是一个简单的entry配置：

const config = {
  entry: {
    main: 'path/to/your/entry/index.js'
  }
}
module.exports = config

2.2 出口（output）

 设置output是为了告诉webpack要在哪里输出其建立的bundle，而且能够对bundle命名。示例：

const path = require('path')
const config = {
  entry: {
    main: 'path/to/your/entry/index.js'
  }，  
  output: {
    filename:'[name].bundle.js',
    path: path.join(__dirname,'./dist')  
  }
}
module.exports = config

咱们经过 output.filename 来设置输出bundle的文件名， output.path 来设置 bundle 的输出路径 

 >path 是 nodeJs 中的核心模块，用来处理项目中的路径。

 2.3 loader

因为 webpack 只认识 JavaScript 代码，所以就须要借助其余方法来处理那些非 JavaScript 文件，如 css、image、font等。而 loader 能够将全部类型的文件处理成 webpack 可以识别的有效模块，而后再对其进行处理。

loader 中有两个重要属性：

1. test属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件，一般是一个正则表达式；
2. use属性，表示进行转换时，应该使用哪一个 loader；

const path = require('path')
 
const config = {
  entry: {
    main: 'path/to/your/entry/index.js'
  }，
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, './dist')
  },
  module: {
    loaders: [
      {
        test: /\.ejs$/,
        use: ['ejs-loader']
      }
    ]
  }
}
 
module.exports = config

以上示例中loader的配置至关于告诉webpack在遇到 .ejs 的文件时，在打包以前先用 ejs-loader 装换一下。

2.4 插件（plugins）

loader 被用于转换某些类型的模块，而插件则能够用于执行范围更广的任务。想要使用一个插件，你只须要require()它，而后把它添加到plugins数组中。多数插件能够经过选项(option)自定义。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') // 经过 npm 安装
 
const config = {
  entry: {
    main: 'path/to/your/entry/index.js'
  }，
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, './dist')
  },
  module: {
    loaders: [
      {
        test: /\.ejs$/,
        use: ['ejs-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'webpack demo',
      template: path.join(__dirname, './index.html')
    })
  ]
}
 
module.exports = config

HtmlWebpackPlugin 将为你生成一个 HTML5 文件， 其中包括使用script标签的 body 中的全部 webpack 包，webpack 提供提供了许多功能强大的插件，查阅插件列表获取更多插件的使用方法。