webpack原理

前端工程化与webpack：

实际的前端开发：

模块化、组件化（UI结构样式的复用）、规范化、自动化

前端工程化：在企业级的前端项目中，把前端开发所用的工具、技术、流程、经验等进行规范化标准化。

前端工程化的解决方案：webpack

主要功能：提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性（程序员可以大胆的写高级代码）、性能优化等强大功能。

好处：程序员可以把工作重心放到具体功能的实现上，提高了前端开发的效率和项目的可维护性。

安装webpack两个相关的包

-S（--save）表示安装包之后放在dependencies（开发之后要上线的包）节点中

-D（--save-dev）表示安装包之后放在devDependencies（只在开发阶段用到的包）节点中

npm run dev

module.exports = {

    //代表webpack运行的模式，development和production

    mode: 'production'

}

production模式被压缩的很小，但是压缩时间加长。开发的时候用development；发布上线的时候用production，体积小。

run脚本的时候先去运行webpack.config.js文件，再去执行webpack文件。

 

//指定要处理哪个文件

entry: path.join(__dirname, './src/index1.js'),

//指定处理之后的文档要存放到哪里

    output: {

        path: path.join(__dirname, './dist'),

        filename: 'bundle.js'

}

dist文件是自动生成的

但是以上修改了源代码之后都需要重新运行，生成新的文件才能显示出效果。

命令：npm i webpack-dev-server@3.11.2 -D

即可安装插件，修改源代码之后可以自动更新dist里面的压缩文件。

配置webpack-dev-server

在使用server插件的时候

我们需要到浏览器localhost：8080去查看实时的网页效果，使用插件生成的bundle.js文件是存储在工程文件的根目录中，没有放物理磁盘里面，需要我们去修改index.html文件中script的导入路径，这样我们就能实时的查看修改的过程。

出错解决：使用插件的时候出现无法加载“@webpack cli/service”命令,未下载@webpack cli/service，则重新下载webpack cli；

出现端口被占用的情况则可以打开cmd关闭被占用端口的进程。

按两次ctrl+c可以关闭当前命令运行窗口。

我们在查看端口运行结果的时候每次都需要先打开src文件，比较麻烦于是我们又使用plugin插件将src里面的index.html文件复制到工程的根目录中（复制出来的文件只是保存到了内存中，并没有保存到物理磁盘中）

安装html-webpack-plugin插件：

命令：npm i html-webpack-plugin@5.3.2 -D

配置：

vue-cli可以自动帮我们配置webpack文件。

可以通过devServer节点对webpack-dev-server插件进行更多的配置

 

凡是修改了配置文件，或是修改了package.js配置文件，必须重启实时打包的服务器。

webpack中的loader（加载器）：

webpack默认只能大宝处理以.js结尾的模块。其它非.js后缀结尾的模块，需要调用loader加载器才可以正常打包。

加载器的作用：

css-loader

less-loader

babel-loader可以打包处理webpack无法处理的高级js语法

在webpack中，一切都是模块，都可以使用es6语法导入和使用

注意事项：

1. webpack只能打包.js结尾的文件，处理不了其它后缀的文件
2. 由于代码中包含了index.css文件，因此webpack默认处理不了
3. 当webpack发现某个文件处理不了的时候，先查找webpack.config.js这个文件，看mpdule.rules数组中是否配置了loader加载器
4. webpack把index.css文件先转交给最后一个loader进行处理（先转交给css-loader）
5. 当css-loader处理完毕之后，会把处理的结果转交给下一个loader（转交给style-loader）
6. 当style-loader处理完毕之后，发现没有下一个loader了，于是就把处理的结果转交给webpack
7. webpack把style-loader处理之后的结果合并到/dist/bundle.js文件中，最终生成打包好的文件

打包处理less文件：

使用base64可以避免一些不必要的网络请求。

打包处理样式表中与url路径相关的文件：

一般来说指定图片大小为470左右就可以了，不需要太大！！！不然打包的时候打包不进去

拼接一个参数就限制了大文件不能被转成base64！！

如果需要调用的loader只有一个，则只传递一个字符串也可以，如果有多个loader则必须要传递一个字符串数组。

import logo from './Image/logo.png'

console.log(logo);

以上导入图片就是一个base64格式的图片字符串

在webpack里面一切皆模块，都可以通过es6导入语法进行导入和使用

如果某个模块中使用from接收到的成员为undefined，则没必要接受。

webpack只能打包处理一部分高级的JavaScript语法。对于那些webpack无法处理的高级js语法，需要借助babel-loader进行打包处理。

 

 

在配置babel-loader的时候，只需要把自己的代码进行转换就可以了，一定要排除node_modules目录中的js文件，因为第三方包中的js兼容性问题，不需要我们关心。

项目开发完成之后，使用webpack对项目进行打包发布

1. 开发环境中，打包生成的文件存放在内存中，无法获取到最终的打包生成的文件
2. 开发环境中，打包生成的文件不会进行代码压缩和性能的优化

为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。

配置webapack的打包发布：

注意事项：--mode的优先级是高于webpack.config.js文件中默认的那个development操作的优先级！！

 

Source Map就是一个信息文件，里面存储着位置信息，也就是说存储着压缩混淆后的代码所对应的转换之前的代码位置。这样代码出错就能准确定位了。

 

在开发调试阶段，可以直接把devtool的值设置为eval-source-map

在实际发布的时候建议将devtool的值设置为nosources-source-map或者直接关闭Source Map

如果不更改设置用户点击 就会得到源码。。

 

 

 

 

总结：

 

在导入文件时以前我们使用的是../的方式，这种方式比较麻烦，建议使用@表示源代码目录，从外向里找！！！但是webpack中不能直接使用@符号，需要进行配置：

告诉webpack所写的代码中，@符号表示就是src这一层目录。
resolve:{

alias:{

‘@’:path.join(--dirname,’/src/’)

}

}