webpack公共js webpack公共代码提取

在angular2的使用中怎么用webpack打包js

安装Webpack及其他组件安装Webpack之前建议先安装Node.js，然后采用npm的方式来安装Webpack： npm install webpack -g 因为要用到angular，所以要安装angular： npm install angular 还要安装一系列加载器(loader)： npm install style-loader

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

htmlwebpackplugin有什么用

HtmlWebpackPlugin是一个出现频率比较高的webpack插件。

HtmlWebpackPlugin是用于生成html文件。我们的疑问可能在于，webpack本身不能生成html文件，事实上，默认的webpack主要是用于处理js文件的依赖图构建和打包，当需要生成html文件时，便需要使HtmlWebpackPlugin插件。

vue安装及环境配置

1. 安装Vue和配置环境是可以完成的。
2. 安装Vue需要先安装Node.js，然后使用npm安装Vue-cli，最后创建Vue项目。
配置环境需要在项目中安装相关的依赖和插件，例如webpack、babel等，以及配置webpack.config.js文件。
3. 在安装和配置完成后，可以使用Vue进行前端开发，包括组件化开发、路由管理、状态管理等。
同时，也可以使用Vue的生态系统中的插件和工具来提高开发效率和质量。

Vue可以使用npm或yarn进行安装，安装完成后可以在任意目录下创建项目并使用Vue。

在调试Vue应用时，可以使用Vue Devtools浏览器插件进行调试。

为了使用Vue的一些高级特性，如路由和状态管理，需要使用相应的库，例如vue-router和Vuex。在安装这些库时，必须保持与Vue的版本兼容。最后，为了实现自动构建和部署，建议使用Webpack等构建工具。