❶ 【Web前端基础】webpack全局安装失败怎么办
WebPack的安装，采用的是命令行npm形式的安装。
d://切到d盘
mkdir webpack_demo//在d盘下新建webpack_demo文件夹
cd webpack_demo//进入该文件夹下
npm install -g webpack //全局安装webpack
（备注如果这样安装会出现提示安装webpack-cli；这是4.x的提示，如果不想安装webpack-cli需重新安装低版本webpack）
npm uninstall -g webpack //先卸载之前安装的webpack
npm install -g [email protected] //安装低版本webpack
全局安装完成后，我们还要进行一个项目目录的安装。在用npm安装前，我们先要进行一下初始化，
初始化的主要目的是生成package.json文件（这是一个标准的npm说明文件，里面蕴含了丰富的信息，
包括当前项目的依赖模块，自定义的脚本任务等等，如果你对此文件还不了解，可以看看node 的相关知识）。
npm init//初始化项目，可以一路回车生成的package.json文件
npm install --save-dev [email protected] //官方不太支持全局安装，会锁定版本，因此对项目目录安装
安装完成后可以查看版本号 webpack -v
安装完成后新建webpack.config.js配置文件基本配置
const path = require(‘path’);
const uglify = require(‘uglifyjs-webpack-plugin’);//代码压缩
mole.exports={
//入口文件的配置项
entry:{
entry:'./src/entry.js',
//这里我们又引入了一个入口文件
entry2:'./src/entry2.js'
},
//出口文件的配置项
output:{
//输出的路径，用了Node语法
path:path.resolve(__dirname,'dist'),
//输出的文件名称
filename:'[name].js'
},
//模块：例如解读CSS,图片如何转换，压缩
mole:{
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]//处理样式的loader
}
]
},
//插件，用于生产模版和各项功能
plugins:[
new uglify()//代码压缩
],
//配置webpack开发服务功能
devServer:{
//设置基本目录结构
contentBase:path.resolve(__dirname,'dist'),
//服务器的IP地址，可以使用IP也可以使用localhost
host:'localhost',
//服务端压缩是否开启
compress:true,
//配置服务端口号,可自定义
port:1717
}
}
（备注：安装webpack-dev-server时安装完后，运行报不是内部指令，需要在package.json中配置下）
“scripts”: {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"12345
},
如果还是报不是内部指令，则重新安装低版本 npm i [email protected]
npm install --save-dev webpack
❷ webpack打包原理vue
webpack打包原理1、新建index.html文件，并手动引入打包后的js文件执行npmihtml-webpack-plugin--save-dev命令，安装依赖。
2、本质上，webpack基于node平台，利用node的各种api来实现javascript应用程序的一个静态模块的打包工具。在打包过程中，构建依赖关系，并且实现模块引用预处理，以及缓存等。
3、两种模式的区别development：会将process.env.NODE_ENV的值设为development启用NamedChunksPlugin和NamedMolesPluginproction：会将process.env.NODE_ENV的值设为proction。
4、entry用来指定Webpack的打包入口。这个需要从Webpack打包机制上说明，大家都知道，Webpack的打包的核心原理：一切皆模块。
5、通过WorkerLoader，我们可以使用Webpack打包一个独立的WebWorker，并将它导出为一个单独的文件。
6、在项目根目录中新建一个webpack.config.js（基于node的，所以****node.js的命令都可以识别）这样的话，就可以在终端中直接执行命令：webpack就可以直接打包了，但是还有个小问题。
Webpack打包通过命令行工具打包：webpackapp.jsbundle.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应用程序的静态模块打包器(molebundler)。
3、两种模式的区别development：会将process.env.NODE_ENV的值设为development启用NamedChunksPlugin和NamedMolesPluginproction：会将process.env.NODE_ENV的值设为proction。