概念我是一个一听到webpack就头大的人，看着一堆不知道是什么的，总觉得他前端做的还可以，但是当我在用vue-cli的时候，总觉得还是用其中的一些来初始化项目比较好！所以想根据官方文档进行一个webpack教程。写这些主要是为了系统的学习，帮助在webpack道路上迷茫的同学。在学习webpack之前，首先要让大家知道webpack中的四个核心概念。四大核心概念1.Entry（入口）相信大家对字面意思都没有问题。这个就是指定webpack的入口文件，指定从哪里开始。找到这个起点，然后从起点看依赖文件。每个依赖都会被处理并最终输出。例子：//webpack.config.jsmodule.exports={entry:'./src/index.js'}上面的代码和entry都是简单的配置，简单的单一entry，简写的方式，更具体的entry配置是如下。示例：//webpack.config.jsmodule.exports={entry:{fistpage:'./src/index.js',nextpage:'./src/next.js',lastpage:'./src/last.js'，}}2。如果输出中有一个入口，则必须有一个出口。自然这是要定义文件输出的位置，以及输出文件的名称和目录。与条目一样，您可以定义一个输出部分来配置文件的输出。当然，指定其中一个输出文件入口即可，区别只是文件名，这里只介绍一种。输入时的名称是什么，那么输出文件的名称就是什么，只需要将文件名更改为[name].js。示例：//webpack.config.jsconstpath=require('path')module.exports={entry:'./src/index.js',output:{path:path.resolve(_dirname,'dist'),文件名:'first-webpack.js'}};解释一下上面的代码，首先我们导入一个nodejs核心模块path来操作文件路径，然后使用path进行文件路径操作，将生成的文件存放在dist目录下。生成的文件名为first-webpack.js。3.loaderwebpack本身只能理解一些js文件，但是loader可以让它处理一些非js文件，比如我们的css文件，图片文件，loader可以把这些文件转换成webpack可以处理的有效模块，所以因为它的存在，然后你导入任何类型的模块。示例：//webpack.config.jsconstpath=require('path')module.exports={entry:'./src/index.js',output:{path:path.resolve(_dirname,'dist'),filename:'first-webpack.js'},module:{rules:[{test:/\.txt$/,use:'raw-loader'}]}}上面配置loader的时候需要创建新建一个模块对象，在对象中定义rules属性，有两个必须的属性，test和use，其中test代表加载器要转换的一个或一些文件，这里指的是导入模块后缀名为use的use.txt文件是指对于导入的这种类型的文件，我们会使用raw-loader进行转换打包。注意：必须注意的是，这个配置是在module对象下的rules下配置的。这是另一个演示，比如我们平时在项目中使用css，但是我们也说过css在webpack中可能无法识别，所以这里需要使用loader来加载css文件，但是首先需要安装相应的loader来加载css文件，这里我们使用css-loader，安装命令npminstall--save-devcss-loader然后在webpack中配置，指定css文件使用css-loader加载module.exports={rules:[{test:/\.css$/,use:'css-loader'}]}还有其他的使用方式，效果是一样的，就是使用inline或者cli4。Plugins（插件）加载器用于转换某些类型的模块，plugins用于执行更广泛的任务，这个功能非常强大，可以用来处理各种任务。当然，使用方法也很简单。可以直接通过require导入npm安装的插件，然后添加到配置文件中的plugins数组中。您也可以自定义它。当然，一个插件可以使用它的不同功能。它被使用一次，但相应地你需要创建一个新的实例。示例：//webpack.config.jsconstpath=require('path')constwebpack=require('webpack')constHtmlWebpackPlugin=require('html-webpack-plugin')module.exports={entry:'./src/index.js',output:{path:path.resolve(_dirname,'dist'),filename:'first-webpack.js'},module:{规则:[{test:/\.txt$/,use:'raw-loader'}]},plugins:[newwebpack.optimize.UgifyJsPlugin(),newHtmlWebpackPlugin({template:'./src/index.html'})]}配置当然，除了以上四个核心概念，这里还有一个配置，可以配置webpack内置优化的不同模式，可以选择开发或者生产，配置不同的模式对应不同的文件和插件进行相应的模式优化。module.exports={mode:'development'}module我想你一定知道js或者一些你比较熟悉的模块，但是什么是webpack模块还是比较陌生，webpack模块的主要作用就是能够使用表达自己和其他模块依赖的各种方式。比如：import语句require()语句样式文件的@import语句url或者src的一些链接，基本上可以支持各种模块，比如我们的ts，sass，less文件等，让各种技术都可以使用webpack，在用于模块路径的webpack有三种形式。绝对路径：import"/home/src/file"相对路径：import"./file"模块路径：import"module"，这个要特别说明，这里的module会在resolve.moduleswebpack指定的目录下查找一个重要的链接是依赖图。在webpack中，一个文件依赖于另一个文件，也就是说这两个文件是有依赖关系的。因此，在使用图片资源时，我们可以建立图片和文件之间的依赖关系。这样在打包文件的时候，也可以打包图片资源。可以使用import和require将图片打包进去，这些就足够我们入门webpack了。当然webpack不止这些，还有很多更高级的用法。但这只是对webpack的介绍，让大家了解webpack的一些具体功能。如果你想了解webpack的其他内容，可以在下方留言。如果您需要，我会发布您需要的另一个教程，谢谢！
