大家好！我是Carrot，本章介绍webpack4的常用配置。webpack.config.js配置文件webpack是一个可配置的模块打包工具。你可以通过修改webpack.config.js的配置文件来配置webpack。webpack的配置文件遵循Nodejs的CommonJS模块规范，可以通过require()语法导入其他文件或者使用Nodejs内置模块，其实webpack.config.js就是一个Nodejs模块。一个简单的webpack.config.js示例constpath=require('path');module.exports={mode:'development',entry:'./entry.js',output:{path:path.resolve(__dirname,'dist'),文件名:'entry.bundle.js'}};上面的例子是通过CommonJS的require导入Nodejs内置的path模块，然后通过module.exports导出webpack的配置。Tips：webpack的配置是一个Nodejs模块，不是JSON对象。webpack配置支持多种语言webpack不仅支持js配置，还支持TypeScript、CoffeeScript甚至JSX语法配置，但无论使用什么语言，核心配置项都是一样的，只是语法不同而已。除了配置文件语法多样之外，配置的类型也多种多样。最常见的一种是将它们用作对象。除了对象，webpack还支持函数、promises和多配置数组。webpack.config.js配置文件的使用方法默认情况下，webpack会在执行目录下寻找webpack.config.js作为配置。如果需要指定配置文件，可以使用命令：npxwebpack--configwebpack.config.js或者在项目目录下运行node./node_modules/webpack/bin/webpack--configwebpack.config.js的webpack的核心概念虽然webpack功能强大，配置项也很多，但是只要了解以下几个核心概念，就可以信手拈来，webpack有以下几个核心概念：entry：项目入口，webpack执行的第一步构造将从entry开始，entry可以抽象为input。module：模块，webpack中一切都是模块，一个模块对应一个文件，模块不限于js，也可以是css，图片等，webpack会从入口中递归查找所有依赖的模块配置文件。chunk：代码块，一个chunk可以由多个模块组成，用于代码的合并和拆分。loader：模块转换器，用于将模块原有内容按要求转换为新内容。plugin：扩展插件，在webpack构建过程的特定时刻注入扩展逻辑，可以完成loader无法完成的任务。output：输出结果，webpack经过一系列处理得到最终需要的代码输出结果。webpack的入口和出口webpack是一个模块打包工具，它可以从一个需要处理的javascript文件开始构建一个依赖图（dependencygraph），映射到项目中的各个模块，然后这个依赖图就是导出到一个或多个包。webpack从指定的入口文件（entry）开始，对其进行处理，最后根据输出输出一个内容固定的bundle。而这个处理过程用到两个工具，loader和plugin。加载器是源代码的处理器，插件解决了加载器无法处理的事情。entrywebpack的entry支持多种类型，包括字符串、对象、数组。在功能上，包括单文件录入和多文件录入两种方式。单文件入口module.exports={entry:'path/index.js'}//对象使用方式module.exports={entry:{main:'path/index.js'}}单文件入口可以快速创建一个只有一个文件入口，但相对简单，扩展配置时灵活性较低。module.exports={mode:'development',entry:['./src/index1.js','./src/index2.js']}不管是字符串的entry还是字符串数组，都是其实entry只有一个，但是打包输出会有区别：如果直接是string的形式，那么webpack会直接使用string指定的模块作为entry模块。如果是数组形式，webpack会自动生成另一个入口模块，加载数组中每个元素指定的模块，并将最后一个模块的module.exports导出为入口模块的module.exports。多文件条目多文件条目使用对象语法来支持多个条目。与单文件入口相比，多文件入口的对象语法具有更高的灵活性，如多页面应用、页面模块化、分离和优化。module.exports={entry:{home:'path/home.js',search:'path/search.js',list:'path/list.js'}}上面的语法将条目分为3个单独的条目文件,这样三个对应的bundle就会被打包。提示：对于html页面，我建议只使用一个条目。通过统一的入口，让解析后的依赖更方便管理和维护。outputoutputwebpack的输出是指定入口对应的文件，编译打包后的输出bundle。output的常用属性有：path：指定bundle输出打包后的存放路径。文件名：这是包的名称。publicPath：指定一个在浏览器中引用的URL地址。Tips：不指定输出时，默认输出为dist/main.js，即output.path为dist，output.filename为main。一个webpack配置可以包含多个条目，但只有一个输出。不同的条目可以通过output.filename占位符来区分。module.exports={entry:{home:'path/home.js',search:'path/search.js',list:'path/list.js'},output:{文件名:'[name].js',path:__dirname+'/dist'}}其中[name]是占位符，对应于入口键（home、search、list）。目前webpack支持的占位符有：[hash]模块标识符的hash[chunkhash]chunk内容的hash[name]模块名[id]模块标识符[query]模块的查询，比如文件名？下面的字符串[function]返回一个字符串作为文件名的函数[hash]和[chunkhash]。可以使用[hash:16]的长度（默认为20）来指定，也可以通过指定output.hashDigestLength全局配置长度，那么它们有什么区别呢？[hash]：是整个项目的hash值，根据每次编译的内容进行计算，每次编译后都会生成一个新的hash，即修改任何一个文件都会导致所有文件的hash改变;在一个项目中，虽然entry不同，但是hash是一样的；hash无法实现前端静态资源在浏览器上的长期缓存，此时应该使用chunkhash；[chunkhash]：根??据不同的入口文件（entry）分析依赖文件，构建对应的chunk，生成对应的hash；只要构成条目的模块文件不发生变化，相应的散列也将保持不变。所以一般项目在优化的时候，都会把公共库的代码拆分到一起。由于公共库代码改动较少，可以利用chunkhash来起到最长缓存的作用；[contenthash]:使用chunkhash有问题。当一个CSS文件被引入到一个JS文件中时，它们编译后的哈希值是相同的。而且，只要JS文件的内容发生变化，与其关联的CSS文件的哈希值也会发生变化。在这种情况下，您可以使用mini-css-extract-plugin或extract-text-webpack-plugin从JS中提取CSS并使用contenthash。[hash]、[chunkhash]和[contenthash]都支持[xxx:length]语法。Tips：占位符可以组合使用，比如[name]-[hash:8]output.publicPath我们构建的静态资源文件是通过output.library和output.libraryTarget实际开发中我们总是需要去打包一些供其他团队成员使用的库。这时候就需要用到output.library和output.libraryTarget。output.library用于指定库的名称，output.libraryTarget用于指定打包的规范，如：commonjs2、amd、umd2等。小结本章我们先从webpack的配置基本语法说起文件webpack.config.js，解释configuration的基本用法和mode、context、entry、output的基本概念。我们希望能给您带来一些帮助。如果你想了解更多，请继续关注我的文章。
