前言

一开始认识到webpack，是从一些讲解前端工程化模块化的文章了解的，而且很多教程视频或者文章大部分都是生硬的介绍，也可以说是灌输配置属性的知识，如果没有一些基础知识，很多时候都是很痛苦的。所以我这个文章仅仅只是给新手一个理解webpack的入门文章，掘金还有很多大佬讲的很细致。

webpack定义

传统的网页开发或者说大学教授网页知识的时候，都是在一个文件上写很多html、css、js的代码，如果项目很小的话，这样写也好，但是如果代码量很多的时候，如果仅仅就是修改一个页面的某个变量，但是代码都在一起，没有模块化和工程化。我们只能往下一个个找，真的会死。但是，如果将一些代码抽离出来，变成一个个模块时，那我们怎么去管理这些模块，怎么知道什么时候将一些模块导入进去？所以这时候webpack的作用就体现出来了。

webpack就是管理模块的工具

我们通过npm run dev的时候，其实很多时候就是在package.json的script中指定webpack xxx.js，我们也可以直接在命令行通过npx webpack index.js这个命令去打包生成一个静态文件，在这其中webpack会去index.js去扫描下那些依赖，然后导入进去，最后把这些模块放在一个文件里，然后我们就可以打开这个页面了。

等等，我们为什么分离模块又最后合并成一个静态文件？这不是多此一举？合并的原因其实很简单，就是为了不多发几个请求，分离是为了开发维护，合并是为了性能。

webpack使用

// webpack-cli是为了能在命令行使用webpack的命令
npm install webpack webpack-cli -D

然后在当前根目录下面新建一个名为webpack.config.js的文件，因为webpack默认是去这个文件下找配置。或者可以在命令行通过这个命令指定


npx webpack -config xxx.js

webpack配置

还记得刚开始我们使用的那个命名吗？ npx webpack index.js如果没有配置文件的入口文件，那么就默认是使用这个文件作为入口文件。因为webpack是管理模块的工具，那么我们从这点出发，它肯定需要处理文件地址的信息、输出结果文件地址的信息，但是我们有这些信息还不够，我们需要引入的资源不仅是js文件，还有css文件、html、图片，但是早期webpack仅仅只是为了处理js文件，那我们怎么处理别的类型文件？这其中肯定就需要针对不同类型的规则去做转换.

所以目前我们需要配置文件入口地址、结果输出位置、转换器。

下面附上较完整的代码配置

const path = require('path'); 
module.exports = { 
    mode: 'development',
    entry: './src/index.js', 
    output: { 
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
            }, 
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif)$/,
                use:{
                    Loader: ‘file-loader’,
                    Options: {
                        name:’[name].[ext]’ 
                        outPath：’imgs/’
                    }
                }
            ]
        }, 
    devtool: "source-map" 
    }

entry

告诉webpack入口文件的位置，也可以用数组存放多个文件的地址

output

输出静态文件的地址信息，常用的就是文件名称、文件路径（因为需要绝对路径，所以我们需要用node的path拼接文件名）、还有clean指定每次打包删除上次打包的静态文件。

module

告诉webpack遇到什么类型的webpack该怎么处理的转换器，因为webpack默认仅仅识别和处理js类型的，我们需要使用相关loader进行指定文件类型处理。

devtool

开发者调试配置，我们打包好的文件如果不指定sroucemap的话，如果程序报错就无法定位到相关地方，而这个相当于我们的地图，可以让输出的文件和源文件进行一个映射。

mode

告诉webpack使用相应模块的内置优化

plugin

扩展插件，可以在webpack运行的生命周期调用来改变构建的一些事件。

总结

当然目前仅仅讲了一些webpack的大概概念，还有很多没有讲，比如loader、plugin还有resoucemap等等，当然下次会出一期相关深入的文章。我觉得还有一些知识讲的不够好，希望能给些相关建议。蟹蟹！

新手友好的webpack入门文章

前言