Webpack是什么？本质上，webpack是现代JavaScript应用程序的静态模块打包器。当webpack处理应用程序时，它会递归地构建一个包含应用程序所需的每个模块的依赖关系图，然后将所有这些模块打包到一个或多个包中。——Webpack文档简单来说，Webpack就是一个前端项目的打包工具。简单来说就是：Webpack是一个工具。Webpack打包方式有什么特点？WebPack使用JavaScript作为入口（entry）；通过不同的loader，处理不同格式的资源（文件资源file-loader/url-loader、css资源style-loader/css-loader、JavaScript资源babel-loader等）；通过html-webpack-plugin动态生成html文件并插入CSS和JavaScript资源；通过输出配置处理后的文件，包括文件名（filename）、生成文件位置（path）、在线资源服务路径（publicPath）。非入口文件名（chunkFilename）等WebPack的常用配置有哪些？入口WebPack的入口，打包入口文件输出的配置Webpack出口，打包文件输出的配置模式配置模式development（开发模式）/production（生产模式）/nonemodule模块的处理方式为这里不同的是使用各种加载器资源插件WebPack中一些常用的插件包括动态生成Html、生成CSS文件等devtool调试方法source-map等解析设置模块如何解析别名地址缩写扩展后缀自动搜索等.context:basedirectory,absolutepath,use从配置中解析loaderWebPack的入口点和入口配置有几种常见的方式？1'./index.js'2{index:'./index.js'}3['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true','./index.js']4{index:['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true',,'./index.js']}打包生成在线文件时经常使用第二种模式，第四种模式在多个页面需要HMR的时候，第三种模式是在开发SPA页面或者优化多页面HMR流程的时候。HtmlWebpackPlugin生成Html文件比较耗时。这时候可以关注当前开发的页面，也就是只打包当前开发的页面页面，减少需要重新生成的文件数量。WebPack的输出配置有多少个参数？output:{filename:'static/[name].js',path:path.resolve(__dirname,'dist'),publicPath:'/',chunkFileName:''}filename:文件名可以类似于static/[name].js这样写可以添加静态文件夹路径输出路径publicPath服务器防止资源文件路径chunkFileName非入口文件WebPack模式配置多少设置？如果不设置productiondevelopmentnone，如何根据production模式配置WebPack的常用模块？module:{rules:[{test:/\.css$/,use:[{loader:MiniCssExtractPlugin.loader,options:{//你可以在这里指定一个publicPath//默认情况下它在webpackOptions.outputhmr:process.env.NODE_ENV==='development',},},'css-loader']},{test:/\.(png|jpg|gif|svg)$/,使用：[{loader:'file-loader',options:{name:'[name].[ext]',outputPath:'images',}}]},{test:/\.(woff|woff2|eot|ttf|otf)$/,使用：[{loader:'file-loader',options:{name:'[name].[ext]',outputPath:'fonts'}}]{test:/.html$/,loader:['html-loader']}}]}还有bable-loader、url-loader、postcss-loader、less-loader、vue-loader、sass-loader等WebPack如何动态生成html并插入资源文件（css、js)?返回新的HtmlWebpackPlugin({文件名：`${fileName}.html`，模板：'./template.html'，注入：true，块：[`${fileName}`，'供应商']，缩小：{折叠空白：true，removeComments：true，useShortDoctype：true，trimCustomFragments：true，removeTagWhitespace：true，removeStyleLinkTypeAttributes：true，removeScriptTypeAttributes：true，removeRedundantAttributes：true}});如何使用HtmlWebpackPluginWebPack摇树？使用ES2015模块语法（即导入和导出）可确保没有编译器将ES2015模块语法转换为CommonJS模块（这也是流行的Babel预设中@babel/preset-env的默认行为-有关详细信息，请参阅文档）。在项目package.json文件中，添加一个“sideEffects”属性。通过将模式选项设置为生产来启用缩小（代码压缩）和摇树。WebPack怎么设置模块更新？devServer:{contentBase:'./dist',compress:true,hot:true},使用webpack-dev-middlemarewebpack-hot-middlemareserver端constexpress=require('express');constwebpack=require('webpack');constapp=express();constwebpackConfig=require('./webpack.config');constcompiler=webpack(webpackConfig);app.use(require("webpack-dev-中间件")(编译器,{noInfo:true,publicPath:webpackConfig.output.publicPath}));app.use(require("webpack-hot-middleware")(compiler));app.listen(3000,()=>{console.log(3000);});webpackentry配置consthotMiddlewareScript='webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true';{index:['hotMiddlewareScript','./index.js']}空谈很便宜。显示代码安装Webpack环境mkdirlearn-webpack&&cdlearn-webpacknpminit-ynpminstallwebpackwebpack-cli--save-devtouchwebpack.config.jswebpack.config.js:constpath=require('path');const{CleanWebpackPlugin}=require('clean-webpack-plugin');constHtmlWebpackPlugin=require('html-webpack-plugin');constMiniCssExtractPlugin=require('mini-css-extract-plugin');常量webpack=require('webpack');constglob=require('glob');constTerserJSPlugin=require('terser-webpack-plugin');constOptimizeCSSAssetsPlugin=require('optimize-css-assets-webpack-plugin');constgetEntries=()=>{returnglob.sync('src/**/*.js').map(url=>`./${url}`);};constgetEntryNames=()=>{constPRE_STR='./src/';constentries={};getEntries().forEach(url=>{constremoveExtUrl=url.replace(/.js$/ig,'');constfileParamsWithPath=removeExtUrl.slice(PRE_STR.length).split('/');entries[fileParamsWithPath.join('-')]=url.replace(/.js$/,'');});返回条目;};console.log(getEntryNames());constgetWebpackHtmls=()=>{constPRE_STR='./src/';返回getEntries().map(url=>{constremoveExtUrl=url.replace(/.js$/ig,'');constfileParamsWithPath=removeExtUrl.slice(PRE_STR.length).split('/');constfileName=fileParamsWithPath.join('-');returnnewHtmlWebpackPlugin({filename:`${fileName}.html`,template:'./template.html',inject:true,chunks:[`${fileName}`,'vendor'],缩小:{collapseWhitespace:true,removeComments:true,useShortDoctype:true,trimCustomFragments:true,removeTagWhitespace:true,removeStyleLinkTypeAttributes:true,removeScriptTypeAttributes:true,removeRedundantAttributes:true}});});};module.exports={entry:getEntryNames(),输出:{文件名:'static/[name].js',路径:path.resolve(__dirname,'dist'),publicPath:'/',chunkFilename:'static/vendor.js'},优化:{最小化器:[newTerserJSPlugin({}),newOptimizeCSSAssetsPlugin({})],splitChunks:{name:'vendor',chunks:'all',minChunks:1}},mode:'production',module:{rules:[{test:/\.css$/,use:[{loader:MiniCssExtractPlugin.loader,options:{//你可以在这里指定一个publicPath//默认情况下它在webpackOptions.outputhmr:process.env.NODE_ENV==='development',},},'css-loader']},{test:/\.(png|jpg|gif|svg)$/,使用:[{loader:'file-loader',options:{name:'[name].[ext]',outputPath:'images',}}]},{test:/\.(woff|woff2|eot|ttf|otf)$/,使用：[{loader:'file-loader',options:{name:'[name].[ext]',outputPath:'fonts'}}]},{test:/.html$/,loader:['html-loader']}]},plugins:[newCleanWebpackPlugin({dry:false,dangerouslyAllowCleanPatternsOutsideProject:true}),...getWebpackHtmls(),newMiniCssExtractPlugin({//选项类似于webpackOptions.output中的相同选项//两个选项都是可选的filename:'style/[name].css',chunkFilename:'style/[id].css',}),newwebpack.ProvidePlugin({join:['lodash','join']})],resolve:{别名:{'@':path.resolve('./src')},extensions:['.js','.jsx','.css','.less','.json','scss','.vue']}};
