Webpack 4.x 从入门到实践（一）——基础概念

Webpack的基础概念很简单

why this ?

对于我来说webpack始终是学习路上遇到的一颗难以跨越的坎，看着create-react-app或者vue-cli脚手架生成的webpack.config.js文件都会望而却步，深知webpack是个学习曲线非常高的一个知识区块，分析其原因主要还是由以下几点：

配置选项复杂
更新迭代快
插件或者loader之间会产生冲突
脚手架包含webpack配置，懒得配

我觉得…主要是由第四点造成的，被脚手架惯坏了，自己都不愿意动手，想着反正怎么配都不如脚手架配的那么完美，那就不配吧。。。

知道前段时间，新的需求需要添加一些webpack的plugins，结果各种倒腾都没解决，自愧无知，主要原因还是对webpack的不熟悉，连一些很基础的插件、机制都不了解，还敢号称自己是前端工程师？

基础的概念

本系列博客是基于webpack4.x版本来分析，或许不久后又会推出5.x…，没办法啊，学不动都是假的，与其抱怨版本更新迭代快，还不如期待新版本的技术带来了哪些改进与新功能。

主要结构

一个最简单的webpack.config主要是由以下结构组成：

module.exports = {
  entry: '',
  output: {},
  plugins: {},
  module: {
    rules: [
      { test: /\.jsx?$/, loader: 'babel-loader' }
    ]
  }
};

下面我将简述其几大部分的概念以及作用

entry

webpack是个打包工具，它需要一个或多个很明确的打包入口，webpack会根据这个入口，找到所有被引用的模块，将它们汇集成一个bundle文件：

module.export = (event, argv) => {
    return {
        entry: './src/index.js'
    }
}

以上的意思就是入口在webpack.config所在目录下的./src/index.js中。

output

output是指明webpack打包完成后的文件存储在哪个位置，以及如何命名这些文件，默认值是./dist：

module.export = (event, argv) => {
    return {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'js/bundle.js' // js文件的名称与位置
        }
    }
}

注意，path是指打包资源存放处，而filename只是单独指出js文件的位置以及文件名。

plugins

plugins做的事情就比较杂了，他没有特定的功能，包括打包压缩，打包优化，全局环境变量设置等等等…，plugins的功能非常强大，可以用来处理各种繁杂的任务，以实现我们对打包的各种特殊的要求:

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.export = (event, argv) => {
    return {
        ...
        plugins: [
            new CleanWebpackPlugin(['dist']),
            new HtmlWebpackPlugin({
                template: './index.html',
                filename: 'index.html'
            })
        ]
    }
}

我们要注意，插件因为是来自各方开发者开发的，所以一些非webpack自带的插件是要手动安装的，如上两个插件，CleanWebpackPlugin这个插件是当执行build的时候。自动删除webpack.config.js同级目录下的dist文件夹，而HtmlWebpackPlugin的功能就复杂许多，当我们指定html模版时，HtmlWebpackPlugin会根据我们的html模版，生成打包项目中的index.html入口页面，并且自动地将打包js文件引入到html中。

module(loader)

因为webpack本身指支持打包js文件，但是如果要打包css文件的话，就需要loader来进行转义了，为了更好地规划各种module，将每种不同类型文件分开处理，即test为指定文件类型。loader为转义这类文件需要用到什么loader:

module.export = (event, argv) => {
    return {
        module: {
            rules: [
                {
                    test: /\.(png|jpg|gif|jpeg|svg)$/,
                    use: [
                        {
                            loader: 'url-loader',
                            options: {
                                limit: 1024,
                                name: '[name].[hash:6].[ext]',
                                outputPath: 'images/',
                                publicPath: '../images'
                            }
                        }
                    ]
                }
            ]
        }
    }
}

上面的配置是指当webpack遇到jsx或者png|jpg|gif|jpeg|svg这些类别的文件时，使用url-loader来进行处理，我们可以对options进行配置，limit是表示当文件小于1024b的时候，自动转化为base64格式，name是表示文件打包后的命名，outputPath是指打包后文件的存放位置，publicPath是指当其他模块引用这些文件时，在路径最前面加上../images以组成正确的引用路径。

这几大结构是webpack最基础的配置，虽然webpack说是说开箱即用，但是它往往不是那么智能，要想配出自己想要的打包工具，还得自己属性各种配置的作用，下面我们将配置一个满足最基础开发的规则

last

我们理清楚了webpack最基础的概念，理解了各个结构的“职能”，下一步，我将会讲解如何从零配置一个“基本能用”的webpack，请关注我后续的博客～

Work bears witness who does well. ：）

文章目录