webpack如何构建vue.js项目

Question

我的问题与webpack有关。假设我正在使用webpack和vue.js项目。当我运行npm run build时，webpack如何构建项目。我知道有一个build文件夹，其中必须添加配置文件，并且将有输出文件夹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）回答。

Answer 1

1. 是的，webpack有一个入口点（来自配置的entry部分）。这不是src/main.js，它是可配置的。
2. 它从入口点开始构建依赖关系树。
3. 它将按照您提供的顺序使用加载器进行处理。通常，它是将vue文件转换为js的vue-loader，然后转到babel-loader，它将你的js方言（Flow / ES6 / ES2017 / TS）转换为ES5，接下来是js-loader，它最终可以将所有代码拆分为依赖关系并继续加载。 CSS分离可以使用像ExtractTextWebpackPlugin这样的webpack插件完成，然后你的css方言（LESS / SASS / PostCSS等）将用加载器转换，即sass-loader，css-loader，style-loader。
4. 当样式提取插件不存在时，它会将css与js一起分发并将其放到头部样式中。