webpack5-WebpackDevServer、hotModuleReplaceMent、TreeShaking、webpackMerge、codeSplitting、lazyload、全局变量

• devServer

  devServer: {
         
      // 这实现了与第一个示例相同的效果，
      // 如果新的子域名需要访问 dev server，
      // 则无需更新您的配置
      allowedHosts: [
        '.host.com',
        'host2.com'
      ],
      before:(app)=>{
         
  		app.get('/some/path', function(req, res) {
         
          res.json({
          custom: 'response' });
        });
  	}，
  	contentBase:"./dist",//服务器代码根路径
  	open:true,//自动打开浏览器
  	port:8080，/端口号
  	proxy：{
         
  		'/api': {
         
  	        target: 'http://localhost:3000',
  	        pathRewrite: {
         '^/api' : ''}
          }
  	}
   }
  

• HMR hot module ReplaceMent热模块替换
  • 在devServer中加上hot:true,hotOnly:true
  • 增加插件webpack.hotModuleReplaceMentPlugin
  • css方面 只改变css内容，不影响js渲染的内容
  • js方面 实现多个模块js之间 修改一个不影响其他

    //需要在下边加上：
    if(module.hot){
             
       module.hot.accept('模块文件',()=>{
             
          //重新执行代码 函数功能
       })
    }
    

• Tree Shaking 只支持支ES module
  • 没有导入的模块不打包 (import “*.css” 不打包)
  • 例如：

    	import {
              add } from "math.js" //使用Tree Shaking只打包add方法、其他没事用的不打包
    

  • 需要设置 package.json

    {
             
    	"sideEffects": ["*.css"],
    }
    

  • 设置Tree Shaking

        //webpack.config.js
       plugins:[
          optimization:{
             
             usedExports:true//设置Tree Shaking
          }
    ]
    

• webpack.dev.js webpack.base.js webpack.pro.js 使用webpack-merge合并
• code splitting splitChunksPlugin mincssextractPlugin
  • 引入第三方库将所有文件打包一起 每次上线用户都需要重新加载。耗费性能及用户体验不好
  • 第一种分割

    optimization:{
             
       splitChunks:{
             
           chunks:'all' ,//代码分割
           minSize:30000,//大于3000K做分割
           //maxSize:1000,//大于1000k尝试再次分割
           minChunks:1,//引用大于一次就分割
           maxAsyncRequests:5,//同时加载数最多5个请求
           maxInitialRequests:3,//入口文件最多分割3个
           automaticNmeDelimiter:"~",//文件生成时候名字中间连接符
           name:true,
           catchGroup:{
             //同步代码
    			vendors:{
             //来自node_modules
    				test:/[\\/]node_modules[\\/]/,
    				priority:-10,
    				filename:'vendors.js',
    			},
    			default:{
             //其他来源
    				priority:-20,//权限
    				reuseExistingChunk:true//如果一个模块打包过不会再次打包
    			}
    		}
       }
    }
    

  • 异步引入文件自动分割

    function getComonent(){
             
    	return import('lodash').then((default:_)=>{
             
    		//逻辑代码
    		return ""//结果
    	})
    }
    getComonent().then(element=>{
             
    	//逻辑代码
    })
    

  • css分割MiniCssExtractPlugin
    • MiniCssExtractPlugin

    	npm install --save-dev mini-css-extract-plugin//安装
    	//tree shaking影响css代码分割
    	//webpack.config.js
    	{
             
    		new MiniCssExtractPlugin({
             
    	      // Options similar to the same options in webpackOptions.output
    	      // both options are optional
    	      filename: "[name].css",
    	      chunkFilename: "[name].chunk.css"
    	    })
    	}
    	rules: [
          {
             
            test: /\.css$/,
            use: [
              {
             
                loader: MiniCssExtractPlugin.loader,
                options: {
             
                  // you can specify a publicPath here
                  // by default it use publicPath in webpackOptions.output
                  publicPath: '../'
                }
              },
              "css-loader"
            ]
          }
        ]
    

  • css压缩

  cnpm i  optimize-css-assets-webpack-plugin -D
  optimization:{
         
  	minimizer:[
  		new optimize-css-assets-webpack-plugin({
         })
  	]
  }
  

• shimming垫片
  • 依赖于jq的库 使用插件providePlugin

    webpack.providePlugin({
             
       $:"jquery"//发现模块有$ 遇见$就会引入jquery 并将jquery赋值给$
    })
    

  • imports-loder实现模块内的this指向window而不是模块本身

    {
             
       loader:"impots-loader!this=>window"
    }
    

• 全局变量

new webpack.DefinePlugin({
     
       __DEV__: true
   }),