webpack小知识点

 

1：webpack的默认配置文件 webpack.config.js

2：package.json文件 private 字段表示 是否私有包,不发布到 npm 中

3：Node.js 中，__dirname 总是指向被执行 js 文件的绝对路径，所以当你在 /d1/d2/myscript.js 文件中写了 __dirname， 它的值就是 /d1/d2
使用方式
const path = require('path')
path.resolve(__dirname, '文件夹')
http://nodejs.cn/api/path.html#path_path_resolve_paths

  4：webpack --config webpack.config.dev.js
  添加--config 选项，可以修改webpack运行的配置文件

  5：url-loader和file-loader的简单区别
  url-loader是对file-loader的上层封装

  使用file-loader的情况下,图片较多的话,会发多次http请求,降低页面性能
  url-loader存在一个options{limit: '数值'},小于该数值情况,会将引入的图片编码,生成dataURl
  再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了

  file-loader底层处理文件的流程：首先会将该文件移动到出口文件夹当中,然后返回一个相对(出口文件夹)路径到引入该文件的地方，在使用该路径

6：webpack中loader的执行顺序,从下到上,从右到左

7：使用cdn
output 选项中添加 publicPath: 'http://cdn.com.cn', //所有注入到html的js文件都会加上这个路径

  8：devtools [] 解决问题是错误出错的地方
  sourceMap：本质是一个映射关系
  inline: 会将map文件转化成64位编码注入到main.js文件中
  cheap: 只告诉我错误在第几行就可以,而不用具体到列；并且只针对业务文件,而不会处理第三方模块
  module：他针对第三方模块的代码
  eval：打包速度最快；通过eval执行方式代码
  最佳实践：
  开发环境 cheap-module-eval-source-map
  生成环境 cheap-module-source-map

9：Tree Shaking 只支持ES Module的引入
(ES6 引入底层是静态的 AMD底层还是属于动态)

  在开发环境中 以下配置就可以使Tree Shaking 产生作用
  optimization ：{
  usedExports: true,//tree shaking配置
  }

  在package文件中
  sideEffects：[] //数组中填写的是不对某些文件进行tree shaking

  10：使用webpack-merge 对配置文件进行合并

  11：载主要是使用ES6 的 import()语法 异步添加模块

  12：使用 MiniCssExtractPlugin css文件进行code spliting

  OptimizeCSSAssetsPlugin 对css文件进行压缩

  13：提升webpack的打包性能
  {
  升级node 和 npm 的版本
  在尽可能少的模块上使用loader
  插件尽可能的精简和可靠
  resolve参数的合理配置{
    extensions: ['.js', '.jsx','.vue'], //当引入模块时，可以省略以这些为后缀的文件 顺序从左到右
    mainFiles: ['index', 'main'], //当引入模块时，会自动加载文件夹下index main 等这些名称的文件
    alias: {
      panrui: path.resolve(__dirname, './src/index')
    }, //给文件路径起个别名,当文件层级太多时比较方便
   }

  使用DllPlugin插件;使用tree shaking ；splichuncks

  }