webpack升级webpack2 webpack升级vite

webpack原理解析

1.webpack核心概念：

entry： 一个可执行模块或库的入口文件。

chunk ：多个文件组成的一个代码块，例如把一个可执行模块和它所有依赖的模块组合和一个 chunk 这体现了webpack的打包机制。

loader ：文件转换器，例如把es6转换为es5，scss转换为css。

plugin ：插件，用于扩展webpack的功能，在webpack构建生命周期的节点上加入扩展hook为webpack加入功能。

2.webpack构建流程（原理）：

从启动webpack构建到输出结果经历了一系列过程，它们是：

2.1 解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。

2.2 注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。

2.3 从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。

2.4 在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。

2.5 递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。

2.6 输出所有chunk到文件系统。

rem自动转换px的postcss-px2rem插件怎么配置

postcss插件配置在webpack2版本以后有所变动，webpack.config.js文件plugins增加：

webpackConfig.plugins.push( new webpack.LoaderOptionsPlugin({ options: {

postcssLoader: () => {

return [ require('postcss-px2rem')()

]

}

}

})

还有一种写法，根目录新建postcss.config.js文件，配置：

`module.exports = {

plugins: [

require('postcss-px2rem')()

]

}`

vite和vue-cli的区别

您好，Vite和vue-cli是两个前端开发工具，它们的主要区别如下：

1. 构建方式：Vite使用ES模块构建，而vue-cli使用Webpack构建。Vite利用浏览器原生的ES模块系统，通过基于浏览器原生模块的开发服务器实现快速的冷启动和热模块替换，而vue-cli则通过Webpack构建整个应用。

2. 构建速度：由于Vite利用浏览器原生的ES模块加载，可以实现秒级的冷启动和热更新，构建速度比vue-cli更快。而vue-cli的构建速度相对较慢，特别是在大型项目中。

3. 开发体验：Vite在开发过程中支持快速的热模块替换，可以实时预览修改的效果，无需手动刷新页面。而vue-cli则需要重新构建整个应用才能看到修改的效果。

4. 适用场景：Vite适用于中小型项目，特别是在开发阶段需要快速迭代的项目。而vue-cli则适用于大型项目，可以通过Webpack的强大功能满足复杂的项目需求。

总的来说，Vite相比vue-cli在开发效率和构建速度上有明显的优势，但在功能上还不如vue-cli强大。因此，选择使用哪个工具取决于项目的规模和需求。