关于webpack原理和优化那些事儿

webpack配置（webpack.config.js）

let path = require('path');

module.export = {
	mode: 'development', // 生产环境，开发环境
	entry: {
  	index: './src/index.js' // 入口
  },
	output: {
		filename: '[name].js', // 出口
		path: path.join(__dirname, './dist')
	}
}

loader是什么？

模块的转换。下载对应的loader，一般来说对less转换对应loader为style-loader，css-loader和less-loader，只需要执行对应的命令npm install --save-dev style-loader css-loader less-loader

只需要配置如下：

module.exports = {
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // 将CSS转换为CommonJS
            }, {
                loader: "less-loader" // 将 Less 转换为 CSS
            }]
        }]
    }
};

小知识：

命令行输入npx webpack则会启动打包功能

npx 是 npm 在5.2之后提供的

npx 会检测 node_modules 有没有 webpack 如果没有则会下载

---

webpack打包后文件详解(dist.js)

• 自执行函数

(function () {
})()

• 参数通过对象形式传递 （多个文件打包为一个文件）

key: 文件的目录
value: 一个函数

• 把所有文件打包成一个文件，通过__webpack_require__
• 原理，通过递归不停的调用自己

---

webpack优化

宗旨： 快(速度) + 小(体积) + 按需加载

打包：体积更小，速度更快

• 自带的优化：

tree-sharking: 依赖关系的解析
	生产环境有效 mode: 'production'
scope-hositing: 作用域提升
	变量 -> 不会打包到代码中

• 自己实现的优化：

happypack: 多线程打包
	体积比较小 -> 速度较慢
moment: 时间插件 会引入很多不需要的语言包 通过 ingnoreplugin 配置，把不需要的语言包删掉

优化：

webpack.optimization如其名字一样，是webpack为优化提出的，里面有很多内置的优化方式，配置即可使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XlWVylCc-1607325400800)(/Users/zhongqianwen02/Library/Application Support/typora-user-images/image-20201203151142294.png)]

1. chunk的合并与分割

在请求模块时，

1. 公共代码提取

小知识：

使用淘宝镜像：(国内网站，较为稳定，速度也较块)

npm config set registry https://registry.npm.taobao.org

dependencies 生产环境的依赖（默认）与功能相关

npm install xxx --save or npm install xxx

devdependencies  开发环境依赖  本地开发需要的工具

npm install xxx --save-dev

版本号：

^version：中版本和小版本

^2.2.3 -> 2.x.x 中最新版本

~version：小版本

~2.2.3 -> 2.2.x 中最新版本

version：特定版本

2.2.1 -> 2.2.1版本

scripts: 脚本命令功能