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
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
}