❶ 【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。