//方式一：单文件写入入口：{index:'./src/pages/route.js',//about:'./src/pages/about.js',//other:()=>{...}}//方法二：多文件写入入口：{/*index:['webpack-hot-middleware/client','./src/root.js'],*/index:['./src/root.js'],vendors:['react','react-dom','redux','react-router','classnames'],}2.outputpath:输出文件directory，filename：输出文件名，一般对应你的entry配置，比如：js/[name].jsname这里的意思是[index,vendors]，chunkFilename：chunk，配置好了，非entryentry模块会help自动拆分文件，也就是常说的按需加载，对应路由中的require.ensure。基本上，您不需要主动设置它。它在开发模式下默认为true，在生产模式下默认为false。主要就是这些，还有其他的library,libraryTarget,auxiliaryComment等输出：{path:path.resolve(__dirname,'../assets'),filename:'js/[name].js',chunkFilename:'js/[name].[chunkhash:8].js',publicPath:'/_static_/',//最终访问路径为：localhost:3000/_static_/js/*.js//pathinfo:true,}3.常用的三种hash模板来描述hash模块标识符的hash，一般应用于filename:'[name].[hash].js'chunkhash按需加载块内容的hash，根据chunk本身的内容计算，'js/[name].[chunkhash:8.js'contenthash以前从未使用过。读取文档后，根据解压css文件时的内容计算。哈希长度与ExtractTextWebpackPlugin插件结合使用。hash默认长度为20，可以自定义：[hash:8]、[chunkhash:16]4.mode这是webpack4新增的。4之前一般使用DefinePlugin插件设置mode:development`,production,none,development:开发模式，打包后的代码不会压缩，开启代码调试，production:生产模式，刚好相反//方法1webpack--modedevelopment/production//方法2...mode:'development/production'...5.Devtool控制是否生成以及如何生成sourcemap文件，更有利于定位在开发环境问题，默认为false。当然它的开启也会影响编译速度，所以生产环境一定要记得关闭常用的值cheap-eval-source-mapeval-source-mapcheap-module-eval-source-mapinline-cheap-module-source-map等等，具体可以去官网查看大致用法：eval-source-map有很多种，各有各的特点。您需要自定义一些优化的构建打包策略。配置minimize:true/false告诉webpack是否启用代码最小化和压缩。删除空块。设置为false会关闭本次优化nodeEnv:不是node中的环境变量，设置后可以使用process.env.NODE_ENV==='development'判断代码中的一些逻辑，生产环境UglifyJsPlugin会自动删除无用代码splitChunks:替换CommonsChunkPlugin，自动分包拆分，代码拆分，详细的默认默认配置，只作用于异步加载的代码块-chunks:'async'，它有三个值：all,async,initial//环境变化可以也可以在启动时直接设置//webpack--env.NODE_ENV=local--env.production--progress//splitChunks默认配置splitChunks:{chunks:'async',minSize:30000,maxSize:0,minChunks:1,maxAsyncRequests:5,maxInitialRequests:3,automaticNameDelimiter:'~',name:true,cacheGroups:{vendors:{test:/[\\/]node_modules[\\/]/,priority:-10},默认值：{minChunks:2,priority:-20,reuseExistingChunk:true}}}runtimeChunk:提取webpack运行时代码，可以设置为：boolean,Object启用该配置后，会覆盖入口优化指定的名称：{runtimeChunk:true,//方法一runtimeChunk:{name:entrypoint=>`runtimechunk~${entrypoint.name}`//方法二}}七、解析——如何配置模块解析扩展：自动解析确定的扩展，省去你引入组件时写后缀的麻烦，alias:一个很重要的配置，可以配置一些短路径，modules:webpack解析模块时应该搜索的目录，其他插件unsafeCache,enforceExtension,基本不用//extensions后缀可以省略，importToastfrom'src/components/干杯';//别名，短路径importModalfrom'../../../components/modal'//shorthandimportModalfrom'src/components/modal'resolve:{extensions:['.js','.jsx','.ts','.tsx','.scss','.json','.css'],别名：{src:path.resolve(__dirname,'../src'),components:path.resolve(__dirname,'../src/components'),utils:path.resolve(__dirname,'../src/utils'),},模块:['node_modules'],},8.module.rules-compilationrulesrules：也就是前面的loaders，test：正则表达式，匹配编译后的文件，exclude：排除特定条件，比如通常写node_modules，也就是过滤掉某些目录/文件，include：正好相反的exclude,use-loader:必须有，它相当于一个解析器对应一个test,babel-loader,style-loader,sass-loader,url-loader等匹配的文件，使用-options:是与加载器一起使用，可以是字符串或对象。它的配置可以在loader中直接简写，它下面有presets、plugins等属性module:{rules:[{test:/\.(js|jsx)$/,exclude:/node_modules/,使用：[{loader:'babel-loader',options:{presets:[['env',{targets:{browsers:CSS_BROWSERS,},}],'react','es2015','stage-0'],插件:['transform-runtime','add-module-exports',],},},],},{test:/\.(scss|css)$/,使用:['style-loader',{loader:'css-loader',options:{plugins:[require('autoprefixer')({browsers:CSS_BROWSERS,}),]sourceMap:true}},{loader:'postcss-loader',options:{plugins:[require('autoprefixer')({browsers:CSS_BROWSERS,}),]sourceMap:true}},{loader:'sass-loader',options:{sourceMap:true}}]},{test:/\.(png|jpg|jpeg|gif)$/，排除：/node_modules/,使用:[{loader:'url-loader?limit=12&name=images/[name].[hash:8].[ext]',},],},{test:/\.(woff|woff2|ttf|eot|svg)$/,排除:/node_modules/,使用:[{loader:'file-loader?name=fonts/[name].[hash:8].[ext]',},],},],},九、项目中常用的loaderbabel-loader,awesome-typescript-loaderjs*/ts编译,css-loader,postcss-loader,sass-loader,less-loader,style-loader等cssstyle处理file-loader、url-loader、html-loader等图片/svg/html处理十、plugins-插件UglifyJsPluginHotModuleReplacementPluginNoEmitOnErrorsPluginHtmlWebPackPluginExtractTextPluginPreloadWebpackPlugin十一、plugins/loader的区别loader的作用是解析文件，比如转ES6转es5，终究连ES3都有万恶的IE；将Sass和Less解析成CSS，并自动为CSS添加兼容的前缀；分析图片等plugins对loader做的事情进行优化分类，提取精华（提取常用代码），做压缩处理（js/css/html压缩），输出指定目录等12.webpack-dev-servercontentBase:告诉服务(devserver)去哪里找文件，如果不指定默认就是当前项目的根目录，historyApiFallback:可以boolean,object,默认的响应入口文件，包括404都会指向这里，object看下面的例子:可以自定义控制显示的编译细节，proxy:其实就是http-proxy-middleware，可以处理一些代理请求//方法一：不配置方法二webpack-dev-server的内容--configwebpack/webpack.config.dev.js//指定端口:--port=8080//开启热更新:--hot//gzip:--compress//方法2devServer:contentBase:'./assets',host:'0.0.0.0',port:9089,publicPath:'/assets/',historyApiFallback:{index:'/views/index.html'},/*匹配路径，输入不同入口文件，首席填坑官?苏楠专栏，公众号Z好：honeyBadger8改写：[{from:/^\/$/,to:'/views/landing.html'},{from:/^\/subpage/,to:'/views/subpage.html'},{from:/./,to:'/views/404.html'}]}*/compress:true,noInfo:true,inline:true,hot:true,stats:{colors:真，块：假}，代理：{'/mockApi'：'https://easy-mock.com/project/5a0aad39eace86040263d',//request可以直接写成/mockApi/api/login...}}十三、webpack4删除的点module.loadersNoErrorsPluginCommonsChunkPluginDefinePluginOccurenceOrderPlugin
