webpack 如何构建 vue.js 项目
how webpack builds vue.js project
我的问题是关于webpack的。假设我正在使用 webpack 和 vue.js 项目。当我 运行 npm 运行 构建时，webpack 是如何构建项目的。我知道有一个构建文件夹，必须在其中添加配置文件，并且会有一个输出文件夹 dist，它将保存我的最终项目。
问题1）webpack是做什么的？它是否在配置文件中搜索入口点以便知道从哪里开始构建进程？ vue.js 是 src/main.js。我说的对吗？
问题 2) 当它找到 main.js 时，它会做什么？它是否从 main.js 到顶部以便找到所有依赖项？
问题 3) 假设 IT 找到了一个 .vue 文件。它有什么作用？它是否将 js 代码分开 - 将其放入其他一些 js 文件，然后分开 css 并将其放入其他一些 css 文件？或者只是将整个 .vue 代码放入 js 文件（及其所有 html 等等）？
问题 4) 只需要那行代码就能告诉我问题 3) 的答案。
是的，webpack 有一个入口点（来自配置的 entry 部分）。不完全是 src/main.js，它是可配置的。
它从一个入口点开始构建一个依赖树。
它将按照您提供的顺序由加载程序处理。通常，它是 vue-loader 将 vue 文件转换为 js，接下来是 babel-loader 将您的 js 方言（Flow/ES6/ES2017/TS）转换为 ES5，接下来是 js-loader 最后可以拆分所有代码依赖并继续加载。
CSS 分离可以通过像 ExtractTextWebpackPlugin 这样的 webpack 插件来完成，然后你的 css 方言（LESS/SASS/PostCSS，等等）将被加载器转换，即 sass-loader, css-loader, style-loader.
当样式提取插件不存在时，它将css与js一起分发并放在头部样式中。
我的问题是关于webpack的。假设我正在使用 webpack 和 vue.js 项目。当我 运行 npm 运行 构建时，webpack 是如何构建项目的。我知道有一个构建文件夹，必须在其中添加配置文件，并且会有一个输出文件夹 dist，它将保存我的最终项目。
问题1）webpack是做什么的？它是否在配置文件中搜索入口点以便知道从哪里开始构建进程？ vue.js 是 src/main.js。我说的对吗？
问题 2) 当它找到 main.js 时，它会做什么？它是否从 main.js 到顶部以便找到所有依赖项？
问题 3) 假设 IT 找到了一个 .vue 文件。它有什么作用？它是否将 js 代码分开 - 将其放入其他一些 js 文件，然后分开 css 并将其放入其他一些 css 文件？或者只是将整个 .vue 代码放入 js 文件（及其所有 html 等等）？
问题 4) 只需要那行代码就能告诉我问题 3) 的答案。
是的，webpack 有一个入口点（来自配置的
entry部分）。不完全是src/main.js，它是可配置的。它从一个入口点开始构建一个依赖树。
它将按照您提供的顺序由加载程序处理。通常，它是
vue-loader将 vue 文件转换为 js，接下来是babel-loader将您的 js 方言（Flow/ES6/ES2017/TS）转换为 ES5，接下来是js-loader最后可以拆分所有代码依赖并继续加载。CSS 分离可以通过像
ExtractTextWebpackPlugin这样的 webpack 插件来完成，然后你的 css 方言（LESS/SASS/PostCSS，等等）将被加载器转换，即sass-loader,css-loader,style-loader.当样式提取插件不存在时，它将css与js一起分发并放在头部样式中。