前端工程化之推开webpack世界的大门

前言

在前端开发领域已有四年多了，从第三年开始独立负责项目，到现在大大小小的项目已有很多，从刚开始的angular1.x到vuejs再到react，前端经常使用的三大框架都有接触。用过的人都知道这三个框架的使用都离不开webpack，从本地开发到线上部署，webpack给咱们带来了很大的方便，因此说精通webpack是现现在前端的必备技能之一。

wepback基本知识

先来张思惟导图，内容不太全后续会继续更新。

简单的说webpack就是一个模块打包器，可是它具有但功能不只仅是打包，图片压缩，语法转换，开发工具等等，总的说来webpack是前端工程师实现前端架构一个构建工具，有了webpack能让咱们前端架构更快更合理的实现。

功能

• 转换语法：如typescript/vue/jsx/es6等语法转换成浏览器识别的语法
• css预处理：
• 代码压缩混淆：提升了项目的性能以及代码的安全性（对比未混淆以前的项目混淆后源码至关于不可见）。
• 图片压缩
• 提高代码可维护性：代码更统一（如用eslint配合约束代码）。
• 提高开发效率：各类开发工具，方便前端工程师本地开发联调。

核心概念

• 入口：指示webpack应该使用哪一个模块，来做为构建其内部依赖图的开始。
• 输出：指示webpack在哪里输出它所建立的 bundles。
• loader：loader 让 webpack 可以去处理那些非 JavaScript 文件。
• 插件：webpack功能的扩展，能够用来处理各类各样的任务。

基本使用方式

初始化

• 安装nodejs
• 新建项目目录
• 初始化package.json

npm init
复制代码

• 安装webpack等相关依赖

配置

• 入口的配置,是在webpack.config.js的modules中的entry,定义wepack的入口文件

module.exports = {
  //入口文件的路径
  entry: './index.js'
};
复制代码

• 能够配置多入口

module.exports = {
  //入口文件的路径
  entry:{
     home: "./home.js",
     about: "./about.js",
     contact: "./contact.js"
  }
};
复制代码

• loader（module）配置,loader的配置是在webpack.config.js的modules中的test 属性，用于标识出应该被对应的 loader进行转换的某个或某些 文件。另外use 属性，表示进行转换时，应该使用哪一个 loader。

const path = require('path');

const config = {
  output: {
    filename: 'test.txt.bundle.js'
  },
  //loader定义
  module: {
    rules: [
    //test中能够传入正则来匹配
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;
复制代码

注：loader的做用简单来讲就是将本地文件（vue，jsx，ts）转换成浏览器识别的文件,即loader 用于对模块的源代码进行转换。

• plugin 配置插件,插件的配置是在webpack.config.js的plugins中的，例如：

plugins:[
        //自动生成html文件
        new HtmlWebpackPlugin({
            title: 'html management'
        }),
    ],
复制代码

注：插件主要是webpack功能的扩展，好比自动生成html，本地服务器...

• output配置文件输出路径,输出的配置是在webpack.config.js的modules中的output对象中,定义文件输出的位置，例如：

output:{
        filename:'[name].bundle.js',
        path:path.resolve(__dirname,'dist'),
        //该配置能帮助你为项目中的全部资源指定一个基础路径,正常会设置为根目录
        publicPath:'/'
    },
复制代码

• resolve配置模块解析，这些选项能设置模块如何被解析。resolver是一个库(library)，用于帮助找到模块的绝对路径。一个模块能够做为另外一个模块的依赖模块，而后被后者引用。灵位resolve有如下经常使用属性：

//1.ailas：建立 import 或 require 的别名，来确保模块引入变得更简单
//2.extensions：自动解析肯定的扩展。默认值为[".js", ".json"]
//3.modules：告诉 webpack 解析模块时应该搜索的目录。
//4.plugin：应该使用的额外的解析插件列表。
resolve:{
    ailas:{
        component:path.resolve(__dirname, 'src/component/')
    },
    extensions:[".json",'.jsx','.js'],
    module:['node_modules'],
    plugins:[
    //提供全局的变量，在模块中使用无需用require引入
    new webpack.ProvidePlugin({
      $: "jquery"
    })
    ]
}
复制代码

运行

• 为了方便开发，咱们会根据当前环境设置不一样的配置文件（或者同一个文件设置不一样的配置内容），而后在package.json的scripts中设置相关命令，例如：

scripts:{
    "start":"webpack --config webpack.dev.conf.js",
    "build":"webpack --config webpack.conf.js"
}
复制代码

webpack相关

targets

由于服务器和浏览器代码均可以用js编写，因此webpack提供了多种构建目标(target)，经常使用的有web（默认值） node。其余目标类型请查看文档

//编译为类 Node.js 环境可用（使用 Node.js require 加载 chunk）
    target:'node'
    //自定义目标，能够传入个函数经过插件来自定义目标
    target: (compiler) => {
    compiler.apply(
      new webpack.JsonpTemplatePlugin(options.output),
      new webpack.LoaderTargetPlugin("web")
    );
  }
复制代码

devtool的设置

此选项控制是否生成，以及如何生成 source map。默认为false,经常使用的配置有：soure-map inline-source-map 其余 devtool属性 请查看文档

//不生成原始源代码的source.map.*文件，而是合并到bundle文件中
devtool:"inline-source-map"
//生成一份包含原始源代码.source.map.*文件
devtool:"source-map"
复制代码

externals

此配置选项提供了「从输出的 bundle 中排除依赖」的方法 。即当须要引用一个库，可是又不想被打包，而且又不影响咱们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就能够经过配置externals。，例如：

//html中
<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>
//配置中能够这样设置：表示应该排除 import $ from 'jquery' 中的 jquery 模块。
externals: {
  jquery: 'jQuery'
}
//代码中正常的使用
import $ from 'jquery'
复制代码

经常使用npm包介绍

若是想要精通webpack，那掌握nodejs基础是咱们绕不过的坎，一下几个npm包和node api我的认为必需要会使用的：

• path

//链接文件路由使其成为绝对路径
path.resolve(__dirname,'index.js')
复制代码

• fs：文件的读取/复制/删除/新建等操做
• inquirer：交互式命令包
• chalk：console输出字体颜色的设置

经常使用插件

• HtmlWebpackPlugin：生成html文件
• CleanWebpackPlugin:清除上一次生成的文件
• WebpackDevServer：本地服务启动
• EnvironmentPlugin：设置环境变量的值
• HotModuleReplacementPlugin：模块热替换插件

本节只是简单介绍下经常使用的插件，关于插件我会用单独的一章来介绍。详细文档请查看

总结

随着前端工程化的发展，webpack的使用熟练与否也成为了判断是不是一名合格的前端开发的标准之一，经过对webpack进一步的学习是我了解了他不只仅是一个前端打包工具。本系列文章是本身对webpack一些浅显的认识。