webpackcss打包多个 webpack打包多个文件

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到文件系统。

为什么vue要依赖node.js开发

Vue是一种用于构建用户界面的JavaScript框架。虽然Vue本身不依赖于Node.js，但是在Vue的开发生态系统中，Node.js是一个非常重要的组成部分。以下是一些原因：

1. Vue CLI: Vue CLI是一个命令行界面工具，用于创建Vue项目和管理其依赖项。Vue CLI依赖于Node.js来提供基本的构建功能，如打包和编译代码，同时还支持自动化测试和部署。

2. 服务器端渲染(SSR)： Vue的服务器端渲染(SSR)使得网站的首屏渲染更快。这种技术需要使用Node.js在服务器端运行Vue代码，并将渲染后的HTML返回给客户端。

3. 模块打包器：Vue使用webpack或者Rollup等模块打包器来将Vue组件打包为单个JavaScript文件。这些工具通常使用Node.js来运行。

4. npm： npm是JavaScript的软件包管理器，用于管理项目依赖项。Vue的许多相关库和插件都是通过npm发布和安装的，npm需要Node.js来运行。

因此，尽管Vue本身并不依赖于Node.js，但它的开发生态系统需要使用Node.js提供的许多工具和服务。

浅谈vue.js导入css库(elementUi)的方法

.安装以下模块，让webpack可以解析css文件cnpm install style-loader --save-devcnpm install css-loader --save-devcnpm install file-loader --save-dev1231232.安装elementUi模块cnpm install element-ui@next -S113.在webpack.base.conf.js中添加配置{test: /\\\\\\\\.css$/,loader: "style!css"},{test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,loader: "file"}12345678123456784.然后在 main.js 引入并注册import Element from 'element-ui'import 'element-ui/lib/theme-default/index.css'