工程前端打包工具--webpack入门

Posted 2021-04-29 JavaScript开发者

文字总计： 1,449 字

所需阅读时间：约 5 分钟

对于webpack这个东西，应该是大多数现代前端开发者要使用的工具了。前端发展很快，从webpack的版本就能反映出来，有人还在用webpack1，现在4的测试版都已经发布了。昨天在知乎上看到一位老师吐槽，自己的技术书还没出版现在又得改书稿了。所以作为开发者，要有随时学习的态度，和对技术的热情。前段时间还新开源了一个叫Parcel的打包工具，号称零配置，热度很高，可能随时都要取代配置繁琐的webpack。但是，就目前来看，webpack还是要学习的。这篇文章就分享一点我作为一个初学者的webpack学习历程，本文采用目前最新的稳定版webpack3，重点在对整个体系的理解和学习的方法。

初识webpack

我之前接触过webpack是在使用vue.js创建工程时候，当时直接使用vue-cli直接生成项目结构和基本配置，配置项仅仅是能够看懂，没有系统地学习过webpack，现在从头开始学习webpack，首先了解webpack是做什么的。

在webpack官方主页上放着这张图片，整张图片描述的就是webpack的整个构建流程，webpack做的工作就是：把开发阶段的各种各样的模块文件模块打包成生产环境下的静态资源。在开发阶段，为了易于开发管理，我们使用各种各样的方式来处理前端工程，但是，一旦作为最终要运行在浏览器中的产品，里面是只能有浏览器可识别元素的。浏览器只能识别html，css，js，以及各种图片视频等媒体资源，所以一切sass，less，stylus，typescript，coffeescript，jade，ejs，vue，jsx，统统都要打包处理，并且高版本的js还需要转译成为浏览器能识别的ES5语法，样式文件还要加兼容前缀处理，这一系列的工作，肯定不能手动完成，我们会使用自动化构建工具，曾经使用grunt，gulp等等构建复杂的工作流，现在使用webpack，通常只使用npm脚本就可以完成项目构建了，webpack在其中发挥了非常重要的作用。

webpack的基本概念

构建webpack项目有一个配置文件webpack.config.js，webpack每次启动时候首先会加载这个配置文件，在配置文件中有四个核心配置项：entry，output，loader，plugins，下面具体来看每一项配置都是什么。

entry（入口）

入口是webpack的打包时候最先加载的文件，webpack会从入口文件进入，按顺序扫描整个项目的各种依赖文件。对于单入口页面，配置如下：

const config = {
  entry: './path/to/my/entry/file.js'
}

entry后面配置的就是入口文件的路径，而对于多页面路径，可以这样配置：

const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

entry后面可以写对象，对象的属性代表最终打包的Chunk Name，值为每一个chunk的打包入口，这样配置就可以从多个入口开始执行打包任务。而无论是单入口还是多入口，最终都要有一个输出的地方，就是出口。

output（输出）

输出代表webpack文件最终被打包的样子，output后面写一个对象，filename代表最终的文件名，path指向最终保存文件的路径。

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

需要注意的就是webpack3不支持相对路径了，可以通过引入path模块使用path.resolve(__dirname, 'dist')来描述路径信息。对于多入口，可以使用占位符来保证文件唯一性：

loader（加载器）

loader是webpack最重要的一部分，如果不是为了使用loader我们完全没必要引入复杂的webpack。loader 用于对模块的源代码进行转换，只有使用了正确的loader，webpack才会识别对应的文件，并且能够把它转化成想要的样子。

在webpack中支持三种使用loader的方式：

• 配置（推荐）：在 webpack.config.js 文件中指定 loader。

• 内联：在每个 import 语句中显式指定 loader。

• CLI：在 shell 命令中指定它们。

实际使用的时候主要使用配置的方式，首先需要安装loader，之后再rules里面添加规则：

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        { loader: 'style-loader' },
        {
          loader: 'css-loader',
          options: {
            modules: true
          }
        }
      ]
    }
  ]
}

实际开发中，我们只要知道常用的loader，选择需要的即可，

plugins（插件）

很多功能强大的系统都是依赖插件来构建的，webpack也提供了一套插件机制，我们可以使用插件来完成复杂的任务。插件可以通过在plugins中传入new实例来配置：

plugins: [
  new webpack.optimize.UglifyJsPlugin(),
  new HtmlWebpackPlugin({template: './src/index.html'})
]

实际开发中，也有很多好用的插件，等到需要了，就可以安装使用。

小总结

其实这篇文章只是对webpack的粗浅认识，后续会更详尽地介绍有关webpack的内容。

原文链接：http://fengxu.ink/