webpack初体验（一）

来瓶二锅头00
282 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第17天，点击查看活动详情。

前言

为什么会有webpack的系列教程呢？是因为当前webpack是当今最主流的前端构建工具之一，那么什么事前端构建工呢？ 前端构建工具说简单点就是将我们开发环境的代码转换为运行环境能识别的代码。这里的运行环境常指浏览器或者node服务。这个时候肯定有另一个疑问，那就是为啥要转换？我们来举一个很简单的例子就知道了。我们在日常开发中常会使用ES6语法。但是实际上浏览器是识别不了的。这个就是前端构建工具的功劳，还有一种场景，那就是我们开发的代码在线上环境中是不希望别人看到具体的写法的。那就需要用到混淆压缩处理。这也是前端构建工具的功劳。这样我们其实可以知道哪些场景需要用到前端构建工具了。那就是

  1. 编译代码 将less,sass等样式代码编译成浏览器可识别的css代码。将ES6,TS代码转换成浏览器可识别的js代码。
  2. 压缩混淆代码 将JS，css，代码压缩混淆以及图片压缩。
  3. 处理模块化 由于当前我们常将样式，js等常通过模块化的方式使用，但是运行环境却不识别。这个时候就需要前端构建工具了

webpack概念

webpack实际上是通过一个或者多个入口开始，递归构建一个关系依赖图。每个依赖中包含所需要的模块，然后根据依赖图将模块打包成一个或者多个包。那么webpack具体有哪些概念呢？

入口（entry）

入口，是说明webpack从哪里开始，这个entry是依赖图的开始。进入入口后，webpack会递归找到依赖哪些模块。这些模块彼此完全分离，互相独立。具体配置如下：

module.export = {
    entry:{
        [keyName:string]:string|Array<string>
    }
}

例如：

module.export = {
    entry:{
        main:'c.js',
        main1:['a.js','b.js']
    }
}

出口 （output）

出口，告诉webpack需要在哪里输出包，以及输出包的命名。 默认的输出路径为项目目录的.\/dist文件。可以自行指定目录，指定后会在编译阶段将编译后的文件输入到这个文件中。同事我们可以配置要输入的文件名称。默认是main.js.具体的数据格式为

module.export = {
    output:{
        path:string;
        filename:string;
    }
}

例如：

module.exports = {
    entry:'./src/index.js'
    output:{
        path: path.resolve(__dirname, 'dist'),//打包后的文件存放的地方
        filename:'bundle.js'   //打包后输出文件的文件名
    }
};

上面的代码在编译的时候会将./src/index.js文件编译城bundle.js文件，然后放入到dist文件夹中

加载器（loader）

我们在前面说到了webpack只能处理js文件，例如只能识别js。不能识别ts。那么我们如何让浏览器去支持识别ts呢？这个时候就需要loader了，loader可以将所有类型的文件转换成webpack能够处理的文件格式。然后再通过webpack能力进行编译打包。具体的数据格式为

module.export = {
    module:{
        rules:Array<{
            test:string;//标识哪些文件需要被loader处理
            use:string|Array<string>;//test所标识的文件，具体被哪个loader处理
        }>
    }
}

例如：

module.export = {
    module:{
        rules:[{
            test:/\.css$/,
            use:['style-loader','css-loader']
        }]
    }
}

上面的配置，是将所有的css文件，在打包的时候通过style-loader和css-loader转换一下。

插件（plugins）

前面说到了加载器，加载器一般处理某种类型的数据，但是有的时候我们可能需要使用更强大功能的东西，那就是plugins.在我个人的感官中，插件是更强大的加载器。他能够在整个打包过程中存在并且在特定的位置去处理文件。具体的数据格式为

module.export = {
    module:{
        plugins:Array<any>
    }
}

例如：

module.export = {
    module:{
        plugins:[
            new HtmlWebpackPlugin({
                template:'./src/index.html'
            })
        ]
    }
}

上面的配置，是将src/index.html文件通过插件HtmlWebpackPlugin进行处理。但是这个插件怎么来的呢？使用步骤如下：

  1. npm安装所需要的插件
  2. require()引入所需要的插件
  3. 在plugins数组中使用 下面看下完整的实例代码
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.export = {
    module:{
        plugins:[
            new HtmlWebpackPlugin({
                template:'./src/index.html'
            })
        ]
    }
}

至此一个webpack最基本的也是最主要的配置简要说明了，下面我们一起来进行webpack的世界吧。

avatar
文章
阅读
粉丝