Webpack -- config配置二

Webpack中Develoment和Production模式打包区分

开发环境，开发完成，代码上线，生产环境代码需要压缩，看不到代码具体问题

    //package.json
    "scripts":{
      "dev":"weebpack-dev-sever --config ./build/webpack.dev.js",
       "build":"webpack --config ./build/webpack.prod.js"
    }
    //webpack.dev.js //开发环境
    //npm i webpack-merge -D  
    const merge = require("webpack-merge")
    const commconConfig = require('./webpack.common.js')
    const DevConfig = {
      mode:"develoment"，
    }
    module.exports = mer(commonConfig,DevConfig) //导出二者的结合
    //webpack.prod。js //生产环境
    const ProdConfig = {
      mode:"production"，
    }
    //webpack.common.js //存储公共配置

Webpack和Code Splitting(代码分割)

Code Splitting：对公共代码进行拆分，可以让代码运行速度更快

//开发环境打包
    //package.json
    "scripts":{
      "dev-build":"webpack --config ./build/webpack.dev.js" //用dev的配置文件生成dist目录，在build目录下dist
      "dev":"weebpack-dev-sever --config ./build/webpack.dev.js",
       "build":"webpack --config ./build/webpack.prod.js"
    }

//config
entry:{
  lodash:'./src/loadsh.js',//html会同时引入两个js
    main:'./src/index.js'
}
plugins:[
  newCleanWebpackPlugin(["dist"],{
    root:path,resolve(_dirname,"../") //绝对路径
  }) //重新打包清理文件的目录
]
output:{
  filename:'[name].js',
    path:path,resolve(_dirname,"../dist") //重新生成出口位置
}
  //npm i lodash --save //功能集合
  //index.js
  //import _ from 'loadsh';
  console.log(_.jion(["a","b","c"],"xxx")) //拼接字符串axxxbxxxc,连接函数，连接符
  //业务逻辑过多，使用工具库，会打包同一个文件内，潜在问题，打包文件打，加载时间过长，修改逻辑，重新打包，重新访问需要重新加载，时间长
  
  //解决
  //lodash.js
    import _ from 'loadsh';
window._=_; //挂载在全局上，在其他地方就可以使用_
//业务逻辑改变时，只需加载main.js，


//自动代码分割
import _ from 'loadsh';
  console.log(_.jion(["a","b","c"],"xxx")) //拼接字符串axxxbxxxc,连接函数，连接符

//config.js
optimization:{
  splitChunks:{
    chunks:'all' //允许代码分割，自行切割
  }
}//entry去除loadsh

//index.js
//异步代码同样会被分割，不需要配置config
function getComponent(){
  //代码分割单独起名为lodash
  return import(/*webpackChunkName:"lodash"*/'loadsh').then(({defaule:_})=>{
    //异步获取loadsh
    var element = document.createElement('div');
    element.innerHtml = _.join(['Dell','Lee'],'-');
    return element;
  })
}getComponent().then(element=>[//异步获取loadsh
  document.body.appendChild(element);//挂载到body
])

SplitChunksPlugin配置参数详解

//npm i @babel/plugin-syntax-dynamic-import -D
//config.js
optimization:{
  aplitChunks:{
  	chunks:'all',
      cacheGroups:{
        vebdors:false, //修改打包文件去除前缀名
        default:false,
      }
  }
}
plugins:["@babel/plugin-syntax-dynamic-import"]

cacheGroups

optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          name: 'commons',
          chunks: 'initial',
          minChunks: 2
        }
      }
    }
  }