反webpack編譯助手

『壹』 webpack 怎麼直接實時編譯輸出文件

使用webpack編譯打包react是非常便捷的。這也是人們常用的一種方式。但是在使用過程中，一定要注意一個細節，那就是webpack和babel-loader的安裝位置。react安裝當然，使用react必須先安裝react和react-dom，其安裝方式很簡單（前提是我們必須安裝有npm）。#npminstallreactreact-dom–savereact安裝就這樣簡單，其實react和react-dom就是相當於js類庫。但是我們需要解析器來解析react的語法。react解析器babel安裝babel安裝的位置是我們這篇文章的目的。babel有兩種安裝的位置：一種是全局安裝，一種是本地安裝——也就是安裝在項目目錄下的node_moles下。#npminstallbabel-corebabel-loaderbabel-preset-react–save-dev//本地安裝#npminstallbabel-corebabel-loaderbabel-preset-react–g//全局安裝一般情況下我們選擇本地安裝，這樣便於管理。打包工具webpack的安裝同樣，webpack的安裝位置也是這篇文章描述的所要注意的點。當然，它也有兩種安裝的位置：全局安裝和本地安裝。#npminstallwebpack–save-dev//本地安裝#npminstallwebpack–g//全局安裝如果選擇本地安裝，那麼在使用的時候較麻煩一些，我們需要在命令前加上路徑。所以一般情況下都是全局安裝，這樣就可以在任意位置直接使用。這里我們選擇全局安裝。這樣才能出現我們將要說的問題。webpack配置文件編寫安裝完webpack以後，下面來編寫webpack配置文件webpack.config.js。這里我不寫全部，只寫載入loader部分。代碼一mole:{loaders:[{test:/\.js$/,loader:'babel',query:{presets:['react']}}]}編譯過程中出現的錯誤好了，到了關鍵的地方了。現在我們整個系統的配置是這樣的：babel安裝到本地，webpack安裝到全局位置，webpack配置文件如代碼一所示。接下來我們就要編譯打包我們的項目。#webpack執行該命令以後，你會發現出現如下的錯誤：ERRORin(webpack)/~/node-libs-browser/~/process/browser.jsMolebuildfailed:Error:Couldn'tfindpreset"react"relativetodirectory"/node/lib/node_moles/webpack/node_moles/node-libs-browser/node_moles/process"……這也就是說找不到babel-preset-react。好了，說了這么多終於在這里引出了我們將要討論的問題（這里大家不要嫌我啰嗦，為什麼出現這種問題，其原因總要弄清楚。什麼樣的配置會出現這種問題，了解以後才容易上手解決）。解決問題的方式出現上述問題以後，我們有這樣三種方式可以解決。方式一要解決這個問題很簡單。我們知道，出現這個問題是因為bable和webpack安裝的位置不同，所以找不到babel-preset-react。因為在配置文件中有這樣一段代碼。query:{presets:['react']}好了，既然知道是安裝位置不同，那我們可以將babel安裝在全局位置，這樣這個問題不就解決了嗎。#npmremovebabel-corebabel-loaderbabel-preset-react–save-dev//首先移除原先安裝的babel#npminstallbabel-corebabel-loaderbabel-preset-react–g//全局安裝沒錯，問題解決了。但是我們不推薦使用這種方式。因為這樣不便於管理，所以還是使用其他的方式。方式二此種方式和方式一大同小異。方式一是改變babel的安裝位置，而這里是改變webpack的安裝位置。原先webpack是安裝到全局位置的，所以找不到安裝到本地項目目錄下的babel-preset-react。因此我們可以改變webpack的位置。#npmremovewebpack–g//移除原先的webpack#npminstallwebpack–save-dev//將webpack安裝到本地位置——也就是項目目錄下的node_moles中#ln–s/項目根目錄/node_moles/webpack/bin/webpack.js/usr/bin/webpack//為了使用webpack方便，在這里我們在/usr/bin目錄下建立軟連接（也就是快捷方式）//這樣我們就可以在任意位置直接使用webpack命令了。此時我們已經改變了webpack的安裝位置。現在二者同在項目目錄下安裝。所以可以正確編譯了。此種方式較方式一，我個人比較推薦這種方式，這樣比較方便管理。但是，這種方式也不是沒有弊端。如果我們有多個項目，那我們就需要在每個項目下都安裝webpack，那豈不是很麻煩。所以這種方式也不是很好。方式三該方式應該說是最值得推薦的，因為不需要改變webpack和babel的安裝位置。webpack還是在全局位置，babel還是在本地項目位置下。我們需要做的就是修改webpack的配置文件，在代碼一的基礎上添加一句代碼。代碼二mole:{loaders:[{test:/\.js$/,loader:'babel',exclude:/node_moles/,query:{presets:['react']}}]}

『貳』 如何使webpack 編譯報錯後不要斷開服務

Sims2PackInstaller_v1514.exe 如果是這個就是用來安裝Sims2Pack的工具， 也可以用來整理

『叄』 Webpack 怎麼用

1. 為什麼用 webpack?
他像 Browserify, 但是將你的應用打包為多個文件. 如果你的單頁面應用有多個頁面, 那麼用戶只從下載對應頁面的代碼. 當他么訪問到另一個頁面, 他們不需要重新下載通用的代碼.
他在很多地方能替代 Grunt 跟 Gulp 因為他能夠編譯打包 CSS, 做 CSS 預處理, 編譯 JS 方言, 打包圖片, 還有其他一些.
它支持 AMD 跟 CommonJS, 以及其他一些模塊系統, (Angular, ES6). 如果你不知道用什麼, 就用 CommonJS.
2. Webpack 給 Browserify 的同學用
對應地:
browserify main.js > bundle.js

webpack main.js bundle.js

Webpack 比 Browserify 更強大, 你一般會用 webpack.config.js 來組織各個過程:
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};

這僅僅是 JavaScript, 可以隨意添加要運行的代碼.
3. 怎樣啟動 webpack
切換到有 webpack.config.js 的目錄然後運行:
webpack 來執行一次開發的編譯
webpack -p for building once for proction (minification)
webpack -p 來針對發布環境編譯(壓縮代碼)
webpack --watch 來進行開發過程持續的增量編譯(飛快地!)
webpack -d 來生成 SourceMaps
4. JavaScript 方言
Webpack 對應 Browsserify transform 和 RequireJS 插件的工具稱為 loader. 下邊是 Webpack 載入 CoffeeScript 和 Facebook JSX-ES6 的配置(你需要 npm install jsx-loader coffee-loader):
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
mole: {
loaders: [
{ test: /\.coffee$/, loader: 'coffee-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' } // loaders 可以接受 querystring 格式的參數
]
}
};

要開啟後綴名的自動補全, 你需要設置 resolve.extensions 參數指明那些文件 Webpack 是要搜索的:
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
mole: {
loaders: [
{ test: /\.coffee$/, loader: 'coffee-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' }
]
},
resolve: {
// 現在可以寫 require('file') 代替 require('file.coffee')
extensions: ['', '.js', '.json', '.coffee']
}
};

5. 樣式表和圖片
首先更新你的代碼用 require() 載入靜態資源(就像在 Node 里使用 require()):
require('./bootstrap.css');
require('./myapp.less');

var img = document.createElement('img');
img.src = require('./glyph.png');

當你引用 CSS(或者 LESS 吧), Webpack 會將 CSS 內聯到 JavaScript 包當中, require() 會在頁面當中插入一個 ｀<style>標簽. 當你引入圖片, Webpack 在包當中插入對應圖片的 URL, 這個 URL 是由require()` 返回的.
你需要配置 Webpack(添加 loader):
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
path: './build', // 圖片和 JS 會到這里來
publicPath: 'http://mycdn.com/', // 這個用來成成比如圖片的 URL
filename: 'bundle.js'
},
mole: {
loaders: [
{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // 用 ! 來連接多個人 loader
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} // 內聯 base64 URLs, 限定 <=8k 的圖片, 其他的用 URL
]
}
};

6. 功能開關
有些代碼我們只想在開發環境使用(比如 log), 或者 dogfooging 的伺服器里邊(比如內部員工正在測試的功能). 在你的代碼中, 引用全局變數吧:
if (__DEV__) {
console.warn('Extra logging');
}
// ...
if (__PRERELEASE__) {
showSecretFeature();
}

然後配置 Webpack 當中的對應全局變數:
// webpack.config.js

// definePlugin 接收字元串插入到代碼當中, 所以你需要的話可以寫上 JS 的字元串
var definePlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
__PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
});

mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
plugins: [definePlugin]
};

然後你在控制台里用 BUILD_DEV=1 BUILD_PRERELEASE=1 webpack 編譯. 注意一下因為 webpack -p 會執行 uglify dead-code elimination, 任何這種代碼都會被剔除, 所以你不用擔心秘密功能泄漏.
7. 多個進入點(entrypoints)
比如你用 profile 頁面跟 feed 頁面. 當用戶訪問 profile, 你不想讓他們下載 feed 頁面的代碼. 因此你創建多個包: 每個頁面一個 "main mole":
// webpack.config.js
mole.exports = {
entry: {
Profile: './profile.js',
Feed: './feed.js'
},
output: {
path: 'build',
filename: '[name].js' // 模版基於上邊 entry 的 key
}
};

針對 profile, 在頁面當中插入 <script src="build/Profile.js"></script>. feed 頁面也是一樣.
8. 優化共用代碼
feed 頁面跟 profile 頁面共用不要代碼(比如 React 還有通用的樣式和 component). Webpack 可以分析出來他們有多少共用模塊, 然後生成一個共享的包用於代碼的緩存.
// webpack.config.js

var webpack = require('webpack');

var commonsPlugin =
new webpack.optimize.CommonsChunkPlugin('common.js');

mole.exports = {
entry: {
Profile: './profile.js',
Feed: './feed.js'
},
output: {
path: 'build',
filename: '[name].js'
},
plugins: [commonsPlugin]
};

在上一個步驟的 script 標簽前面加上 <script src="build/common.js"></script> 你就能得到廉價的緩存了.
9. 非同步載入
CommonJS 是同步的, 但是 Webpack 提供了非同步指定依賴的方案. 這對於客戶端的路由很有用, 你想要在每個頁面都有路由, 但你又不像在真的用到功能之前就下載某個功能的代碼.
聲明你想要非同步載入的那個"分界點". 比如:
if (window.location.pathname === '/feed') {
showLoadingState();
require.ensure([], function() { // 語法奇葩, 但是有用
hideLoadingState();
require('./feed').show(); // 函數調用後, 模塊保證在同步請求下可用
});
} else if (window.location.pathname === '/profile') {
showLoadingState();
require.ensure([], function() {
hideLoadingState();
require('./profile').show();
});
}

Webpack 會完成其餘的工作, 生成額外的 chunk 文件幫你載入好.
Webpack 在 HTML script 標簽中載入他們時會假設這些文件是怎你的根路徑下. 你可以用 output.publicPath 來配置.
// webpack.config.js
output: {
path: "/home/proj/public/assets", // path 指向 Webpack 編譯能的資源位置
publicPath: "/assets/" // 引用你的文件時考慮使用的地址
}

『肆』 webpack怎麼自動編譯reactjs

使用webpack編譯打包react是非常便捷的。這也是人們常用的一種方式。但是在使用過程中，一定要注意一個細節，那就是webpack和babel-loader的安裝位置。

react安裝

當然，使用react必須先安裝react和react-dom，其安裝方式很簡單（前提是我們必須安裝有npm）。

# npm install react react-dom –save

react安裝就這樣簡單，其實react和react-dom就是相當於js類庫。但是我們需要解析器來解析react的語法。

react解析器babel安裝

babel安裝的位置是我們這篇文章的目的。babel有兩種安裝的位置：一種是全局安裝，一種是本地安裝——也就是安裝在項目目錄下的node_moles下。

# npm install babel-core babel-loader babel-preset-react –save-dev

//本地安裝

#npm install babel-core babel-loader babel-preset-react –g

//全局安裝

一般情況下我們選擇本地安裝，這樣便於管理。

打包工具webpack的安裝

同樣，webpack的安裝位置也是這篇文章描述的所要注意的點。當然，它也有兩種安裝的位置：全局安裝和本地安裝。

# npm install webpack –save-dev

//本地安裝

# npm install webpack –g

//全局安裝

如果選擇本地安裝，那麼在使用的時候較麻煩一些，我們需要在命令前加上路徑。所以一般情況下都是全局安裝，這樣就可以在任意位置直接使用。

這里我們選擇全局安裝。這樣才能出現我們將要說的問題。

webpack配置文件編寫

安裝完webpack以後，下面來編寫webpack配置文件webpack.config.js。這里我不寫全部，只寫載入loader部分。

代碼一

mole:{

loaders: [

{

test: /\.js$/,

loader: 'babel',

query:{

presets:['react']

}

}

]

}

編譯過程中出現的錯誤

好了，到了關鍵的地方了。現在我們整個系統的配置是這樣的：babel安裝到本地，webpack安裝到全局位置，webpack配置文件如代碼一所示。

接下來我們就要編譯打包我們的項目。

# webpack

執行該命令以後，你會發現出現如下的錯誤：

ERROR in (webpack)/~/node-libs-browser/~/process/browser.js

Mole build failed: Error: Couldn't find preset "react" relative to
directory
"/node/lib/node_moles/webpack/node_moles/node-libs-browser/node_moles/process"

……

這也就是說找不到babel-preset-react。

好了，說了這么多終於在這里引出了我們將要討論的問題（這里大家不要嫌我啰嗦，為什麼出現這種問題，其原因總要弄清楚。什麼樣的配置會出現這種問題，了解以後才容易上手解決）。

解決問題的方式

出現上述問題以後，我們有這樣三種方式可以解決。

方式一

要解決這個問題很簡單。我們知道，出現這個問題是因為bable和webpack安裝的位置不同，所以找不到babel-preset-react。因為在配置文件中有這樣一段代碼。

query:{

presets:['react']

}

好了，既然知道是安裝位置不同，那我們可以將babel安裝在全局位置，這樣這個問題不就解決了嗎。

#npm remove babel-core babel-loader babel-preset-react –save-dev

//首先移除原先安裝的babel

#npm install babel-core babel-loader babel-preset-react –g

//全局安裝

沒錯，問題解決了。但是我們不推薦使用這種方式。因為這樣不便於管理，所以還是使用其他的方式。

方式二

此種方式和方式一大同小異。方式一是改變babel的安裝位置，而這里是改變webpack的安裝位置。原先webpack是安裝到全局位置的，所以找不到安裝到本地項目目錄下的babel-preset-react。因此我們可以改變webpack的位置。

# npm remove webpack –g

//移除原先的webpack

# npm install webpack –save-dev

//將webpack安裝到本地位置——也就是項目目錄下的node_moles中

# ln –s /項目根目錄/node_moles/webpack/bin/webpack.js /usr/bin/webpack

//為了使用webpack方便，在這里我們在/usr/bin目錄下建立軟連接（也就是快捷方式）

//這樣我們就可以在任意位置直接使用webpack命令了。

此時我們已經改變了webpack的安裝位置。現在二者同在項目目錄下安裝。所以可以正確編譯了。

此種方式較方式一，我個人比較推薦這種方式，這樣比較方便管理。但是，這種方式也不是沒有弊端。如果我們有多個項目，那我們就需要在每個項目下都安裝webpack，那豈不是很麻煩。所以這種方式也不是很好。

方式三

該方式應該說是最值得推薦的，因為不需要改變webpack和babel的安裝位置。webpack還是在全局位置，babel還是在本地項目位置下。我們需要做的就是修改webpack的配置文件，在代碼一的基礎上添加一句代碼。

代碼二

mole:{

loaders: [

{

test: /\.js$/,

loader: 'babel',

exclude:/node_moles/,

query:{

presets:['react']

}

}

]

}

『伍』 webpack編譯過程中，如何顯示編譯中的錯誤信息

webpack 編譯出錯了自然會顯示出錯信息的，不需要其他操作。
可以加上--display-error-details來看更詳細的錯誤日誌

『陸』 前端構建工具webpack有什麼缺陷

1.文檔缺失，尤其中文文檔

長期以來webpack官方文檔和example匱乏，提供的一些例子都是很簡單那種，經常發現完全按照例子來配置但就是跑不起來，中文文檔就更不用說了，少的可憐。這個問題也直接導致下面的第2點。
2.配置難&難調試

稍微復雜一點的項目，如果使用webpack編譯，不經過一段痛苦不堪的配置調試過程是沒法正常跑起來的。這還沒完，在自己機器上跑起來之後可能到了另一個同事哪兒又報錯了等等。總之正如下面有人回答那樣，配置文件一旦跑起來，是根本不敢去改的，生怕又出錯。
webpack的錯誤提示也非常難看懂，基本不可能從錯誤很直觀的找到原因，長期以來碰到問題只能靠猜，你沒看錯，就是靠猜！！
3.編譯慢
經驗不足的同學很容易碰到這個問題，當然可以通過一些手段做優化，比如配置mole的resolve、root等，使用happypack加速、dll提前編譯等等。但是筆者曾經嘗試過happypack，對編譯速度有提升但效果不明顯，dll的話我有按照官方文檔的做法去做，但是最終編譯出來又報了一些莫名其妙的錯（也有可能是代碼寫的有問題），總之心累，後來直接改成externals方式，全局script引入第三方庫。
4.對server-render不友好
webpack本質上還是靜態打包，意思就是打包完成之後其實文件的載入順序已經固定，只是被載入的時間不定而已。所以使用webpack原則上不存在按需載入之類的說法，code split其實是人工分隔，但是真實的按需載入場景豈是人工能枚舉完的 （下劃線這句話不太好解釋，也不想過多解釋，熟悉前端工程的人應該都明白啥意思）。
在這里我要說的對server-render不友好其實是指html的處理，webpack其實是通過在js里用require標記資源然後載入任意資源（css、圖片、fonts等等），但其實html文件才是頁面真實的入口，最終編譯出的js還是需要引入到html里，為了防止css懶載入導致頁面抖動，編譯完的css還需要從js里邊提取出來放到html外鏈。

目前一般都是通過html-webpack-plugin來做這個事情，先搜集某個html所引用的靜態資源最終自動插入到html。這種方式對於前端渲染的應用沒有問題，但是對於server-render的那就不行了，因為server-render下html是作為模板由後端語言吐出，而開發模式下（例如webpack-dev-server）webpack是不會輸出任何文件的（開發環境webpack是將文件放到內存然後在路由層自動serve了），所以這會導致開發環境模板無法引用靜態資源。當然，有一種解決方案就是靜態資源不改變文件名稱，預先寫好路徑，開發環境和生產環境同名（即覆蓋式發布）。

『柒』 vue壓縮後的js可以反編譯出來嗎

vue壓縮後的js可以反編譯出來，反編譯方法為：

1、在桌面找到自己下載的瀏覽器軟體，點擊瀏覽器圖標。

『捌』 vue求助!!!webpack編譯失敗,但是加一個回車,或者打個空格就好了..

敲回車或空格，實際上是對程序重新編譯了一次