webpack基础配置

entry

1.入口文件，单独入口为字符串形式，多个入口文件为数组形式

output

1.出口文件，在这里设置path和fileName

mode

1.判断是用于生产环境的配置还是开发环境的配置，devlepment,production

module---loader

1.由英文翻译过来为模块，在这里主要是在rules里面配置loader,loader的执行顺序由下往上，由后往前的执行顺序，而loader的写法又有两种

当只有一种loader的时候为字符串形式
当有多种且不需要额外配置时使用数组形式
当有loader需要进行详细配置时则是对象形式里面增加一个options选项 2.常见loader有babel-loader,css-loader,less-loader,style-loader,url-loader,file-loader,postcss-loader(做css兼容性),eslint-loader,html-loader(实现在html使用js里面的变量)

plugin

1.常见plugin：HtmlWebpackPlugin,MiniCssExtractPlugin(提取css文件的插件)，OptimizeCssAssetsWebpackPlugin(压缩css的插件)

webpack性能优化方案---devServer

1.启用热更新，devServe里面有一个hot设置为true就行

webpack性能优化方案---devtool

webpack性能优化方案---oneOf

1.此选项在module里面的rules里面，后跟一个数组，作用，使文件匹配到一个loader之后就不在往下继续进行匹配了，减少loader匹配次数

webpack性能优化方案---缓存

1.在babel-loader中开启缓存，设置cacheDirectory为true,在后续构建中直接读取缓存，不需要在重新构建

webpack性能优化方案---代码分割-optimization

1.只需要在optimization设置splitChunks里面的chunks为all

webpack性能优化方案---开启多进程打包

1.使用thread-loader来设置多进程打包

webpack性能优化方案---externals

1.配置externals选项

webpack性能优化方案---懒加载预加载

1.使用contenthash值进行打包

webpack性能优化方案---pwa

1.使用workBox,用WorkBoxWebpackPlugin插件生成一个serviceworker，此技术还可以实现联网正常访问项目

webpack性能优化方案---dll

1.告诉webpack哪些东西需要打包，哪些东西不需要打包,使用AddAssetHtmlWebpackPlugin这个插件，将某个文件打包输出出去，并在html自动引入该资源

webpack.dll.js

js 复制代码

/*
  使用dll技术，对某些库（第三方库：jquery、react、vue...）进行单独打包
    当你运行 webpack 时，默认查找 webpack.config.js 配置文件
    需求：需要运行 webpack.dll.js 文件
      --> webpack --config webpack.dll.js
*/