webpack学习笔记（一）

莫语
189 阅读3分钟

写在前面的话

准备着手写一系列webpack的文章，这并不是webpack入门，或者进阶的文章，或是教程，因为自己也是新手，不敢站在这个高度写这个文章。这只是本人在工作中要运用到webpack，包括要自己写一些loader或者plugin去实现某些功能（这两个是体现webpack强大之处的核心），因此是记录也或是总结的文章，更多像是笔记。

webpack是什么

这个就不用多说了，这种介绍网上一搜就是一大堆了，以及官网也都有介绍，就我本人观点是目前最牛逼的一个打包工具了。

webpack怎样使用

这个是在工程中使用的，因此首先需要有必要的环境， nodejs、npm，这些作为一个前端开发肯定是已经有了的，webpack 是一个npm包， 因此首先需要安装，可以全局安装，也可以本地工程中单独安装。

//全局安装：
npm i -g webpack
// 本地安装
npm i webpack

webpack 默认是可以打包js文件的，webpack可以在终端命令行使用， 但是在工程中基本都是配合一个默认的webpack.config.js文件使用，这个文件返回的是一个webpack的配置对象。 首先给出一个如下的工程目录：

dist放打包后的代码，src放源码，package不用多说了，node_module是依赖的第三方包，webpack安装在本地， webpack.config.js就是webpack配置文件。有个地方需要注意的是本地安装需要指出webpack的路径才能执行打包，也就是在根目录下运行 ：

node_modules/.bin/webpack

不过我们可以在package.json文件中添加一条命令：

  "scripts": {
    "build": "webpack"
  },

然后执行 npm run build就行了（原理可以参考：阮一峰大神这篇文章：npm scripts 使用指南 注意： 执行成功的前提是需要在根目录下有一个正确的配置文件： webpack.config.js, 当然配置文件也可以在其他地方也不一定是这个命名， 这个是默认路径，默认名，webpack会自动读取，放在其他位置则需要指定文件运行：

webpack --config 配置文件

webpack配置文件

webpack配置文件是使用webpack的重点， 首先看一下webpack最基本的配置文件结构。

const baseConfig = {
    entry: './src/index.js',
    output: {
        path: '/dist',
        filename: 'bundle.js'
    }
}

module.exports = baseConfig;

前面说了不可或缺的两个参数： 入口文件和输出文件。

入口文件

入口文件可以有三种配置：

  1. 字符串

应用程序只有一个入口： 就如上面的配置文件

  1. 数组字符串

将这几个模块打包到一个文件中（非常适合于第三方模块的打包），比如安装了第三方包lodash, redux， 然后将两者打包到一个文件中(打包到一个文件中，怎么使用，这个暂时记为问题一，后续讨论)：

const baseConfig = {
    entry: ['redux', 'lodash'],
    output: {
        path: '/dist',
        filename: 'bundle.js'
    }
}

module.exports = baseConfig;
  1. 对象

这是多入口打包，针对多页面应用就需要使用到，一个入口对应着一个出口，彼此之间独立，例如：

const baseConfig = {
    entry:{
        page1: './src/page1.js',
        page2: './src/page2.js'
    },
    output: {
        path:'/dist',
        filename: '[name].bundle.js'
    }
}

module.exports = baseConfig;

入口是对象时可以包含有数组的情况，也就是第二种。

出口文件

最基本的出口文件在上面讲入口文件时已经有所提到,不可或缺的两个参数： path: 打包目录，这个是绝对路径， filename: 打包文件名。 入口文件中1,2两种情况output.filename是写死的， 第3种中的[name]对应的是入口文件中的key值，也就是会打包成page1.bundle.js,page2.bundle.js, 如果前两种情况1,2也是用[name]的话， name就会取默认值main。

本篇总结

至此通过本文已经能够掌握配置文件中不可缺少的两个参数：入口文件和出口文件，并且能够体会使用webpack带来的乐趣了，接下来的内容会陆续带来webpack的黑魔法,另外两个参数： loader和plugin, 体会webpack真正强大到没朋友地方。

avatar
文章
阅读
粉丝