webpack如何构建vue.js项目

Question

我的问题与webpack有关。假设我正在使用webpack和vue.js项目。当我运行npm run build时，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）答案。

Answer 1

1. 是的，webpack有一个入口点（config中的entry部分）。并非完全src/main.js，而是可配置的。
2. 它从入口点开始构建依赖关系树。

3. 它将按照您提供的顺序由装载机处理。通常是vue-loader将vue文件转换为js，然后转到babel-loader，将您的js方言（Flow / ES6 / ES2017 / TS）转换为ES5，接下来是js-loader最后将所有代码拆分为依赖项，然后继续加载。

   可以使用ExtractTextWebpackPlugin之类的webpack插件来进行CSS分离，然后使用加载程序来转换您的CSS方言（LESS / SASS / PostCSS等），即sass-loader，css-loader， style-loader。

4. 当不存在样式提取插件时，它将与js一起分发css并将其放置在头部样式中。