1.入口定义：表示webpack应该使用哪个模块作为构建其内部依赖图的开始。（从入口开始，查找并递归解析入口所依赖的所有模块）1.1单入口对于单入口文件，其值为string类型，打包成一个chunk，输出一个bundle文件。module.exports={entry:'./src/index.js'}1.2多入口输入是一个数组，但是入口文件最后只会形成一个chunk，只会输出一个bundle文件。module.exports={entry:['./src/index.js','./src/add.js']}inputasobject，有几个entry文件组成几个chunk，输出几个bundle1文件module.exports={entry:{index:'./src/index.js',add:'./src/add.js',}}1.3动态入口输入是一个函数（同步或异步）用于动态返回入口内容以上要求。module.exports={entry:()=>newPromise((resolve)=>resolve(['./src/index.js','./src/add.js']))}二、Output表示webpack如何将你的包、资产和任何你用webpack捆绑或加载的东西导出到哪里。2.1名称对于输出的名称，常用的主要有两种：filename（输出bundle名称）和chunkFilename（非入口chunk名称）。filename(配置输出文件名，字符串类型)module.exports={//文件名(指定名称+目录)filename:'[name].js'}chunkFilename(配置非入口chunk的名称)为非入口files，有两种生成方式：第一种方式是通过import语法将一个文件分成一个chunk；第二种方法是使用优化将node_modules分成块。（见后续博文）module.exports={//非入口chunk名称chunkFilename:'[name]_chunk.js'}2.2Path对于配置的输出路径，常用的有两种：path和publicPath。path（配置输出文件存放的目录，必须是字符串类型的绝对路径module.exports={path:path.resolve(__dirname,'dist_[hash]')}publicPath（所有资源都以公共路径导入pathprefix)module.exports={publicPath:'https://cdn.example.com/'}2.3输出library在使用webpack构建可以被其他模块导入使用的library时，需要libraryTarget和library。其中，libraryTarget配置如何导出库；library配置exportlibraryname.module.exports={library:'[name]',libraryTarget:'window',//var,assign,this,window,global,commonjs,commonjs2,amd,umd...}三、Loaderwebpack只能理解JavaScript和JSON文件，通过loader，webpack可以处理其他类型的文件，并将其转化为有效的模块，供应用程序使用，添加到依赖图中。3.1样式css和less的资源webpack不能直接处理这样的样式资源，所以需要d在使用之前由webpack翻译。另外，不同的浏览器对CSS的支持也不同。为了解决CSS的兼容性问题，可以使用postcss-loader进行处理。module.export={...module:{rules:[{test:/\.css$/,use:[//创建样式标签，将js中的样式资源插入到html文件中。'style-loader',//将css文件转为commonjs模块加载到js中'css-loader','postcss-loader',]},{test:/\.less$/,use:['style-loader','css-loader',//将less文件编译成css文件'less-loader',]}]}}3.2图片资源图片资源分为html中的图片和html中的图片非html。对于url-loader或者file-loader，可以处理js、css等中的图片资源，但是不能直接处理html中的图片资源，所以需要参考html-loader，负责导入img，这样它可以由url-loader处理。module.exports={module:{rules:[{test:/\.(png|jpg|gif)$/,loader:'url-loader',options:{limit:8*1024,name:'[hash:10.[ext]',outputPath:'asset/images'}},{test:/\.html/,loader:'html-loader',},]}}3.3js文件因为每个人写的代码风格不同，为了统一js文件的风格，规范代码，可以使用eslint-loader进行处理。module.exports={...module:{rules:[{test:/\.js$/,exclude:/node_modules/,//优先执行enfore:'pre',loader:'eslint-loader',options:{//fix:true}}]}}这里可以使用比较权威的Airbnb进行语法检查，需要在package.json中添加："eslintConfig":{"extends":"airbnb-base","env":{"browser":true}}不同的浏览器对js代码的支持不同，所以需要对js代码进行兼容处理。你可以使用babel-loader。主要有三种配置方式：(1)基础js兼容性处理->@babel/preset-env问题：只能转换基础语法，比如Promise不能转换(2)所有js兼容性处理-->@babel/polyfill这个文件，直接在js文件'@babel/polyfill'中导入即可；这将引入所有js兼容的东西。问题：我只需要解决一些兼容性问题，但是所有的兼容性代码都是导入的，导致文件太大（3）做兼容性需要做的事情：按需加载-->需要core-js此时加载第二个选项的代码被注释掉了。module.exports={...module:{rules:[{test:/\.js$/,exclude:/node_modules/,loader:'babel-loader',options:{//preset:指示babel怎么做it兼容性处理presets:['@babel/preset-env',{//按需加载useBuiltIns:'usage',//指定core-js版本corejs:{version:3},//指定兼容哪个版本的浏览器targets:{chrome:'60',firefox:'60',edge:'17',safari:'10',}}]}}}]}}3.4其他资源不需要优化压缩等文件待处理，如字体图标、SVG等，可直接导入使用。这时候可以使用file-loader直接处理。module.exports={module:{rules:[{exclude:/\.(css|js|html|less|jpg|png|gif)$/,loader:'file-loader',options:{name:'[hash:10].[ext]',}}]}}4.Plugin插件的目的是解决loader无法实现的其他事情。它可以用于执行更广泛的任务，并为webpack带来极大的灵活性。4.1HTML文件为了简化HTML文件的创建，为webpack包提供服务，可以使用html-webpack-plugin插件。使用本插件可以自动导入JS、CSS等文件，并可以对HTM代码进行压缩；此外，该插件还可以使用提供的HTML模板。module.exports={plugins:[//html-webpack-plugin插件，默认会创建一个空的HTML，所有资源（JS、CSS）打包输出会自动导入。newHtmlWebpackPlugin({//需要一个结构化的HTML文件，可以通过配置模板，复制html文件，自动导入所有资源（JS，CSS）自动导入打包输出模板：'./src/index.html',//压缩html代码minify:{//去掉空格:true,//去掉注释removeComments:true,}})],}4.2CSS文件对于CSS文件，使用插件主要需要处理三个方面：提取CSS文件、兼容性处理（用postcss-loader）和CSS文件压缩。提取CSS文件：mini-css-extract-plugin兼容性处理：post-preset-env压缩：optimize-css-assets-webpack-pluginmodule.exports={……module:{rules:[{test:/\.css$/,use:[//'style-loader',MiniCssExtractPlugin.loader,//用这个加载器替换style-loader。功能：将js中的css提取到单独的文件中'css-loader',{loader:'postcss-loader',options:{ident:'postcss',plugins:()=>[require('postcss-preset-env')()]}}]},]},plugins:[newMiniCssExtractPlugin({//重命名输出的css文件filename:'css/[name].css'}),//压缩cssnewOptimizeCssAssetsWebpackPlugin(),]}5.mode指示wenpack使用对应的模式进行配置。选项说明development会将DefinePlugin中的process.env.NODE_ENV的值设置为development。启用NamedChunksPlugin和NamedModulesPlugin。production会将DefinePlugin中的process.env.NODE_ENV的值设置为production。启用FlagDependencyUsagePlugin、FlagIncludedChunksPlugin、ModuleConcatenationPlugin、NoEmitOnErrorsPlugin、OccurrenceOrderPlugin、SideEffectsFlagPlugin和TerserPlugin。none退出任何默认优化选项转载本文请联系前端点线面公众号。
