Webpack构建工具

Webpack是什么？

根据Webpack中文网给出的概念，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

接下来我们看看Webpack都有哪些配置项

entry(入口)

概念

entry(入口)是指Webpack从哪个模块开始枸建bundle，也就是说是bundle构建的起点。
配置

一般Webpack的配置内容都放在webpack.config.js文件下，下面的例子是一个简单的配置，一般情况入口文件可能会有多个，这里要注意一下多个entry(入口)的情况。

module.exports = {
    entry: './path/to/my/entry/file.js' // 入口文件的目录
}

output(输出)

概念

output(输出)是指Webpack构建完成bundle之后，最终输出的目录。
配置

同样也是在webpack.config.js文件下。

module.exports = {
    output: {
        path: path.resolve(__dirname, 'dist'), // 输出的bundle文件的目录
        filename: 'my-first-webpack.bundle.js' // 输出的bundle文件名称
    }
}

上面的代码简单是呈现了Webpack中output(输出)的配置，output.filename指定了最终生成的bundle的文件名称，output.path指定了终生成的bundle的目录。关于更多output配置可以查看这里。

loader

概念

loader主要是让Webpack能够处理一些非js的文件，比如.css、.jpg、.txt...，（因为Webpack只能识别JavaScript）
配置

同样也是在webpack.config.js文件下。 webpack 的配置中 loader 有两个主要的属性，分别是test和use。test一般是标识那些需要转换的文件，比如上面所说的.css、.jpg、.txt...；use一般是转换上面这些文件需要的loader；比如转换.css需要使用css-loader。下面我们看一个简单的配置：

module.exports = {
    module: {
        rules: [
            { test: /\.txt$/, use: 'raw-loader' }
            { test: /\.css$/, use: 'css-loader' }
        ]
    }
}

上面的配置中，对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use，这段配置的意思就是告诉Webpack编译器如果遇到.txt类型的文件，就使用raw-loader转换一下。关于更多loader配置可以查看这里。

plugins(插件)

概念

plugins(插件)webpack的支柱功能，目的在于解决loader无法实现的其他事情，比如打包优化和代码压缩。
配置

如果想使用一个plugins(插件)，只需要require()它，然后把它添加到plugins数组中。

var MpvuePlugin = require('webpack-mpvue-asset-plugin');
module.exports = {
    module: {
        rules: [
            { test: /\.txt$/, use: 'raw-loader' }
            { test: /\.css$/, use: 'css-loader' }
        ]
    }
    plugins: [
        new MpvuePlugin()
    ]
}

上面代码中列出了一个简单的插件，关于更多的Webpack插件可以在查看这里。

除了上面几个Webpack配置项外，我们在开发中经常还会遇到resolve、targets这两个属性，那这两个属性具体有什么作用呢？下面我们一起来看看

resolve(解析)

我对resolve理解用来配置路径的规则，使之变得简单明了。

我们不妨来看看resolve的一些属性

resolve.alias

概念

创建 import 或 require 的别名，来确保模块引入变得更简单。
配置demo

resolve: {
    alias: {
      '@': resolve('src'),
      "tuike": resolve("src/tuike"),
      "styles": resolve("src/styles"),
      "utils": resolve("src/utils"),
      "components": resolve("src/components"),
      "adapter": resolve("src/adapter"),
    },
  },

有了上面的配置，我们在开发的过程中如果需要引入一个components下的文件，直接就可以写成：

import Home from '@/components/xxx';

resolve.extensions

概念

自动解析确定的扩展。
配置demo

resolve: {
    extensions: [".js", ".json"]
  }

使用了extensions使得开发者在引入模块时可以不带扩展:

import File from '../path/to/file'

关于更多的resolve属性的用法，可以查看这里。

targets(构建目标)

概念

javaScript 的应用场景越来越多，从浏览器到 Node.js，这些运行在不同环境的 JavaScript 代码存在一些差异。 target 配置项可以让 Webpack 构建出针对不同运行环境的代码。可以支持以下字符串值：

target值	描述
web	针对浏览器 (默认)，所有代码都集中在一个文件里
node	针对 Node.js，使用 require 语句加载 Chunk 代码
async-node	针对 Node.js，异步加载 Chunk 代码
webworker	针对 WebWorker
electron-main	针对 Electron 主线程
electron-renderer	针对 Electron 渲染线程

例如当你设置 target:'node' 时，源代码中导入 Node.js 原生模块的语句 require('fs') 将会被保留，fs 模块的内容不会打包进 Chunk 里。

上面的表格里列出了target一些string类型的值，target的值还可以是function。如果传入一个函数，此函数调用时会传入一个 compiler 作为参数。如果以上列表中没有一个预定义的目标(target)符合你的要求，请将其设置为一个函数。

例如，如果你不需要使用以上任何插件：

const options = {
  target: () => undefined
};

或者可以使用你想要指定的插件

const webpack = require("webpack");

const options = {
  target: (compiler) => {
    compiler.apply(
      new webpack.JsonpTemplatePlugin(options.output),
      new webpack.LoaderTargetPlugin("web")
    );
  }
};