webpack入门讲解（一）

webpack入门讲解

这篇文章，我们主要给大家讲解五个部分：entry、output、loader、plugins、mode，让大家对webpack有个大概的认识。

讲解今天的内容前，我们先看下webpack官网的一张图：

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。

entry(入口)

   entry简单来说就是webpack会把这个模块当做起点，然后找到这个模块所依赖的模块和 library，从而构建其内部依赖图。  

   一般我们在webpack 配置中配置 entry 属性： 例如:

module.exports = {
  entry: {
    app: './src/main.js'
  },
};

output(出口)

   output简单来说就是告诉webpack在指定的目录下输出的bundles，同时会给这些文件命名。  

   常见的配置如下：

const path = require('path');
module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-webpack.bundle.js'
  }
};

上面的配置中，参数说明：

output.filename作用：告诉 webpack bundle 的名称。

output.path作用： bundle 生成(emit)到哪里。 上面导入的 path 模块，它是一个 Node.js 核心模块，用于操作文件路径。本文不展开讲解。

loader

   为什么需要用到loader，原因是webpack 自身只支持 JavaScript。 loader 可以让 webpack 处理那些非 JavaScript 文件，而且会先将它们转换为有效 模块，然后添加到依赖图中，这样就可以提供给应用程序使用了。

常见的配置如下：

module: {
    rules: [
      { test: /\.md$/, use: 'text-loader' }
    ]
}

配置代码解析： 上面的配置是对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。 作用是： webpack 编译器(compiler) 解析到「 require()/import 语句中被解析为 '.md' 的路径」时，打包之前，先使用 text-loader 转换一下。”

plugins(插件)

   plugins使用的范围比loader更广，平时我们开发的过程中经常使用plugins包括：打包优化、资源管理和注入环境变量。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // npm install
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

配置代码解析：

 html-webpack-plugin 插件的作用：

是在应用程序中生成一个 html 文件，然后自动注入所有生成的 bundle。

mode

mode 参数包括： development,  production,  none。 我们可以启用对应环境下 webpack 内置的优化。

上面的讲解了webpack的常用配置，文末贴上本人的一点小小心得。

结语

   作为一名前端开发人员，我们需要不断update自己的技术栈，提高自己在这个行业的竞争力。我们需要横向去提高我们的眼界，纵向去提高我们的竞争力。