webpack打包原理
1、新建index.html文件，并手动引入打包后的js文件 执行 npm i html-webpack-plugin --save-dev 命令，安装依赖。
2、本质上，webpack 基于node平台，利用 node 的各种api来实现 javascript 应用程序的一个静态模块的打包工具。在打包过程中，构建依赖关系，并且实现模块引用预处理，以及缓存等。
3、两种模式的区别 development ：会将 process.env.NODE_ENV 的值设为 development启用 NamedChunksPlugin 和 NamedModulesPlugin production ：会将 process.env.NODE_ENV 的值设为 production。
4、entry用来指定Webpack的打包入口。这个需要从Webpack打包机制上说明，大家都知道，Webpack的打包的核心原理：一切皆模块。
5、通过Worker Loader，我们可以使用Webpack打包一个独立的Web Worker，并将它导出为一个单独的文件。
6、在项目根目录中新建一个webpack.config.js（基于node的，所以** **node.js的命令都可以识别）这样的话，就可以在终端中直接执行命令：webpack就可以直接打包了，但是还有个小问题。
Webpack打包
通过 命令行工具打包： webpack app.js bundle.js； 打包完成后会在同目录下生成bundle.js.app.js： 入口文件；bundle.js： 打包好的文件。
使用babel-minify-webpack-plugin插件可以帮助减少json文件的体积。安装插件之后，在webpack配置文件中添加如下内容plugins： [newBabiliMinifyPlugin()]这样就可以有效地减少json文件的体积，从而提高构建性能和减少服务器空间消耗。
这时候我们运行，发现报错找不到该文件。这是因为我们在index.html里引入该文件，但webpack没有打包编译。
vue为什么还要webpack打包
由此可见，为了最大程度降低打包文件的大小，目前最好的方式还是手工引入对应的组件文件。
vuejs 自定义了一种.vue文件，可以把html， css， js 写到一个文件中，从而实现了对一个组件的封装， 一个.vue 文件就是一个单独的组件。由于.vue文件是自定义的，浏览器不认识，所以需要对该文件进行解析。
综上所述，vue.js 是通过 webpack来打包，而webpack 又基于 npm， npm需要nodejs环境。这就是为什么vue.js 还需要安装nodejs环境。将目标dist文件夹拷贝到一台未安装nodejs的 nginx服务器上，访问页面可以正常响应逻辑。
***.js文件中，而是需要加载时去请求cdn资源。vue.config.js里面配置configureWebpack，配置externals 这样完成后，再次打包，js文件会大大变小，加载速度非常棒。
详解vuewebapp项目通过hbulider打包原生appvuewebpackhbulider
webapp项目已经通过vue-cli搭建的脚手架写好了，然后通过webpack打包成一个部署文件list，如下：打开HBulider，打开目录，选择这个list，项目名称自己更改。
网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。记得改一下config下面的index.js中bulid模块导出的路径。
这里分别讲一下vue2+webpack3 和 vue-cli3不同的配置。
结论：vue中，直接引用文件，可以让打包文件最小。试验记录 下面测试项目中引入一个Button组件的代价。
GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。MVC/MVVM/MVW框架：Angular.js、Backbone.js、Knockout/Ember。常用库：React.js、Vue.js、Zepto.js。
【Web前端基础】webpack打包原理是什么?
1、本质上，webpack 基于node平台，利用 node 的各种api来实现 javascript 应用程序的一个静态模块的打包工具。在打包过程中，构建依赖关系，并且实现模块引用预处理，以及缓存等。
2、webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
3、两种模式的区别 development ：会将 process.env.NODE_ENV 的值设为 development启用 NamedChunksPlugin 和 NamedModulesPlugin production ：会将 process.env.NODE_ENV 的值设为 production。
以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！
版权申明：新媒号所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报，一经查实，本站将立刻删除。
